[GIS] Leaflet/GeoJSON – Changing the default blue marker to other .png files

geojsonhtmlleafletweb-mapping

How can I use different .png files to symbolize my GeoJSON data?
I have one property in my GeoJSON file that I would like to symbolize the data by (feature.properties.issue). For each different issue type, I would like to display a different .png file as a clickable marker.

Here is what I have so far. I'm very new to Leaflet/HTML/GeoJSON.
I can get each default marker to have a click-able popup that reads the GeoJSON properties ([Imgur pic of output here][1]), but I do not know how to change the symbology from the default blue marker.
You can see that I have two other .png files in the directory called "warningicon" and "testicon.png", but I'm unsure of where to put it in my code, or how to use a conditional statement in this instance to differentiate based on issue type.

var warningicon = {
    iconUrl: 'warningicon.png',
    iconsize: [32,32],
};

var testicon = {
    iconUrl: 'testicon.png',
    iconsize: [32,32],
};

$.getJSON("./geojson/sidewalks.geojson", function(data) {
    var geojson = L.geoJson(data, {
        onEachFeature: action_To_Perform_When_Marker_Is_Clicked_On_The_Map
    });
    geojson.addTo(map);
    myGeoJSONLayers.addLayer(geojson);
});

var overlayMaps = {"Sidewalk Issues": myGeoJSONLayers};

L.control.layers(baseMaps, overlayMaps,myGeoJSONLayers).addTo(map);

function action_To_Perform_When_Marker_Is_Clicked_On_The_Map(feature, layer) {
    if (feature.properties) {
        var PopupText = []; 
        PopupText.push("Accessibility Issue: " + feature.properties.Issue);
        PopupText.push("\nDescription: " + feature.properties.Description);
        PopupText.push("\nRecorded: " + feature.properties.CreationDate);
        layer.bindPopup("\n" + PopupText.join("") + "\n");
    } 
}

Best Answer

According to the official tutorial (http://leafletjs.com/examples/geojson.html and http://leafletjs.com/reference.html#icon), you can define your icons before your L.geojson call and set them in your L.geojson function.

 var smallIcon = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'my-icon.png'
 });

 L.geoJson(someGeojsonFeature, {
      pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: smallIcon});
      }
 }).addTo(map);

You can define multiple icons and play with your feature.properties to set each icon on your data.

Related Question