[GIS] How to make custom icon in leaflet depending on attribute and after filter

geojsonjsonleafletweb-gis

I'm writting a leaflet webpage with inspiration from this:

http://labs.easyblog.it/maps/leaflet-panel-layers/examples/custom-item.html

I have my data from Geoserver (geojson) and it getting the points with the filter i have added. But what do I miss for being able to have custom icon depending on a attribute?

I think I should add something to this piece of code: 

                {
            name: "UNKNOWN",
            background: '../images/icons/UNKNOWN.png',
            layer: L.geoJson(data, {
            filter: function(feature, layer) {
            return feature.properties.type == "UNKNOWN";
        }
    })
        },

How should I add custom icons here?
Right now it only works with the layer without filter. The layers with filter shows up, but with "empty" icon. + this error: 

/C:leaflet/dist/images/marker-icon-2x.png:1 GET file:///C:/leaflet/dist/images/marker-icon-2x.png net::ERR_FILE_NOT_FOUND

Entire code: 

<!DOCTYPE html> 

<head> 
<title>Leaflet Panel Layers</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="../../leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../src/leaflet-panel-layers.css" />
<link rel="stylesheet" href="icons.css" />
<link rel="stylesheet" href="../style.css" />

<script src="../../jquery_3.1.1/jquery-3.1.1.min.js""></script>
</head>

<body>
<div id="map" style="width: 600px; height: 400px;"></div>

<script src="../../leaflet/dist/leaflet.js"></script>
<script src="../src/leaflet-panel-layers.js"></script>
<!-- GEOJSON DATA -->
<script src="data/parking.js"></script>
<script>
    var osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
        map = L.map('map', {
            zoom: 11,
            attributionControl: false,
            center: L.latLng([50.370, -4.14]),
            layers: osmLayer
        });


    function featureToMarker(feature, latlng) {
        return L.marker(latlng, {
            icon: L.divIcon({
                className: 'marker-'+feature.properties.amenity,
                iconUrl: '../images/markers/'+feature.properties.amenity+'.png',
                iconSize: [25, 41], iconAnchor: [12, 41],
                popupAnchor: [1, -34], shadowSize: [41, 41]
            })
        });
    }

    var rootUrl = 'http://localhost:8080/geoserver/maps/ows';
    var defaultParameters = {
    service : 'WFS',
    version : '2.0',
    request : 'GetFeature',
    typeName : 'maps:test',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
var URL = rootUrl + L.Util.getParamString(parameters);
var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success: function(data) {

    map.addControl( new L.Control.PanelLayers(
        //baselayers
        [
        ],
        //overlays
        [
            {
                name: "map",
                background: '../images/icons/bar.png',
                layer: L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.type == "map";
            }
        })
            },


            {
                name: "UNKNOWN",
                background: '../images/icons/UNKNOWN.png',
                layer: L.geoJson(data, {
                filter: function(feature, layer) {
                return feature.properties.type == "UNKNOWN";
            }
        })
            },



            {
                name: "Parking",
                background: '../images/icons/parking.png',
                layer: L.geoJson(Parking, {pointToLayer: featureToMarker })
            }
        ], 





        //options
        {
            buildItem: function(item) {

                var points = item.layer.getLayers ? item.layer.getLayers().length : 0,
                    label = points ? ' #'+points : '',
                    size = Math.min(18,Math.max(9,points))+'px',
                    node = L.DomUtil.create('span','');

                node.innerHTML = label;

                if(points)
                    node.style.fontSize = size;

                if(item.background) {
                    node.style.background = "url('"+item.background+"') center left no-repeat";
                    node.style.paddingLeft = '24px';
                }

                return node;
            }
        }
    ) );
}
});
</script> 

</body>

</html>

Best Answer

You can't use an image for a Leaflet div icon. The Leaflet documentation states:

(DivIcon) represents a lightweight icon for markers that uses a simple div element instead of an image.

Try using the regular L.icon and take a look at the custom icon example in the Leaflet website.

Related Question