In mapbox studio I have a lot of layers for customizations. Is there a way to access those layers programmatically with js. For example hide all WATER or ROAD layer on the map with js?
Thanks.
You can try using https://github.com/mapbox/vt2geojson to get geojson data for whichever layers you are interested in and then use this data and add styling using mapbox gl js maps.
Hope that answers your question.
Related
I am wondering if it's possible to do something like this with Mapbox GL:
https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html
I would like to have interaction between a chart and Mapbox by moving the marker either on the chart or either on the map.
I googled for this but i didn't find anything for Mapbox GL, just for Leaflet.
Currently i'm using Chart.js and Mapbox and i don't see how to manage to reproduce the above example.
Any hints maybe?
Thanks a lot
I can confirm for you that it is possible to build something like this using Mapbox GL JS.
I'm in the process of rewriting route-planning web app from Mapbox.js to Mapbox GL JS library.
With all the features almost implemented, it's borderline unusable due to lags, non-smooth animations and general sluggishness of the map layer.
Now, it's entirely possible I'm using the API wrong. I made a quick comparison and published it here:
https://petrnagy.github.io/index.html#automove=no
Notice the old Mapbox.js (left) is much smoother than the new Mapbox GL JS (right).
You can see the difference more clearly here where both maps are moving and zooming:
https://petrnagy.github.io/index.html#automove=yes
This is just a basic example. The app itself also features:
Dynamically styled routes (traffic, air quality, elevation)
Rich UI which overlays the map
Additional layers (eg. bicycle lanes, POIs, air quality)
With all there features, Mapbox GL JS is pretty much unusable. Unlike the old Mapbox.js, which is smooth.
Any advice for optimizing the performance appreciated!
it's important to note that the older Mapbox.js library was serving raster tiles, which get rendered server side, where the more modern Mapbox GL JS is vector based and rendered client side. Due to the nature of raster vs. vector is why you might see this "dip" in performance, if you are looking strictly at FPS, because your machine may be struggling.
Mapbox.js, like other traditional JavaScript map libraries, used the basemap-overlay mapping convention. The basemap (or baselayer) is a raster tile layer that is served already rendered from the server and overlays are often vector data that sits on top of the basemap.
Mapbox GL JS has no distinction between baselayers and overlay layers, and uses mostly vector tiles. This means that map details like labels and icons and elements like streets and buildings can be modified with JavaScript, like overlays in earlier mapping libraries. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.
You can read more about the difference here: https://docs.mapbox.com/help/how-mapbox-works/web-apps/
There are also some great guides on improving performance of Mapbox GL JS maps and working with large GeoJSON sources in Mapbox GL JS
I am new to leaflet. currently I am working on leaflet to render vector tiles. my application's requirement is that on click i should get features from map tiles in geojson format.
In Mapbox map.queryRenderedFeatures(e.point). I want to do exact same thing, but in leaflet. Please check here to check how mapbox is fetching features.
Please help.
Current Leaflet implementation does not supports querying rendered features. Hence switching to Mapboxgl
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
In brief, I’m looking for a way to either flatten layers in MapBox, or import a MapBox project into TileMill so I can flatten it into a new tile set.
My problem is this: I’m working with StroyMapJS (a JavaScript library) and it only recognizes the base layer coming from MapBox, with no additional layers. However, I have some vector data that is a critical part of the story that I want included. My thinking is that if I can flatten or merge the layers into a new basemap I would be fine. So, I would either:
Do this directly in MapBox – but I can’t find a feature to do this, or
Import the Terrain MapBox layer into TileMill, add my vector
data, and then export as a new set of tiles and create a new project
from these tiles in MapBox - but I can’t figure out how to bring a
MapBox project into TileMill.
Am I going about this the wrong way or am I mission something?
Thanks
but I can’t figure out how to bring a MapBox project into TileMill.
You would export your markers & overlays as GeoJSON - this will be in the Project UI in the map editor. Then you can import that GeoJSON into TileMill as a datasource.