How to add more markers on leaflet map

Question

I want to add an array of addresses and transform them into coordinates and create markers for each of them and add them to the map, try iterative cycles but it does not work, could you help me? here the code:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a', 'b', 'c']
}).addTo(map);

var planes = [
    ["Prolongación de Xicoténcatl, 68120 Oaxaca de Juárez, MX"],
    ["Av Belisario Domínguez 428, 68050 Oaxaca de Juárez, MX"],
    ["C820B6"]
];
for (var i = 0; i < planes.length; i++) {

    planes[i]=provider.search({
        query: planes[i]
    });
}

for (i = 0; i < value.length; i++) {
    query.then(value => {
        for (i = 0; i < value.length; i++) {
            // Success!
            var x_coor = value[i].x;
            var y_coor = value[i].y;
            var label = value[i].label;
            var marker = L.marker([y_coor, x_coor]).addTo(map).on('click', markerOnClick); 
            marker.bindPopup("<b>Found location</b><br>" + label).openPopup(); // note the "openPopup()" method. It only works on the marker
        };
    }, reason => {
        console.log(reason); // Error!
    });
}

And this script works with one marker:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a', 'b', 'c']
}).addTo(map);

var query_addr = "Prolongación de Xicoténcatl 1031, 68120 , MX";

const provider = new window.GeoSearch.OpenStreetMapProvider();
var query_promise = provider.search({
    query: query_addr
});


query_promise.then(value => {
    for (i = 0; i < value.length; i++) {
        // Success!
        var x_coor = value[i].x;
        var y_coor = value[i].y;
        var label = value[i].label;
        var marker = L.marker([y_coor, x_coor]).addTo(map) 
        marker.bindPopup("<b>Found location</b><br>" + label).openPopup();     };
    }, reason => {
        console.log(reason); 
    }
);

I'm new in JS and Laravel, I am new in programming and I really like to learn. Please if you could support me I will be very grateful, I find it interesting jaavscript

I think this is just an issue of reusing the variable name `i` within the nested loop; use `i` and then `j` instead. See e.g. https://stackoverflow.com/questions/36413159/understanding-nested-for-loops-in-javascript — IvanSanchez, Jun 06 '19 at 07:14
Even before the story with i and j, where do value and query variables come from? — ghybs, Jun 06 '19 at 09:47

score 0 · Answer 1 · answered Oct 26 '20 at 01:58

In case you couldn't find a solution yet, I was having the same issue as you. Just change the const provider to var provider.

So it would result in something like this:

var map = L.map('map').setView([17.0812861,-96.805772], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a', 'b', 'c']
}).addTo(map);

var query_addr = "Prolongación de Xicoténcatl 1031, 68120 , MX";

var provider = new window.GeoSearch.OpenStreetMapProvider();
var query_promise = provider.search({
    query: query_addr
});


query_promise.then(value => {
    for (i = 0; i < value.length; i++) {
        // Success!
        var x_coor = value[i].x;
        var y_coor = value[i].y;
        var label = value[i].label;
        var marker = L.marker([y_coor, x_coor]).addTo(map) 
        marker.bindPopup("<b>Found location</b><br>" + label).openPopup();     };
    }, reason => {
        console.log(reason); 
    }
);

How to add more markers on leaflet map

1 Answers1