2

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} } 
]};
  • Check out: github.com/bbecquet/Leaflet.RotatedMarker/blob/master/… it seems you can just add a style to rotate the icon based on given angle value. – Diffusion_net Jun 27 '17 at 17:23
  • Dear @Diffusion_net thank you for the answer. I have download the plugin and I have mad the link in the html page: <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? – alessandro D. Jun 28 '17 at 16:19
2

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);

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.