3 ms·

I’ve used Leaflet a ton and love it. But I recently tried using it with a vector-based render method (as opposed to the rastered tiles Leaflet uses by default)

I’ve used Leaflet a ton and love it. But I recently tried using it with a vector-based render method (as opposed to the rastered tiles Leaflet uses by default) and couldn’t find anything that worked anywhere near as easily and simply as Leaflet’s standard rendering. I don’t blame the Leaflet folks for this really, rendering map data locally via WebGL is not a simple task. But it’s been depressing to see folks like MapBox close off their vector-based library (and Google’s isn’t open either). There’s an open source of Mapbox’s library but it still feels like the open source world is being left out in the cold compared to how things were just a few years ago.

bebop 5y ago
Have you looked into OpenLayers? Maybe this is something that could be useful: https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html https://openlayers.org/en/latest/apidoc/module-ol_layer_Vect...
barnabask 5y ago
I bet you are going to be so happy to hear about https://maplibre.org https://maplibre.org then.
bdon 5y ago
Which vector-based rendering did you use? I'm working on a new attempt at that here, though not WebGL-based: http://github.com/protomaps/protomaps.js http://github.com/protomaps/protomaps.js so it would be valuable to know if it can get closer to what you wanted to accomplish.
NelsonMinar 5y ago
Yeah Leaflet never really made the jump to vector tiles. There are various ways to add vector drawing to it but as you've noted none of them are quite easy or simple enough. MapLibre.org gives me hope. It's a fork of the MapBox GL JS code that intends to be fully open source and independent. Another option for open source vector mapping was Mapzen's Tangram. Mapzen shut down, what, two years ago? But they open source released everything. I'm not sure if Tangram has a life of its own.
mourner 5y ago
I'm the original author of Leaflet and also (as of last 8 years) core developer of Mapbox GL JS. Not pursuing vector rendering in Leaflet is intentional — it's designed to be extremely small, simple and lightweight. Vector map rendering is so incredibly difficult to do right that it's pretty much impossible without many years of team effort by top engineers and millions in investment.
- appleflaxen 5y ago
  can you elaborate on what the biggest challenges are? to a naïve bystander is hard to understand why it would be so hard.
  - mourner 5y ago
    Leaflet avoids all the complexity by relying on all the rendering done on the server, while all it has to do is load images. Rendering vector data on the browser with the level of detalization necessary for modern cartography (hundreds of thousands of points in a single view) is not possible with the usual technologies like Canvas & SVG. The only option is WebGL, which is basically a very efficient way to draw triangles. You have to implement all the logic of turning all the data into triangles (tessellating lines, breaking down polygons, implementing anti-aliasing, figuring out collision detection between labels) from scratch, reimplementing difficult computer graphics algorithms from decades ago. This is a MASSIVE amount of work, and hard to do in a performant way. Moreover, client-side vector rendering has even more complexity than server-side technologies like Mapnik, because you can't just render something once — you have to do it in real time, 60 frames per second, considering context, making fluid animations when zooming, panning and loading data, etc. You can learn more details about this in my presentation on vector maps e.g. here: https://youtu.be/v-V8SS14R48 https://youtu.be/v-V8SS14R48

bebop 5y ago

Have you looked into OpenLayers? Maybe this is something that could be useful: https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html https://openlayers.org/en/latest/apidoc/module-ol_layer_Vect...

barnabask 5y ago

I bet you are going to be so happy to hear about https://maplibre.org https://maplibre.org then.

bdon 5y ago

Which vector-based rendering did you use? I'm working on a new attempt at that here, though not WebGL-based: http://github.com/protomaps/protomaps.js http://github.com/protomaps/protomaps.js so it would be valuable to know if it can get closer to what you wanted to accomplish.

NelsonMinar 5y ago

Yeah Leaflet never really made the jump to vector tiles. There are various ways to add vector drawing to it but as you've noted none of them are quite easy or simple enough. MapLibre.org gives me hope. It's a fork of the MapBox GL JS code that intends to be fully open source and independent. Another option for open source vector mapping was Mapzen's Tangram. Mapzen shut down, what, two years ago? But they open source released everything. I'm not sure if Tangram has a life of its own.

mourner 5y ago

I'm the original author of Leaflet and also (as of last 8 years) core developer of Mapbox GL JS. Not pursuing vector rendering in Leaflet is intentional — it's designed to be extremely small, simple and lightweight. Vector map rendering is so incredibly difficult to do right that it's pretty much impossible without many years of team effort by top engineers and millions in investment.

appleflaxen 5y ago
can you elaborate on what the biggest challenges are? to a naïve bystander is hard to understand why it would be so hard.
- mourner 5y ago
  Leaflet avoids all the complexity by relying on all the rendering done on the server, while all it has to do is load images. Rendering vector data on the browser with the level of detalization necessary for modern cartography (hundreds of thousands of points in a single view) is not possible with the usual technologies like Canvas & SVG. The only option is WebGL, which is basically a very efficient way to draw triangles. You have to implement all the logic of turning all the data into triangles (tessellating lines, breaking down polygons, implementing anti-aliasing, figuring out collision detection between labels) from scratch, reimplementing difficult computer graphics algorithms from decades ago. This is a MASSIVE amount of work, and hard to do in a performant way. Moreover, client-side vector rendering has even more complexity than server-side technologies like Mapnik, because you can't just render something once — you have to do it in real time, 60 frames per second, considering context, making fluid animations when zooming, panning and loading data, etc. You can learn more details about this in my presentation on vector maps e.g. here: https://youtu.be/v-V8SS14R48 https://youtu.be/v-V8SS14R48