title: Leaflet - get data from static file and API call to build a choropleth map
body: <p>I got 2 data sources with JSON data.
  One is a static file and contains country borders like this:</p>
  
  <p><strong>Static file</strong></p>
  
  <pre><code>var worldboundaries = {"type":"FeatureCollection","features":
  
  [{"type":"Feature","id":"ALB","properties":{"name":"Albania"},"geometry":{"type":"Polygon","coordinates":[[[20.590247,41.855404],[20.463175,41.515089],[20.605182,41.086226],[21.02004,40.842727],[20.99999,40.580004],[20.674997,40.435],[20.615,40.110007],[20.150016,39.624998],[19.98,39.694993],[19.960002,39.915006],[19.406082,40.250773],[19.319059,40.72723],[19.40355,41.409566],[19.540027,41.719986],[19.371769,41.877548],[19.304486,42.195745],[19.738051,42.688247],[19.801613,42.500093],[20.0707,42.58863],[20.283755,42.32026],[20.52295,42.21787],[20.590247,41.855404]]]}},
  
  {"type":"Feature","id":"ARE","properties":{"name":"United Arab Emirates"},"geometry":{"type":"Polygon","coordinates":[[[51.579519,24.245497],[51.757441,24.294073],[51.794389,24.019826],[52.577081,24.177439],[53.404007,24.151317],[54.008001,24.121758],[54.693024,24.797892],[55.439025,25.439145],[56.070821,26.055464],[56.261042,25.714606],[56.396847,24.924732],[55.886233,24.920831],[55.804119,24.269604],[55.981214,24.130543],[55.528632,23.933604],[55.525841,23.524869],[55.234489,23.110993],[55.208341,22.70833],[55.006803,22.496948],[52.000733,23.001154],[51.617708,24.014219],[51.579519,24.245497]]]}},
  
  ....
  </code></pre>
  
  <p>and one contains the density information for fillColor which should be used for this country, where "count" is the value I need. This a kimonolabs api and called with an $AJAX request:</p>
  
  <p><strong>API answer</strong></p>
  
  <pre><code>{"name":"myapi","count":51,"frequency":"Daily","version":109,"newdata":true,"lastrunstatus":"success","thisversionstatus":"success","nextrun":"Fri Sep 25 2015 11:29:40 GMT+0000 (UTC)","thisversionrun":"Thu Sep 24 2015 11:29:40 GMT+0000 (UTC)",
  
  "results":
  
  {"myapi":[{"name":{"href":"http://www.somelink.com","text":"Albania"},"count":"1","index":1,"url":"http://www.somelink.com"},
  
  {"name":{"http://www.somelink.com","text":"United Arab Emirates"},"count":"30","index":2,"url":"http://www.somelink.com"},
  
  ...
  </code></pre>
  
  <p>For the map I'm following this guide: <a href="http://leafletjs.com/examples/choropleth.html" rel="nofollow">tutorial</a></p>
  
  <p><strong>JS file including API call</strong></p>
  
  <pre><code>//Building the map
  var map = L.map('map').setView([37.8, -96], 4);
  
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
      id: 'mapbox.light',
      attribution: ...
  }).addTo(map);
  
  //Color function
  function getColor(d) {
      return d &gt; 1000 ? '#800026' :
             d &gt; 500  ? '#BD0026' :
             d &gt; 200  ? '#E31A1C' :
             d &gt; 100  ? '#FC4E2A' :
             d &gt; 50   ? '#FD8D3C' :
             d &gt; 20   ? '#FEB24C' :
             d &gt; 10   ? '#FED976' :
                        '#FFEDA0';
  }
  
  //Style function
  function style(feature) {
      return {
          fillColor: getColor(feature.properties.density),
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '3',
          fillOpacity: 0.7
      };
  }
  
  //Load static file
  L.geoJson(worldBoundaries, {style: style}).addTo(map);
  
  //AJAX call to API
  $.ajax({
      "url":"https://www.kimonolabs.com/api/myapi,
      "crossDomain": true,
      "dataType": "jsonp",
      //Make a call to the Kimono API following the "url" 
  
      'success': function(response){ 
      //Do some stuff, place some markers
  
       var collection = response.results.myapi;
       //collection.count is what I need from here
  
       ......
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Added a plunker for this: <a href="http://plnkr.co/edit/98OiwqYBr7pP478tJAtl?p=preview" rel="nofollow">http://plnkr.co/edit/98OiwqYBr7pP478tJAtl?p=preview</a></p>
  
  <p><code>getColor(feature.properties.density)</code> is essentially my problem. Leaflet draws the country border layer correctly but the "density" information comes from an ajax api call and is not included in the wordlboundaries array. <em>How can I tell it to look at the api results and using the "count" value for the correct country to color the map appropriately?</em> How can I access the variables from the ajax call later in another function/do I have to put every function from this into the ajax call?
  Country Border file contains all countries of the world where the api request does not contain all countries.
  Thanks for ideas!</p>