Leaflet markers based on database attributes

Question

I'm new to Leaflet and I want to work with attribute based marker icons. I followed a couple of tutorials and can display markers on my screen using geometry data from a PostGIS database.

var mapDataLayer = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: "#F00",
            color: "#FFF",
            fillOpacity: 0.5,
            opacity: 0.8,
            weight: 1,
            radius: 8
        };

        return L.circleMarker(latlng, markerStyle);
    },
    onEachFeature: function (feature, layer) {
        var html = "";
        for (prop in feature.properties){
            html += prop+": "+feature.properties[prop]+"<br>";
        };
        layer.bindPopup(html);
    }
}).addTo(map);

Using this, I get a couple of points with the same color. Now I want to split up these points using different colors/icons for different attributes.

Answer 1

I've taken a look at feature.properties[prop]

I created a function to give the attributes "status" one out of five colors:

function getColor(status) {
return  status == "proposed"     ? '#800888' :
        status == "permitted"    ? '#969696' :
        status == "operational"  ? '#081d58' :
        status == "development"  ? '#006837' :
        status == "denied"       ? '#fed976' :
                                   '#252525';
}

Then i edited the code above a bit to include the getColor function.

    var mapDataLayer = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.status),
            color: "#FFF",
            fillOpacity: 0.5,
            opacity: 0.8,
            weight: 1,
            radius: 8
        };

        return L.circleMarker(latlng, markerStyle);
    },
    onEachFeature: function (feature, layer) {
        var html = "";
        for (prop in feature.properties){
            html += prop+": "+feature.properties[prop]+"<br>";
        };
        layer.bindPopup(html);
    }
}).addTo(map);

Answer 2

You would probably simply need to follow an extra tutorial for custom markers: Markers With Custom Icons

In this tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.