title: Using JQuery to load JSON and use in leaflet
body: <p>I have the following Leaflet code:</p>
  
  <pre><code>&lt;script&gt;
      var lat = '&lt;%=_city.Gps.Latitude.ToString(CultureInfo.InvariantCulture) %&gt;';
      var lon = '&lt;%=_city.Gps.Longitude.ToString(CultureInfo.InvariantCulture) %&gt;';
  
      var map = L.map('map').setView([lat, lon], 8);
      L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;'
      }).addTo(map);
  
      L.circle([lat, lon], 15000, {
          color: 'orange',
          fillColor: '#f03',
          fillOpacity: 0.5
      }).addTo(map).bindPopup("XXXX.");
  
      var popup = L.popup();
  
      function onMapClick(e) {
          popup
              .setLatLng(e.latlng)
              .setContent("You clicked the map at " + e.latlng.toString())
              .openOn(map);
      }    
  &lt;/script&gt;
  </code></pre>
  
  <p>I would like to make an AJAX call that gives me data in JSON. How can I incorporate JQuery in this leaflet script?</p>
  
  <p>This is what my AJAX call looks like:</p>
  
  <pre><code>$("#mymap").load(function () {
      $.getJSON("Ajax/MyService.svc/GetCityCoordinates", function (response) {
          var d = JSON.parse(response.d);
          // Use leaflet code to mark the cities....
      return false;
  });
  </code></pre>
  
  <p>I need help to mix those two script blocks. Can someone help me with how to mix those scipts?</p>