[GIS] Rotate Point Markers GeoJSON Leaflet

geojsonmarkerspoint

I've created a Leaflet map displaying a point layer as GeoJSON. I used a custom icon (an arrow). I would like to rotate this icon on the basis of an attribute included in the GeoJSON file (field "dir"). How should I do?

JSscript code:

var map = L.map('map',{
    center: [5,28],
    zoom: 5,
    minZoom: 2,
    maxZoom: 18
});

L.tileLayer('http:...',{attribution: ...);

var icon = new L.Icon({
    iconUrl:"assets/icon/arrow.svg",
    iconSize: [30],
    });

function funzione (feature, layer) {
    layer.bindPopup("Information <br>" + feature.properties.name);
    layer.setIcon(icon);
};

L.geoJSON(data,{
    onEachFeature: funzione
}).addTo(map);

GeoJson file:

var data = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },                                                                        "features": [
{ "type": "Feature", "properties": { "time": 155011, "lat": -22.978704, "lon": -43.129650, "name": "harbour", "dir": 180} } 
]};

Best Answer

From @Alessandro's comment I looked at the issue with the plugin but it seems to work fine for me. In your case you want to apply this using the following code after renaming icon var to newIcon:

L.geoJSON(data, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: newIcon, rotationAngle: feature.properties.dir})
    }
}).addTo(map);
Related Question