2

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?

  • Can you link an example complete JSON response from the API? – 15Step Mar 27 '18 at 11:08
1
+50

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) .

  • GeoJSON is based on JSON but in GeoJSON feature collection that is a special format that can easily be read by different GIS libraries mainly Leaflet. I was stuck there. One is simply a JSON format and another is GeoJSON feature collection. – Devils Dream Mar 28 '18 at 16:21
  • 1
    I think that looping over features of feature collection similar to the one of the answers at the link will solve the problem. I'll try to implement working code when I have access to a computer. – senol ozgur Mar 28 '18 at 16:48
  • Here is a working example: jsfiddle.net/L9tamn7a/22 – senol ozgur Mar 29 '18 at 8:51
0

Since there are not that many values the simplest solution would be to create lookup array for JSON data:

var array = [{"id":"01","value":130.36},{"id":"02","value":125.36},{"id":"03","value":525.36}];
var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

Now you can get value for some lookup_id where you need it by simple object reference:

desired_value = lookup[lookup_id].value;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.