1

I have been using the Plugin Glify for Leaflet. It offers a really great and simple way to use web gl to render maps on Leaflet JS. The problem I'm facing is there are custom options for 'vertexShaderSource' and 'fragmentShaderSource', which require complicated shader code. In the long run it's probably fair I learn to write shaders in javascript, C etc., but in the short run this is something I'm very inexperienced in. Is there a way to draw an outline or border to every polygon drawn? I know this has been done in a 3D context and some other languages, however relating that specifically in this context is seeming more difficult.

The relevant code is fairly basic.

L.glify.shapes({
    map: map,
    data: geojson,
    color: function(index, point) { 
        //Some code to choose colours 
    },
    opacity: 0.8
});

The output is this, which is coloured polygons features, as a layer onto a map.

coloured polygons

In short, my aim is to render borders around these polygons using some sort of shader.

0

With a bit of 'cheating' and help of Turf.js library solution is quite simple. Cheating here means that besides original L.glify.shapes we add aditional L.glify.lines layer where we use the same GeoJSON data as for shapes, but converting them from polygons to lines before passing them to L.glify.lines.

So code could look something like this:

function polygonsToLines(geojson) {
  var lines = [];
  geojson.features.forEach(function(feature) {
    lines.push(turf.polygonToLine(feature));
  });
  return turf.featureCollection(lines);
}

L.glify.shapes({
  map: map,
  data: geojson,
  color: function(index, point) { 
      //Some code to choose colours 
  },
  opacity: 0.8
});

L.glify.lines({
  map: map,
  latitudeKey: 1,
  longitudeKey: 0,
  data: polygonsToLines(geojson),
  color: function(index, point) { 
      //Some code to choose colours 
  },
  opacity: 1.0
});
  • Thanks for getting back. Sadly this didn't work. If you run l.glify.lines it shows nothing on the map, and if you run the polygons to line function under l.glify.shapes, it shows randomly selected polygons around the map filled in, with no apparent connection. Any idea why this might be? – Jacob Weinbren Oct 5 at 17:21
  • Update: running this L.geoJSON(lines).addTo(map); works, meaning the lines are valid! But since it doesn't make use of web gl it defeats the purpose of using this, and runs at around 2-3fps. Issue is likely with glify, can you help? – Jacob Weinbren Oct 5 at 17:26
  • I tested this solution on plugin demo example, and it works. You can see it on the following JSFiddle jsfiddle.net/TomazicM/dfhvqjmg/1. This fiddle somehow works only on Firefox. When I run code from my server, it works in all browsers. I suspect it must be something with your GeoJSON that it does now work for you. Dou you get any errors in the console? – TomazicM Oct 5 at 18:08
  • Adding latitudeKey: 1, longitudeKey: 0 made it work for some reason. Thank you very much! – Jacob Weinbren Oct 5 at 18:14
  • Good! I'll add those two options to my answer. It looks like those options are needed for GeoJSON lines. – TomazicM Oct 5 at 18:35

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.