Using a geojson file's co-ordinates to draw Decorator lines? about leaflet.polylinedecorator HOT 4 CLOSED

Hi,

Sorry for the wait. Probably you have found the solution by yourself in the meantime.

In case not, I think it's because your forgot to add the decorators to the map. PolylineDecorator instances are map layers themselves, so they to be explicitely added to the map.
The code snippet you provided actually creates a PolylineDecorator for each layer object, but it is discarded as soon as the function exits, as it is not stored in a variable or added to the map.

If your map object is in a variable named map, it should be something like that:

onEachFeature: function (feature, layer) {
    L.polylineDecorator(layer, {
        patterns: [
            {offset: 25, repeat: 30, symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
        ]
    }).addTo(map);
}

This should work.

Alternative
As a single instance of PolylineDecorator can decorate mulitple polyline objects, you can chose another solution, not relying on eachFeature. Just instantiate the decorator after you loaded the GeoJSON, passing it the array of Polylines built by the GeoJSON Leaflet object (getLayers method).
If all your geometries are LineStrings/Polylines and use the same patterns, it's simpler, and also better performance-wise.

Hope it helped :)

Cheers!

P.S. : tags on GitHub issues are named "labels". You should be able to assign them right next to your message, after you created it.

from leaflet.polylinedecorator.

Thanks for the reply. I got both your options to work, but I think (unless there's a better way) I need to use the one within onEachFeature to filter out all the ways without a relation's 'role' set:

if (feature.properties.relations[0].role) {
  L.polylineDecorator(layer, {
    patterns: [
       {offset: 15, repeat: 30, symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
    ]
    }).addTo(TwoTunnelsCircuitGroup) 
}

This leads on to my next problem. Is there a simple way within decorator to rotate the symbol 180 degrees so that they point in the correct direction for any 'roles' that are set to 'backward'? The only other way I can think of is to reverse the coordinates for those ways.

Cheers
Dave F.

from leaflet.polylinedecorator.

Glad it helped :)
I still think you can use a single PolylineDecorator, while using onEachFeature only for the filtering and selection (for example, putting features with your role attribute in another array, and passing this array to the PolylineDecorator), but maybe your case is more complicated than that.
Anyway, I'll consider your issue fixed.

For your second question, can you please open a separated issue? It will be easier for other people to find it if they have the same question. I'll reply to it quickly.
Thanks a lot!

from leaflet.polylinedecorator.

Hi

I still think you can use a single PolylineDecorator

I shall look into it in more detail.

For your second question, can you please open a separated issue?

Done

from leaflet.polylinedecorator.