Add Markers from Object Array

Question

Pardon me if this question is silly. I've got an array in an object that I need to add to a map. I know it needs a for loop (likely in the object) to access the additional properties in the array. Only the last indexed value is shown on the map when I execute the code. Thanks in advance for your help.

           var map = L.map('map', {
          center: [29.940125, -90.08346],
          zoom: 13
        });

        // Get basemap URL from Leaflet Providers
        var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'

        // Get basemap attributes from Leaflet Providers
        var basemap_attributes = {
          maxZoom: 18,
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        };
        // requests some map tiles
        var tiles = L.tileLayer(basemap_url, basemap_attributes);

        map.addLayer(tiles);



        var i = 0


        // declare hotspots object
        var hotspots = [{
          name: "Mariza",
          properties: {
            description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
            coordinates: [29.9629337, -90.0501008],
            url: 'http://marizaneworleans.com/',
            phone: '(504) 598-5700',
            icon: 'svgs/restaurant-15.svg'
          },

          name: "Tipitina's",
          properties: {
            description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
            coordinates: [29.917284, -90.042986],
            url: 'https://www.tipitinas.com//',
            phone: '(504) 895-8477',
            icon: 'svgs/music-15.svg'
          },

          name: "Euclid Records New Orleans",
          properties: {
            description: "We’re 4000 square feet of boss vinyl both new and used.",
            coordinates: [29.962066, -90.042970],
            url: 'https://euclidnola.com/',
            phone: '(504) 947-4348',
            icon: 'svgs/music-11.svg'
          }

        }];
        // declare variable for accessing object properties
        var props = hotspots[i].properties;
        var icon = L.icon({
          iconUrl: props.icon,
          iconSize: [40, 40],
          popupAnchor: [0, -22],
          className: "icon"
        });

        var popup = `<h3>${hotspots[i].name}</h3>
                  <p>${props.description}</p>
                  <p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
                  <p><b>phone</b>: ${props.phone}</p>`
        var marker = L.marker(hotspots[i].properties.coordinates, {
          icon: icon
        })
          .addTo(map)
          .bindPopup(popup);

        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });

Answer 1

You need a for loop in order to iterate over all the hotspots and add them to the map:

var map = L.map('map', {
    center: [29.940125, -90.08346],
    zoom: 13
});

// Get basemap URL from Leaflet Providers
var basemap_url = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'

// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
};
// requests some map tiles
var tiles = L.tileLayer(basemap_url, basemap_attributes);

map.addLayer(tiles);

// declare hotspots object
var hotspots = [{
    name: "Mariza",
    properties: {
        description: "Italian-inspired fare dished out in an airy loft building with an industrial-chic vibe.",
        coordinates: [29.9629337, -90.0501008],
        url: 'http://marizaneworleans.com/',
        phone: '(504) 598-5700',
        icon: 'svgs/restaurant-15.svg'
    },

    name: "Tipitina's",
    properties: {
        description: "Founded as a clubhouse for Professor Longhair, Tip's has played host to NOLA music legends since opening its doors in 1977.",
        coordinates: [29.917284, -90.042986],
        url: 'https://www.tipitinas.com//',
        phone: '(504) 895-8477',
        icon: 'svgs/music-15.svg'
    },

    name: "Euclid Records New Orleans",
    properties: {
        description: "We’re 4000 square feet of boss vinyl both new and used.",
        coordinates: [29.962066, -90.042970],
        url: 'https://euclidnola.com/',
        phone: '(504) 947-4348',
        icon: 'svgs/music-11.svg'
    }

}];


//// LOOP GOES HERE: ////

for ( let i = 0; i < hotspots.length; i++ ){


    // declare variable for accessing object properties
    let props = hotspots[i].properties;
    let icon = L.icon({
        iconUrl: props.icon,
        iconSize: [40, 40],
        popupAnchor: [0, -22],
        className: "icon"
    });

    let popup = `<h3>${hotspots[i].name}</h3>
                <p>${props.description}</p>
                <p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
                <p><b>phone</b>: ${props.phone}</p>`
    let marker = L.marker(hotspots[i].properties.coordinates, {
            icon: icon
        })
        .addTo(map)
        .bindPopup(popup);

    marker.on("mouseover", function() {
        this.openPopup();
    });
    marker.on("mouseout", function() {
        this.closePopup();
    });

}

Answer 2

There isn't a loop anywhere, so i is always going to be 0

Put it in a for-loop?

for(var i = 0; i < hotspots.length; i++) {
var props = hotspots[i].properties;
        var icon = L.icon({
          iconUrl: props.icon,
          iconSize: [40, 40],
          popupAnchor: [0, -22],
          className: "icon"
        });
        var popup = `<h3>${hotspots[i].name}</h3>
                  <p>${props.description}</p>
                  <p><b>website</b>: <a href='${props.url}'>${props.url}</a></p>
                  <p><b>phone</b>: ${props.phone}</p>`
        var marker = L.marker(hotspots[i].properties.coordinates, {
          icon: icon
        })
          .addTo(map)
          .bindPopup(popup);
}