Custom drawing layer in Mapbox GL JS (and Leaflet)

Question

I'm starting research to add a user feature to an existing map built in Mapbox GL JS (wrapped in an Angular 2+ application). What I need to do, is allow a user to be able to draw and rotate ellipses and text labels over the top of a map, and be able to save screen captures of the result.

I'm coming into this with no experience in Mapbox or Leaflet, so I have a lot to figure out. My first goal is to determine if I can do this in Mapbox directly (with a plugin?), of if I will need to render a canvas over the top of my map with some third-part drawing library (I have a lot of experience with those).

The obvious advantage to doing this in Mapbox directly would be that we might still be able zoom and pan.

Steve Bennett · Accepted Answer · 2018-03-08 00:09:10Z

2

The Mapbox-gl-draw library lets the user author features in a map, but probably not to the extent you need.

If the features the user creates don't need to live "in map space" (ie, the map is static, and the labels are statically positioned over the top, for printing), working directly on a canvas will give you much more flexibility. You'll also have access to a much wider variety of libraries.

answered Mar 8, 2018 at 0:09

Steve Bennett

130k45 gold badges188 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BBaysinger Over a year ago

Thanks. I've been sorta figuring this out. I may use EaselJS, and port over some old AS3 code from the Flash Senocular Transform Tool. I may also do something simpler using SVG, since Angular plays well with that.

AndrewHarvey Over a year ago

You can grab the Mapbox WebGL canvas and save it as a PNG see an example github.com/mpetroff/print-maps/blob/master/js/script.js

AndrewHarvey Over a year ago

Mapbox GL Draw has an extensible API so you can write some code to extend it to work with ellipses and text.

BBaysinger Over a year ago

@AndrewHarvey, would that support text inputs (dynamic text fields)? And would this be a big learning curve for someone with little experience in Mapbox?

Collectives™ on Stack Overflow

Custom drawing layer in Mapbox GL JS (and Leaflet)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related