search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.05k stars 2.21k forks source link

Add SVG path as map layer #3699

Closed gerbsen closed 7 years ago

gerbsen commented 7 years ago

Hey guys, We've developed a SVG layer to display overlapping isochrones on Leaflet maps. We are in the process of switching to vector based maps and want to port this layer to support mapbox-gl js. I started fiddling around a little with the GeoJson, but this is not working since overlapping parts are painted darker the more overlays are added. Is there a way to add SVG layers or do we have to port the painting to WebGL?

Cheers,
Daniel

averas commented 7 years ago

I'm not part of the Mapbox team, but I feel pretty confident when I say that you will not see any native SVG support in mapbox-gl-js anytime soon (probably never).

If you really want to stay with SVG I suggest you add an SVG overlay on top of your map, for example using d3.js. As the user interacts you will have to continuously project your SVG using mapbox-gl-js' projection-functions, but this is not rocket science and something I've done many times. This should also be similar in nature to what you are doing with leaflet.

For the example you demonstrated I would, however, strongly suggest you continue down the road of transforming your data into GeoJSON (or vector tiles). If your data source contains overlapping polygons I simply suggest you modify them, either at the source or on the fly, for example using turf.js: http://turfjs.org/docs/#difference

mourner commented 7 years ago

You can either add it manually on top of the map canvas and synchronize using map move event, or remove the overlap in GeoJSON isochrones by adding holes in shapes. SVG support as a part of GL JS is not technically feasible.

saadsaifse commented 4 years ago

Any updates on this?

BoJIbFbI4 commented 3 years ago

I'll also wait here