2

I have a question in order to developing a web app using dynamic maps with JSON files. I'm using Visual Studio 2015 with MVC 5.

At this moment i have developed complete app but I'm unable to draw points (with Lat and Lng) in a Leaflet map from a JSON File.

My JSON file is similar to:

[{
"latitud": 43.526523590087891,
"longitud": -5.6150951385498047
}, {
"latitud": 43.511680603027344,
"longitud": -5.6671133041381836
},
 .
 //More Lat-Lng Points
 .
{
"latitud": 43.526451110839844,
"longitud": -5.6140098571777344
}]

Currently, I'm using a example of heatmap but is imposible for me represent markers when i try to get coordinates from my JSON file.

Any help?

3

You have a JSON but Leaflet really likes geoJSONs, so you should convert the JSON to geoJSON first, or directly load a geoJSON. So for your example, if you have:

var data =[{
"latitud": 43.526523590087891,
"longitud": -5.6150951385498047
}, {
"latitud": 43.511680603027344,
"longitud": -5.6671133041381836
},
 .
 //More Lat-Lng Points
 .
{
"latitud": 43.526451110839844,
"longitud": -5.6140098571777344
}]

You can restructure the JSON to a geoJSON:

var jsonFeatures = [];

data.forEach(function(point){
    var lat = point.latitud;
    var lon = point.longitud;

    var feature = {type: 'Feature',
        properties: point,
        geometry: {
            type: 'Point',
            coordinates: [lon,lat]
        }
    };

    jsonFeatures.push(feature);
});

var geoJson = { type: 'FeatureCollection', features: jsonFeatures };

And last but not least, you can add your new geoJSON to the map:

L.geoJson(geoJson).addTo(map);

A full code example to display your points on a map would look like this:

var map = L.map('map',{
}).setView([43.526523590087891, -5.6150951385498047], 12);

L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    ext: 'png'
}).addTo(map);

var data = [{
"latitud": 43.526523590087891,
"longitud": -5.6150951385498047
}, {
"latitud": 43.511680603027344,
"longitud": -5.6671133041381836
},
{
"latitud": 43.526451110839844,
"longitud": -5.6140098571777344
}]

var jsonFeatures = [];

data.forEach(function(point){
    var lat = point.latitud;
    var lon = point.longitud;

    var feature = {type: 'Feature',
        properties: point,
        geometry: {
            type: 'Point',
            coordinates: [lon,lat]
        }
    };

    jsonFeatures.push(feature);
});

var geoJson = { type: 'FeatureCollection', features: jsonFeatures };

L.geoJson(geoJson).addTo(map);

Hope this solves your problem! Cheers

2

As an alternative to @Joran's approach, you can skip GeoJSON completely and just iterate through the points, creating instances of L.LatLng and L.Marker as you go, like:

var points = [{
        "latitud": 43.526523590087891,
        "longitud": -5.6150951385498047
    }, {
        "latitud": 43.511680603027344,
        "longitud": -5.6671133041381836
    },
    // 
    // More Lat-Lng Points
    // 
    {
        "latitud": 43.526451110839844,
        "longitud": -5.6140098571777344
    }];

for (var i in points) {
    var latlng = L.latLng({ lat: points[i].latitud, lng: points[i].longitud });

    L.marker( latlng ).addTo(map);
}

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.