Search code examples
javascriptleafletgisopenstreetmap

Is there a better way to look up attributes in an array of arrays?


I have a function with a switch statement that looks for a single case and if it doesn't find it, runs default which is another switch statement. It is basically doing a lookup through my entire array. Im sure there is a better way to do this I am just new to javascript and don't know. Here is a snippet:

for(var i=0; i < parks.length; i++) {
    switch (parks[i][6]) {            
        case 'wc' : 
            wc.push(L.marker([parks[i][1], parks[i][2]], {icon: parks[i][4]}).bindpopup("<a href='" + parks[i][3] + "'>" + parks[i][0] + "</a>"));
            break;        
        default :
            switch (parks[i][7]) {            
         case 'grill' : 
            grill.push(L.marker([parks[i][1], parks[i][2]], {icon: parks[i][4]}).bindpopup("<a href='" + parks[i][3] + "'>" + parks[i][0] + "</a>"));
            break;        
         default :
            break;
            break;
    }
}

An example of my parks array because everyone is asking:

var parks = [
['Spårvagnsparken',59.3298868,18.0031605,'http://leksplay.com/sparvagnsparken', greenIcon, wc, grill, null, null, fence, null, null, null, null],
['Fredhällsparkens plaskdamm',  59.3320485,18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', greenIcon, wc, null, null, null, null, null, null, water, null],
['Uggleparken',     59.3343715,18.0040208,'http://leksply.com/uggleparken', greenIcon, wc, null, null, null, null, pfence, null, null, null],
['Observatorielundens Parklek', 59.3413877,18.056007, 'http://leksplay.com/observatorielundensparklek', greenIcon, wc, null, null, null, null, pfence, null, null, toddler],

Solution

  • Given your provided array, I would

    • It's bindPopup, not bindpopup
    • construct amarkers as Object {}
    • Retrieve all (not NULL) POI's "props" (like "toddler", "wc" etc)
    • Iterate the retrieved props pushing a newMarker() into the markers Object.
    const markers = {};
    const newMarker = poi => L.marker([poi.lat, poi.lng], {icon: poi.icon})
                           .bindPopup(`<a href="${poi.url}">${poi.name}</a>`);
    
    const parks = [
      ['Spårvagnsparken', 59.3298868, 18.0031605, 'http://leksplay.com/sparvagnsparken', "greenIcon", "wc", "grill", null, null, "pfence", null, null, null, null],
      ['Fredhällsparkens plaskdamm', 59.3320485, 18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', "greenIcon", "wc", null, null, null, null, null, null, "water", null],
      ['Uggleparken', 59.3343715, 18.0040208, 'http://leksply.com/uggleparken', "greenIcon", "wc", null, null, null, null, "pfence", null, null, null],
      ['Observatorielundens Parklek', 59.3413877, 18.056007, 'http://leksplay.com/observatorielundensparklek', "greenIcon", "wc", null, null, null, null, "pfence", null, null, "toddler"],
    ];
    
    parks.forEach(([name, lat, lng, url, icon, ...props]) => {
      props.filter(Boolean).forEach(prop => {
         if (!(prop in markers)) markers[prop] = []; // Prepare if not exists
         markers[prop].push(newMarker({name, lat, lng, url, icon}));
      });
    })
    
    console.log(markers);
    

    Example (with objects only, for demo):

    const markers = {};
    const newMarker = poi => poi;
    
    const parks = [
      ['Spårvagnsparken', 59.3298868, 18.0031605, 'http://leksplay.com/sparvagnsparken', "greenIcon", "wc", "grill", null, null, "pfence", null, null, null, null],
      ['Fredhällsparkens plaskdamm', 59.3320485, 18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', "greenIcon", "wc", null, null, null, null, null, null, "water", null],
      ['Uggleparken', 59.3343715, 18.0040208, 'http://leksply.com/uggleparken', "greenIcon", "wc", null, null, null, null, "pfence", null, null, null],
      ['Observatorielundens Parklek', 59.3413877, 18.056007, 'http://leksplay.com/observatorielundensparklek', "greenIcon", "wc", null, null, null, null, "pfence", null, null, "toddler"],
    ];
    
    parks.forEach(([name, lat, lng, url, icon, ...props]) => {
      props.filter(Boolean).forEach(prop => {
         if (!(prop in markers)) markers[prop] = []; // Prepare if not exists
         markers[prop].push(newMarker({name, lat, lng, url, icon}));
      });
    })
    
    console.log(markers);