0

I have data from a CSV that I want to turn into markers using the latest version of LeafletJS. I can successfully turn the CSV into an array of js objects and have confirmed that the latlng information is correct and being properly created. However, the markers do not place on the map.

// create map object
var mymap = L.map('mapid');

// fetch tiles from Mapbox API
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: [removed for privacy]
}).addTo(mymap);

// set view on page load
$(document).ready(function() {
    // [40.47, -79.98]: LatLng for Allegheny County
    // 12: zoom parameter
    mymap.setView([40.47, -79.98], 12)

    $.get('../data/output.csv',function(data) {
        var results = $.csv.toObjects(data);
        console.log("printing")
        console.log(results);
        results.forEach(result => {
            var latlng = L.latLng(parseFloat(result.Latitude),parseFloat(result.Longitude));
            var marker1 = L.marker(latlng).addTo(mymap);
        });
     });
});

Does anyone know why the markers aren't being created?

  • 1
    Can you add a few lines of .csv file to your question? – TomazicM Mar 25 at 7:08
0

The csv sample would be very helpful. IMO your problem is in passing latlong values.

Docs says that coordinates shout be passed in Array.

I'm not sure what L.latLng passes, try console.log it and if it's array, so I'm wrong and curious what's the problem.

You could also try put it some sandbox like eg.: https://jsfiddle.net/

|improve this answer|||||
  • Coordinates can be passed to L.latLng also as two parameters: lat and lng (and optional third parameter alt), see leafletjs.com/reference-1.6.0.html#latlng, so this is not really an answer, but just partially wrong guessing. – TomazicM Mar 25 at 20:03

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.