4

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} } 
]};
2
  • 1
    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. Jun 27, 2017 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? Jun 28, 2017 at 16:19

1 Answer 1

3

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 and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.