search

SiRumCz / CSC501

CSC501 assignments
0 stars 1 forks source link

Map with GEOJSON #48

Closed soroushysfi closed 4 years ago

soroushysfi commented 4 years ago

I used leaflet.js library to show the map and GeoJSON file from Jonathans branch. I found out that if we want to do some heat map, we would need some properties in GeoJSON. The GeoJSON file we already have is:

{
    "type":"FeatureCollection",
    "totalFeatures":263,
    "features":[
    {
        "type":"Feature",
        "id":"nyu_2451_36743.1",
        "geometry":{
               "type":"MultiPolygon",
               "coordinates":[[[
                       [-74.18445299999996,40.69499599999989],
                       [-74.18448899999997,40.69509499999986],
...
}
}

What we need in order to do a heat map is:

{
 "type":"FeatureCollection",
 "totalFeatures":263,
 "features":[
 {
      "type":"Feature",
      "id":"nyu_2451_36743.1",
      "properties":{  
            "name": "Brooklyn",
            "Inter-travels": 453,
            "price-average": 9.5,
            "starting-point-counts": 234,
            "ending-point-counts": 234,
            ...
         },
      "geometry":{
         "type":"MultiPolygon",
         "coordinates":[[[
              [-74.18445299999996,40.69499599999989],
              [-74.18448899999997,40.69509499999986],
...
}
}

As you can see in the second JSON a property key has been added that tells us what is going on in each district. For each attribute of the property section I can draw a heat map(heat map for interval travels, price average,...). I'm trying to see if I can draw any point to point links between districts. In that case I could draw paths for each travel. The CSV file I attached could be imported as a table into our project to match the district numbers too coordinates. I wasn't included in Jonathans issue so I just saw what happened( PostGIS issue #47 ). I'm ok if we are going to use PostGIS. I think you have more experience in that area and from what you're saying I think it is better if we use it. taxi_zones.csv.zip

jonhealy1 commented 4 years ago

I don't think we need to add anything to the GeoJSON file. To get the heatmap to work I just created this: {1: 104, 3: 68, 4: 100, 5: 99, 6: 92, 7: 40, 10: 68, 12: 99, 13: 66 ..... } Where the key is the zone # and the value is the average fare. I then fed it into the map for the heat map and it worked great. I will see if I can get it to work on this branch.

We could add the info to the GeoJSON too if it's easy.

Nice job with leaflet.js! Looks great!

soroushysfi commented 4 years ago

I don't think we need to add anything to the GeoJSON file. To get the heatmap to work I just created this: {1: 104, 3: 68, 4: 100, 5: 99, 6: 92, 7: 40, 10: 68, 12: 99, 13: 66 ..... } Where the key is the zone # and the value is the average fare. I then fed it into the map for the heat map and it worked great. I will see if I can get it to work on this branch.

We could add the info to the GeoJSON too if it's easy.

Nice job with leaflet.js! Looks great!

Thanks! Cool I didn't know we could do that. I'll see if I can make a heat map with a random json.

jonhealy1 commented 4 years ago

https://www.npmjs.com/package/react-leaflet-choropleth

What I did is called choropleth. It's a colormap. A little different than heat map I guess. This library may be useful for react.

soroushysfi commented 4 years ago

https://www.npmjs.com/package/react-leaflet-choropleth

What I did is called choropleth. It's a colormap. A little different than heat map I guess. This library may be useful for react.

I used it and it's looking great! I generated a JSON with random values(this data would be real after we've connected frontend to backend). Thanks for the suggestion. I pushed the changes on this branch.

jonhealy1 commented 4 years ago

Oh yea! Looks awesome.

I added some info when you click on a zone.