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

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");

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});

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.