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.
Related
So my problem is, that I have a tileset which geometries are Multipolygons and when I want to display the district names it places multiple labels instead of just one centered. Is there a way to fix this?
Here is a screenshot for clarification
The data comes from a postgis database, I just export it to a CSV and upload it to mapbox.
I have tried converting the Multipolygon into single Polygons but that ended in the same result.
I also played around with the text padding in mapbox studio but with this option the label placement is very off.
Is there possibly a way trough Mapbox GL JS to fix this issue?
You need to generate a separate label layer. You can use geojson-polygon-labels to do this.
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
I was trying to get an map style from the old Mapbox Studio Classic (https://www.mapbox.com/help/studio-classic-styles/) running in the new Mapbox Studio, i.e., converting it to Mapbox GL Style. I am wondering if there's a way to to convert at least the most part automatically?
Here's an example:
https://github.com/mapbox/mapbox-studio-winter-wonderland.tm2
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 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.