I've been working with a leaflet map using the mapbox outdoors raster tile server. Mapbox has a handful of ready-made styles, most of which are listed in this answer. The code / url for this is like so:
var mapBoxOutdoorsClassic = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token={accessToken}', {
accessToken: '...',
attribution: '...',
maxZoom: 18,
}).addTo(map1);
I love this style. But my issue is that I'm trying to add an imageoverly. I want the imageoverlay to be above the map terrain graphics, but under the labels. So what I did was go into mapbox studio and create these two styles - basically the outdoors style, with the labels separated out:
Without Labels
Labels Only
Here's a codesandbox comparing the raster and mapbox studio styles
The old style is on the left, the new styles with the separated out layers is on the right. You can play with the layers in the upper right corner.
So separating the layers out has worked well, as you can see in the codesandbox. But the styles from the raster tiles are not really the same as the ones from mapbox studio! I'm guessing the raster tiles are from a few years ago, and the styles have been updated since. But I really like the older style - it has more of a colored pencil feel to it, more of a national parks map style, as opposed to the new style which has more of an OSM or google maps feel. Rather than spend hours in mapbox studio trying to recreate the old style, does anyone know if these styles exist somewhere within mapbox studio? Perhaps a 'mapbox outdoors classic'? I really just want the exact styles are show in the map on the left in my codesandbox, but with the ability to separate the labels layer from the rest.
With Mapbox Studio style components, it's actually pretty quick to recreate older Mapbox styles in the modern Mapbox Studio. In fact, here's a five minute video from Mapbox showing how to recreate the classic Mapbox Outdoors in modern Studio!
How to update a classic style in modern Mapbox Studio
Related
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 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
I want to show secondary/tertiary roads at a zoom level like 10 or 11. At that zoom level I only see the primary roads, I did try to style it with carto css, but its not working.
Thank you
[class='secondary'][zoom>=11] {
line-color: red;
line-dasharray: 2,1;
line-width: 19.2;
}
It's not possible.
The mapbox-streets-v6 vector dataset that ships with Mapbox Studio Classic only has certain vector data layers at each zoom level. The waterway data does not appear in this dataset at any zoom lower than 8, which is why you can't style it at any other zoom level.
Fortunately, this data comes from OpenStreetMap, so you can add it as a custom source in Mapbox Studio Classic and style it along with the other data! There is even a guide on grabbing this data from OpenStreetMap with Overpass Turbo.
I am working styling a map in MapBox studio. I am trying to make the road class path show up at a zoom level less than 14. As soon as I go to level 13 or less the paths all disappear. Does anyone know how to make the paths show up at levels 12 and 13?
I have tried this in my css.
[class='path'] {
::path[zoom>=10]['mapnik::geometry_type'=2] {
line-join: round;
line-width: 1.0;
}
}
The mapbox-streets-v5 vector dataset that ships with Mapbox Studio only has certain vector data layers at each zoom level. The path data does not appear in this dataset at any zoom lower than 14, which is why you can't style it at any other zoom level.
Fortunately, this data comes from OpenStreetMap, so you can add it as a custom source in Mapbox Studio and style it along with the other data! There is even a guide on grabbing this data from OpenStreetMap with Overpass Turbo.
I've been using MapBox studio for a few weeks now but I'm curious, using the API is it possible to change the look of a map using html UI elements? For example, if I want to have a slider on the page which is displaying my map which adjusts the size of the POI labels, is it possible to do that, or am I beholden to the current saved .mss file for those attributes?
Mapbox Studio is designed for the rendering of raster tiles and not for live-changing styles. Check out Mapbox GL for preview of how live styling will work.