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} }
]};
<script src=" .. leaflet.rotatedMarker.js"></script>
Then I have change the JS code as follow trying to set a fix angle of rotation (45°).var data = L.geoJSON(data,{ rotationAngle: 45, onEachFeature: funzione }).addTo(map);
Unfortunately it doesn't work. Do you have any further idea?