3

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>
2

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.

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.