Hinzufügen einer ID zum Mapbox-Marker

Question

Ich versuche, jedem Marker einen id hinzuzufügen, so dass ich ein modales Fenster auslösen kann, wenn der Marker mit JQuery anstelle der integrierten Popup-Funktionalität geklickt wird. Ich möchte die id mit der Eigenschaft "ID" bevölkern.

Ich weiß, dass ich rekursiv durchlaufen und die IDs hinzufügen muss, aber ich bin nicht darüber, wie dies zu erreichen. Wie gehe ich dabei vor?

var geojson = [{ 
    "type": "Feature", 
    "geometry": { 
    "coordinates": [-86.781602, 36.162664], 
    "type": "Point" 
    }, 
    "properties": { 
    "id": 001, 
    "title": "POI #1", 
    "image": "http://lorempixel.com/image_output/city-h-c-524-822-2.jpg", 
    "filter-1": true, 
    "filter-2": false, 
    "filter-3": false, 
    "filter-4": true, 
    "filter-5": false, 
    "marker-color": "#1087bf", 
    "marker-size": "medium", 
    "marker-symbol": "" 
    } 
}]; 

JSFiddle

Answer 1

Sie benötigen einen for Schleife zu tun. I've updated your fiddle with the correct code, um durch die Länge Ihrer geojson Variable, ein neues Feld propertiesID genannt hinzufügen, setzt dann das zu properties plus id Feld, so erhalten Sie properties1, properties2 usw.

Die Codeänderung auf Linie gefunden werden kann 90 der Geige

for (var i=0; i<geojson.length; i++){ 
    geojson[i].properties.propertiesID = "properties" + geojson[i].properties.id 

    //Logs out each object's properties in your array 
    console.log(geojson[i].properties) 
} 

Answer 2

nicht Kann eine effiziente Lösung sein, aber hier ist es.

JSFiddle

for (var key in geojson) { 
    if (geojson.hasOwnProperty(key)) { 
    // console.log(key + " -> " + geojson[key]); 
    var poi = geojson[key]; 
    var marker_id = poi.properties.id; 
    var latitude = poi.geometry.latitude; 
    var longitude = poi.geometry.longitude; 
    var filterOne = poi.properties.filterOne; 

    // render marker 
    markers[poi.properties.id] = L.marker([latitude, longitude],{ 
     filterOne: poi.properties.filterOne, 
     filterTwo: poi.properties.filterTwo, 
     filterThree: poi.properties.filterThree, 
     name: poi.properties.name 
    }).addTo(map); 

    //assign id 
    markers[poi.properties.id]._icon.id = poi.properties.id; 
    } 
}