1

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?

0

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);
  • Hi TomazicM, thanks for that. When I run your code I get an error: "L.groupLayer is not a function". Any idea why? Thanks again! – Piera Oct 4 at 18:08
  • Sorry, it looks like I had too much or not enough coffe. It should be L.layerGroup of course. Corrected. – TomazicM Oct 4 at 18:41
  • Oh yes! :) It works now! Thanks again! – Piera Oct 4 at 20:32
  • If it helped you to solve your problem, it would be appropriate to accept the answer. – TomazicM Oct 5 at 7:31

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.