I am beginner in mapbox js. I am looking for a way to update a single feature of layer in mapbox JS. I would like to change at any time color of my single feature. I want to manage this manually. Color will depend on a value from DB arrives from socket. There is a function setPaintProperty, but this is for whole layer. Anybody know is there any possibility to change color single feature like this?
Related
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.
Whenever I use map.setStyle to change the style, the entire map reloads. This can be seen in the Mapbox GL JS example: https://docs.mapbox.com/mapbox-gl-js/example/setstyle/
I'm interested in changing the map more seamlessly. An example of this can be seen in Google maps when you switch between Map and Satellite views.
Does Mapbox GL JS have an easy way of style changing without reloading the whole map, or does this need to be implemented manually (I.e. with map.removeSource, map.addSource, map.removeLayer, map.addLayer)?
It depends a bit what you mean by "reloading the whole map". In this case, every single layer and source is being replaced wholesale, so it doesn't really have much choice.
If you have a style object, make some changes to it, and call setStyle() with the new style object, my understanding is that only the differences will be acted on. So usually, the effect won't be "reloading the whole map".
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.
I have played with Mapbox and can quite easily create a Choropleth map in Mapbox studio and interact with it in Javascript.
I would like to create Choropleth map of the states with the ability to change the colours of the states for 100 years of different data points. I'm not allowed to upload the data into Mapbox as its sensitive healthcare data and I can't get sign of for the $499 a month cost.
My idea is I create a mapbox style layer in MapBox Studio then push the data client side for each of the states depending on the year x that the user selects. I have seen quite a few cloropeth tutorials such as this https://www.mapbox.com/help/choropleth-studio-gl-pt-1/ but the data is added in through a layer in Mapbox Studio. My thoughts are to embed the large GeoJson in the style and only push the data to the Polygon ID's, whilst creating transtions between the two.
Does anyone have any ideas if this is possible? and perhaps any useful API requests which may help me achieve this https://www.mapbox.com/api-documentation/.
It's possible. There are two approaches:
Upload the geometry as a Dataset in Studio, or load it directly as a GeoJSON.
Set data attributes directly on the geometry.
Create a style with data-driven styles (eg, map "47" to "rgb(100,0,0)" and "153" to "rgb(250,250,0)" and let Mapbox interpolate.
Or:
Upload the geometry as a Tileset to Studio.
Calculate the color you want to represent each possible value of each state.
Generate a data-driven style property that maps each state's code to the color you want, like ...['FL','rgb(143,15,0)']....
Neither method will cope with large numbers of regions, but should be ok for 50 US states at low resolution.
More discussion here: https://github.com/mapbox/mapbox-gl-js/issues/4261