[GIS] Joining GeoJSON and JSON at client end for Choropleth Map in Leaflet

geojsonjavascriptjsonleaflet

This is not a duplicate of Merging/Joining GeoJSON and JSON? because I need to join on client side.

I want to develop a choropleth map. I am using the same tutorial of Leaflet. I am also using the same statesData provided in that tutorial. The problem is value. I am getting an API which providing me the value of states. The 2nd JSON is providing me the id of states and its corresponding value. I want to visualize the choropleth map using these instead of Density value given in the statesData.js file.

{"id":"01","value":130.36},{"id":"02","value":125.36},{"id":"03","value":525.36}

How can I put this value to obtain a choropleth map instead of using density that showed in the tutorial?

Best Answer

Since GeoJSON is based on JSON, you are simply looking for joining two JSON objects. I think that this question is almost similar with yours and there are alternative solutions(pure js or using jQuery) .

Related Solutions

GeoJSON and JSON Merging – How to Join GeoJSON and JSON

i dont know where you want to merge but you can do it with python as following code.

merged = {
   firstObj : {"parent_area": null, "generation_high": 1, "all_names": {"default": ["OSM Default", "South Georgia"]}, "id": 14455, "codes": {"osm_rel": "1983629"}, "name": "South Georgia", "country": "G", "type_name": "OSM Administrative Boundary Level 3", "generation_low": 1, "country_name": "Global", "type": "O03"},    
   secondObj : { "type": "MultiPolygon", "coordinates": [ [ [ [ -37.652271, -54.065565 ], [ -37.649751, -54.066685 ], [ -37.644852, -54.065705 ], [ -37.644572, -54.064725 ], [ -37.652271, -54.065565 ] ] ], [ [ [ -38.297102, -53.993427 ], [ -38.295513, -53.992544 ], [ -38.294201, -53.992191 ], [ -38.294226, -53.991661 ], [ -38.293848, -53.991661 ] ] ] ] }
};

Code:

import json

merged = { 'firstObj ' : obj1, 'secondObj' : obj2 }
json.dumps(merged)

[GIS] leaflet choropleth map using dynamic value

The literacy function should be like this

function literacy_function(){
    return {color:getColor(feature.properties.literacy_rate),
           other_options: options
    };
}

Best Answer

Related Solutions

GeoJSON and JSON Merging – How to Join GeoJSON and JSON

[GIS] leaflet choropleth map using dynamic value

Related Question