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.
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.
Related
I'm working on rendering some vector tiles using Mapbox Gl JS. These tiles are within the US and Canada, but I need only those within US boundaries to be rendered.
My tileset has the following metadata: gsd, name, miles. There is no metadata that indicates the country itself.
Is there a way to render only the tiles within a specific boundary? I tried with queryRenderedFeatures, but I need a solution with the tiles within precise US boundaries.
I cannot add the tileset URL here because it's part of proprietary software.
There's no straightforward way of doing that, for the reasons you describe.
You can try something like generating a shape which is the inverse of the US (ie, the whole world with the US cut out of it) and overlaying it, to block out everything else. But it will cut off labels and look...not great.
I'm working website which uses a lot of markers. And for performance reasons I'm going to render only visible markers after each move.
I'm using mapbox js library via react-mapbox-gl react library.
Any advice how to get visible coordinates from map? Top left and bottom right visible coordinates is enough.
You can use map.getBounds() or map.getBounds().toArray().
A client would like to add their URL as a brand/watermark within a MapBox tiled vector layer in MapBox Studio, so that the watermark appears wherever the tiled vector layer is displayed. (One possible use-case is to discourage competitors from stealing that tiled layer in their own maps.)
Is it possible to add a watermark to a tiled layer in MapBox, and ensure that it's visible at least once in every view?
I tried adding a duplicate copy of a polyline dataset as a Symbol Layer, and labelling it with the client's URL using the Text Field option. This works but has the side effect of preventing the labels from appearing on the original copy of the line layer.
It is not possible to add a single occurrence of a watermark to a map style in Studio in the way that the Mapbox watermark is displayed on a map, but there are alternative approaches to achieve what you are looking to do.
If the underlying goal is to prevent competitors from using a particular map style (and hence an underlying tiled layer), the best approach is to set scopes and URL restrictions on the Mapbox access tokens being used to access the map style in a public environment. You can find more useful information about token management and access tokens in general in the Mapbox documentation. This approach could be used in conjunction with adding a branded "watermark" on the client side -- for example, placing a fixed div in the corner of a web map loaded with GL JS. Although this watermark obviously isn't included in the style itself, setting a URL restriction on the access token used to load the map would prevent others from accessing the same map with that token on other domains.
You could also experiment with adding a low-opacity background-pattern to relevant layers in the map style itself. This property could be used to mimic a traditional watermarked effect, where a particular logo is placed on an image at multiple regular intervals.
I want to label stations on my map, and I would like to clusterize the stops at different zoom levels to filter them down. So as you zoom out all you get is the start and end, and then finally a single label start->end.
How do I render a text label on a vector tile ?
I could fetch the stations as a geojson and reload on zoom change if there's no easy way to do this with tiles.
Is there a reason you need to encode your data differently per-zoom-level in the tiles or are you mainly concerned with displaying data differently per-zoom-level? If the latter, I would recommend looking for an approach that focuses more on styling the vector tiles you already have rather than trying to generate those tiles in a more complex fashion. You could try using a zoom function to style your data. If you're using Mapbox Studio, you can also set zoom-specific style rules in the Studio UI, which is the route you'll probably want to go if you're using Leaflet (I see the Leaflet tag in your post but it's not entirely clear what your implementation looks like).
If the former, you may need to use a tool like Tippecanoe. This route will likely be a bit more complex, but gives you fine-grained control over how your vector tiles are generated. Keep in mind that once you've created your tiles using Tippecanoe, you'll still need to style them somehow.
I'm using Leaflet + CartoDB; I've also used Leaflet + Mapbox; and there may also be some Leaflet + GoogleMaps in my future.
My customer asked me this question: where do the Leaflet layers get painted onto the tiles? Is that done by Leaflet? Or by the Tile engine?
Does this change if I'm using a "regular" map engine (such as Mapbox) or if I'm using something like the KML-rendering plugin?
where do the Leaflet layers get painted onto the tiles? Is that done by Leaflet?
By default (unless you're doing something weird), that happens in your web browser, which is compositing DOM elements on top of each other. You can check this by using the developer tools in your browser and inspecting the DOM elements for the tiles, and the <canvas> or <svg> with your vector geometries. They are separate DOM elements, thus your browser is doing the compositing.
Does this change if I'm using a "regular" map engine (such as Mapbox) or if I'm using something like the KML-rendering plugin?
Not really. Mapbox-gl-js uses insane amounts of WebGL, so that means that the brunt of the workload moves from the browser's compositor to a WebGL stack. It still happens in the web browser, albeit in a different part of the browser.
There is no "KML rendering plugin" for leaflet, just KML loading plugins. Vector geometries are still rendered in a <canvas> or <svg> separate from the image tiles for the basemap, then composited.
You can, of course, run your own tile server (with software such as Geoserver, Mapserver, Mapproxy, mapnik+mod_tile, tirex, tilestream, or dozens of others). In that case, you obviously know you are rasterizing your data into tiles.