Leaflet – Rendering Arrow Paths for Maps Styling

leafletstyle

I made a map in QGIS, and I now want to render it into a web interactive product. I've tried to use Leaflet but I'm not able to reproduce the same pathways.

So far, I managed to produce simple lines as per code below: 

        map.createPane('pane_Onthogenetic_Juveniles_Migration_13');
        map.getPane('pane_Onthogenetic_Juveniles_Migration_13').style.zIndex = 413;
        map.getPane('pane_Onthogenetic_Juveniles_Migration_13').style['mix-blend-mode'] = 'normal';
        var layer_Onthogenetic_Juveniles_Migration_13 = new L.geoJson(json_Onthogenetic_Juveniles_Migration_13, {
            attribution: '',
            interactive: false,
            dataVar: 'json_Onthogenetic_Juveniles_Migration_13',
            layerName: 'layer_Onthogenetic_Juveniles_Migration_13',
            pane: 'pane_Onthogenetic_Juveniles_Migration_13',
            onEachFeature: pop_Onthogenetic_Juveniles_Migration_13,
            // style: style_Onthogenetic_Juveniles_Migration_13_0,
        });
        bounds_group.addLayer(layer_Onthogenetic_Juveniles_Migration_13);

I tried: 

        var polyline = L.polyline(layer_Onthogenetic_Juveniles_Migration_13, {}).addTo(map);
        var arrowHead = L.polylineDecorator(polyline, {
            patterns: [
                {offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 60, polygon: false, pathOptions: {stroke: true}})}
            ]
        }).addTo(map);

And this doesn't work.

Example of what I would like to get in figure below (bot the red arrows and the arrow-shaped pathways).

Pathways example to be reproduced in leaflet

Is there a way to do it?

Best Answer

What is wrong in your code is that your are giving layer object as parameter to polyline creation method L.polyline. It has to be an array of coordinates. You can get those coordinates from each feature of GeoJSON layer.

But to make it work with Leaflet.PolylineDecorator plugin, you don't add GeoJSON layer to map. You just use this layer to iterate through layers (polylines), create individual polylines with L.polyline method and then add decoration with L.polylineDecorator method. Best practice would be to add each polyline to group layer and at last add group layer to map.

So the code could look something like this:

var layer_Onthogenetic_Juveniles_Migration_13 = L.layerGroup({
  attribution: '',
  interactive: false,
  layerName: 'layer_Onthogenetic_Juveniles_Migration_13',
  pane: 'pane_Onthogenetic_Juveniles_Migration_13',
});

function pop_Onthogenetic_Juveniles_Migration_13(feature, layer) {
  var polyline = L.polyline(layer.getLatLngs()).addTo(layer_Onthogenetic_Juveniles_Migration_13);
  var arrowHead = L.polylineDecorator(polyline, {
    patterns: [
      {offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 60, polygon: false, pathOptions: {stroke: true}})}
    ]
  }).addTo(layer_Onthogenetic_Juveniles_Migration_13);
  // your code
}

L.geoJson(json_Onthogenetic_Juveniles_Migration_13, {
  onEachFeature: pop_Onthogenetic_Juveniles_Migration_13
});

layer_Onthogenetic_Juveniles_Migration_13.addTo(map);
Related Question