CODEWITHSUNDEEP
jqueryajaxleaflet
codingjoe
codingjoe

Reputation: 800

Using JQuery to load JSON and use in leaflet

I have the following Leaflet code:

<script>
    var lat = '<%=_city.Gps.Latitude.ToString(CultureInfo.InvariantCulture) %>';
    var lon = '<%=_city.Gps.Longitude.ToString(CultureInfo.InvariantCulture) %>';

    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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
    }).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);
    }    
</script>

I would like to make an AJAX call that gives me data in JSON. How can I incorporate JQuery in this leaflet script?

This is what my AJAX call looks like:

$("#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;
});

I need help to mix those two script blocks. Can someone help me with how to mix those scipts?

Upvotes: 1

Views: 4025

Answers (2)

stefcud
stefcud

Reputation: 2315

https://github.com/stefanocudini/leaflet-layerJSON

This plugin does what you need, you can use jquery ajax methods or use its own ajax/jsonp requests without include jquery!

Usage Example:

var l = new L.LayerJSON({url: "Ajax/MyService.svc/GetCityCoordinates?lat1={lat1}&lat2={lat2}&lon1={lon1} lon2={lon2}" });
map.addLayer(l);

Upvotes: 1

codingjoe
codingjoe

Reputation: 800

I suppose I can do this:

$("#mymap").load(function () {
    $.getJSON("Ajax/MyService.svc/GetCityCoordinates", function (response) {
      var d = JSON.parse(response.d);

        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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).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);
        }   
    return false;
});

Upvotes: 0

Related Questions