mapbox / mapbox-gl-styles

Prebuilt Mapbox GL styles for use in Mapbox GL JS or the Mapbox Mobile SDKs and as a starting point for custom maps built with Mapbox Studio

This repository contains prebuilt Mapbox GL styles for use in Mapbox GL JS or the Mapbox Mobile SDKs and as a starting point for custom maps built with Mapbox Studio.

If you're looking for Mapbox Streets, Mapbox Satellite Streets, Mapbox Dark, Mapbox Light, or Mapbox Outdoors, see https://www.mapbox.com/maps/

Versioning

A breaking release (x.0.0) is one that

• changes the style's version field
• removes or renames an icon
• removes or changes a glyphs URL
• removes or changes a source
• removes or renames a style layer
• changes the semantic meaning of a layer

A feature release (0.x.0) has no breaking-release changes and

• makes any non-breaking change to styles
• makes any non-breaking change to sprites
• adds a new style
• adds a new icon

A fix release (0.0.x) is one that has no feature-release changes and

• fixes an invalid stylesheet or bad test

Styles

The following styles are provided:

Basic (basic-v8)

Simple and flexible starting template.

Bright (bright-v8)

Template for complex custom basemaps.

Satellite (satellite-v8)

A beautiful global satellite and aerial imagery layer.

Empty (empty-v8)

A blank slate. Build your own map from the ground up.

Standard icons

All styles (except Empty) include a standard set of Maki icons:

Airport
	airfield-11		airfield-15
	airport-11		airport-15
	heliport-11		heliport-15
	rocket-11		rocket-15
Mountain peak
	mountain-11		mountain-15
	volcano-11		volcano-15
Dining
	bakery-11		bakery-15
	bar-11		bar-15
	beer-11		beer-15
	cafe-11		cafe-15
	fast-food-11		fast-food-15
	ice-cream-11		ice-cream-15
	restaurant-11		restaurant-15
Education
	college-11		college-15
	school-11		school-15
General
	alcohol-shop-11		alcohol-shop-15
	amusement-park-11		amusement-park-15
	aquarium-11		aquarium-15
	art-gallery-11		art-gallery-15
	attraction-11		attraction-15
	bank-11		bank-15
	bicycle-11		bicycle-15
	bicycle-share-11		bicycle-share-15
	car-11		car-15
	castle-11		castle-15
	cinema-11		cinema-15
	circle-11		circle-15
	circle-stroked-11		circle-stroked-15
	clothing-store-11		clothing-store-15
	drinking-water-11		drinking-water-15
	embassy-11		embassy-15
	fire-station-11		fire-station-15
	fuel-11		fuel-15
	grocery-11		grocery-15
	harbor-11		harbor-15
	information-11		information-15
	laundry-11		laundry-15
	library-11		library-15
	lodging-11		lodging-15
	marker-11		marker-15
	monument-11		monument-15
	museum-11		museum-15
	music-11		music-15
	place-of-worship-11		place-of-worship-15
	police-11		police-15
	post-11		post-15
	prison-11		prison-15
	religious-christian-11		religious-christian-15
	religious-jewish-11		religious-jewish-15
	religious-muslim-11		religious-muslim-15
	shop-11		shop-15
	stadium-11		stadium-15
	star-11		star-15
	suitcase-11		suitcase-15
	swimming-11		swimming-15
	theatre-11		theatre-15
	toilet-11		toilet-15
	town-hall-11		town-hall-15
	triangle-11		triangle-15
	triangle-stroked-11		triangle-stroked-15
	veterinary-11		veterinary-15
Health
	dentist-11		dentist-15
	doctor-11		doctor-15
	hospital-11		hospital-15
	pharmacy-11		pharmacy-15
Outdoors
	campsite-11		campsite-15
	cemetery-11		cemetery-15
	dog-park-11		dog-park-15
	garden-11		garden-15
	golf-11		golf-15
	park-11		park-15
	picnic-site-11		picnic-site-15
	playground-11		playground-15
	zoo-11		zoo-15
Transit
	bus-11		bus-15
	ferry-11		ferry-15
Rail station
	entrance-11		entrance-15
	rail-11		rail-15
	rail-light-11		rail-light-15
	rail-metro-11		rail-metro-15

Usage

The preferred way to use these styles in Mapbox GL JS or the Mapbox Mobile SDKs is via a mapbox:// URL.

JS

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8'
});

iOS

mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
                                   styleURL:[NSURL URLWithString:@"mapbox://styles/mapbox/satellite-v8"]];

Android

<com.mapbox.mapboxsdk.views.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:style_url="mapbox://styles/mapbox/streets-v8"
 />

MapView mMapView = new MapView(context, "Access Token");
mMapView.setStyleUrl(Style.MAPBOX_STREETS);

mapbox-gl-styles's Issues

refine country borders

#686868 admin boundaries are a little boring and they don't look great at low zooms. Definitely deserve another pass.

Mapbox Streets GL: stronger motorways

Current:

Would love if we could pull off something more dramatic, like:

style / refine waterways

Outdoors style not working with mapbox-gl-js

No error, but the style is no longer working with the GL Online editor without any changes made.

Update Pencil style

I don't think Pencil has been manually updated since...ever. It's pretty broken. I'll update it in the v7 branch.

Undocumented dependency on sponge

What is sponge, why is sponge, how does one install sponge

/cc @jfirebaugh : this apparently isn't the npm sponge module, and isn't on homebrew. I don't know what it is.

'Satellite with labels' style

Per conversation with @edenh, I'm going to work on a 'Satellite with labels' style.

I have several other projects I'm trying to hit before this, so let me know if anyone has any immediate need for this style.

/cc @nickidlugash

Emerald enforces contraflow with one-way arrows

One-way arrows (#49) always point in the same direction: either south or east, never north or west (compare):

/cc @peterqliu

Update styles to reflect mapbox-streets-v6 changes

@ajashton fixed the country label lines, but we'll need to make the following changes (and more) to our template styles to reflect updates in streets-v6:

• Now that country labels come in a z-level earlier, they are all too big at the z-level they come in at. We should rewrite these ramps so that the first stop is a slightly smaller size at a lower z-level.
• Country labels now only have labelrank from 1–6 rather than 1–8, so styles with multiple country label layers might need adjustment (bright, outdoors)
• Now that admin boundaries come in a z-level earlier, country admin boundaries are too thick at the z-level they come in at.
• Other labels might be too big at their initial z-level as well (e.g. State labels).
• We should optimize highway shields in outdoors and bright.

Human readable names in index JSON

I would like to use the index JSON file to build the list of GL styles for the Android UI rather than hardcoding them all.

However I will need a human readable name for each.

I was thinking of perhaps a .name field.

Administrative boundaries look almost like dashed lines in Emerald

Emerald tries to render administrative boundaries as dashed lines, but the sausage links are smooshed right up to each other, making it look a bit crude. The screenshot below is blown up to 2×, so the spacing between each link is really fine:

Refine mapbox outdoors

Clean up outdoors for GL launch

Emerald labels but does not show roads under construction

This under-construction motorway is labeled but not shown in Emerald:

/cc @peterqliu

Update styles with new line-dasharray features

Once the line-dasharray property is updated and v7 migrated styles are merged (#24), I'll optimize the relevant styles, including adding longer dasharray patterns. Styles to update:

• Basic-v7
• Bright-v7
• Outdoors-v7

Point labels a zoom level or two further?

Would be worth experimenting with point labels down to Z7 or so. Would especially help in Europe where there are lots of similar scalerank cities and the labels look like they are for regions rather than for cities.

refine building style

The buildings need to be refined. In particular, the way they're being offset is wrong: the base is offset from the top rather than the other way around.

add "labels" placeholder layer to all styles

There's now an addLayer() API for mapbox-gl-js that allows you to easily add a new layer (typically GeoJSON) to a map. It takes an optional second argument specifying an id of an existing layer that the new layer should be immediately below. The common use case is to add overlay layers immediately below labels, so it would be convenient if all default styles provided a layer with a "labels" layer that could used for this argument consistently across styles and without relying on any other details of the style. This layer would just be a placeholder that wouldn't render anything -- it could be a background layer with "visibility": "hidden".

Ref mapbox/mapbox-gl-js#327

emerald POI text wrap is too short

This is a bit awkward:

Hybrid style (raster satellite + GL streets, labels)

There should be a “hybrid” style in which GL streets and labels are superimposed on a raster satellite layer.

Improve workflow for previewing updates to styles

Can we set up a way to easily preview these styles locally, so you can check your updates before merging them into mb-pages?

/cc @yhahn

eliminate outdoors-raster style

Capturing from chat.

outdoors-raster was added when we added support for prerendering and didn't want to delete the original outdoors style, just-in-case. outdoors doesn't prerender hillshades, so those are all still vector fill layers.

Based on talking with @ansis and @kkaefer prerendering is preferable in cases like hillshades for performance and hillshade blur reasons.

We should consolidate the two styles in outdoors and remove outdoors-raster.

cc @lbud @nickidlugash

remove or improve water texture

the water texture often takes on a bit of an unpleasant scanline effect, where the wave pattern isn't actually discernable, but makes the water fill vibrate in an unpleasant way:

It should be refined or removed.

rail styling

@nickidlugash is going to hit this while working on roads.

Emerald: unify and improve visual style

In a lot of ways, Emerald looks great compared to Apple's and Google's core styles. Label placement, road styling, all coming together really nicely. But, right now both Google and Apple's maps have more cohesive color palettes, typographic scales, and handling of polygon fills than Emerald.

The core hues in our palette (blue, green, orange, and purple) don't work together very well together. The palette feels too scientific/neutral. There are too many additional colors that deviate from the core palette in ways that don't make sense (for example, the emerald green metro entrances). In many scenarios, landuse fills clash with the stuff next to and on top of them.

Stepping back and:

1. Building a style schematic like in https://www.mapbox.com/blog/vsco-branded-map/ or https://www.mapbox.com/blog/foursquare-maps-designed-for-functionality/ would go a long way.
2. Working less in the map style code and more in a visual editor. Redraw highway icons if you need to have harmonious stroke widths and padding, place all your land use colors next to each other / on top of each other and make sure they look good, ect.

If there need to be more hands on deck to get in here and work on this let me know. cc: @peterqliu @nickidlugash

Mapbox Streets GL

I made a new milestone for Mapbox Streets GL: https://github.com/mapbox/mapbox-gl-styles/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22Mapbox+Streets+GL%22

This design is going to be a successor to Mapbox Streets, with adjustments to bring it more inline with Google and Apple's basemaps. That means more detailed POI layer, clearler road hierarchy, and more vibrant color palette. We're designing the map systematically to be fast and easy to maintain.

Here are a few screenshots after one day of work from @nickidlugash @ajashton and myself. No sprite assets have been added yet and many layers are just roughed in for now:

I expect we'll make fast progress and have a preliminary draft ready to go by Tuesday.

@peterqliu did an amazing job with Emerald and ideally we can launch with both maps side by side.

Mapbox Streets and Terrain Style Support?

I'm building a GL Web map but I see that the only available "stock styles" are Outdoors or Satellite. Will Streets and Terrain styles also be made available?

https://github.com/mapbox/mapbox-gl-styles/tree/mb-pages/styles

update v7 styles to use layout property functions

mapbox/mapbox-gl-js#361

Looks like the sea level is a little too high on Outdoors

Something weird going on here in this style. When water layer is simplified, it grows. Panama is under water:

improve satellite contours

This could look better:

Compare to these examples:

https://www.mapbox.com/blog/satellite-map-with-contours/

Simple viewer for available GL styles

Make all styles valid

And then keep 'em that way with travis

npm owner add

@edenh

for name in tmcw kkaefer mourner ansis yhahn mapbox; do
    npm owner add $name mapbox-gl-styles
done

script for manipulating maki

1. Target a folder of .svg icons
2. Take color as an argument, and apply to icon fills and render PNG icons
3. Take second color as argument, apply to a background circle, output composite of circle and PNG.

mapbox.com/mapbox-gl-styles/ should show Emerald style as well

Hello,

I noticed from #27 that there is a page to preview the existing styles:
https://www.mapbox.com/mapbox-gl-styles/

Which is a very good idea!

First of all, i think this page should be listed in this repo's readme and secondly, "emerald" style from @peterqliu should be listed so that it is possible to preview it without setting up a page with a map

Fabien

publish to NPM and use as dependence in gl online

Unify font stack names

The Emerald style currently has multiple different spellings for the same font stack;

Open Sans Semibold Italic, Arial Unicode MS Regular (here)

vs.

Open Sans Semibold Italic,     Arial Unicode MS Regular (here)

satellite-v7.json is invalid

It doesn't validate:

styles/satellite-v7.json:80: layers[1].paint.contours.raster-opacity: number expected, object found

@peterqliu

@landuse-industrial color

i find that the purple airports stand out a little too strongly, don't mix well with the other colors, and are maybe too whimsical, for lack of a better word. i'd recommend going with something more muted, maybe even just greyscale.

the comparison to apple maps has been made, but i think their product is a little ugly, not sure it is something we want to emulate:

neighbourhoods above roads in bright?

Should neighbourhoods be placed before roads on bright?
mapbox/mapbox-gl-js#1066 (comment)

Update Outdoors style

I'm updating the Outdoors style to optimize the use of functions, rewriting the casings layers to use the line-gap-width property, and finding whatever else I can to improve it. I'll be reviewing it carefully, since this style was written in the dark ages of mapbox-gl-style-spec and has gone through a number of migrations.

/cc @edenh

Sprite master issue

The map we launch GL with should have:

• Two sizes (12px and 18px) for everything, both POIs and shields.
• All POI icons should be emblem styled, with a maki icon inside a circle background with a white halo, similar to how transit POIs are already styled in Emerald.

Todo:

• Finalize categories + colors for each category: https://gist.github.com/nickidlugash/49d74eff027d9189bdbf
• Maki overhaul
  • Resize
  • Redraw
• Generate emblems for maki icons.
• Update shields icons to match color palette and style of map, create 7px and 10px versions of each:
  • make 7px size
  • make 10px size
• Update transit icons
  • make 11px size
  • make 17px size
• One way icons
• Pattern fills for landuse overlay
• cemetery pattern fill

I'm going to get started on this.

add example screenshots for styles

Mapbox light

Light mapbox style, like https://github.com/mapbox/mapbox-studio-light.tm2

Zoom transition is not smooth on mapbox.com/mapbox-gl-styles/

Hello,

I just noticed that the zoom transition is not the same on
https://www.mapbox.com/mapbox-gl-styles/
and
https://www.mapbox.com/blog/mapbox-gl-js/
for instance.

There is no zoom transition when you use the mouse wheel on the first one, not idea why

Fabien

Emerald lacks one-way indicators

This downtown area is full of one-way streets, but you’d never know it looking at Emerald.

/cc @peterqliu

Mapbox dark

This map style should be identical to Mapbox Light (#58), but with a palette shift so developers don't have hard decision to make between having the color palette they want vs having the label placement and shield styling they want.

See https://github.com/mapbox/mapbox-studio-dark.tm2 for cartoCSS equivalent.

'Basic' style

I'm going to start working on a style that is similar to the carto 'Basic' style. It'll be a good template style for beginners to play around with.

/cc @edenh @nickidlugash

Ditch v3 styles

0.0.2 release

That includes v3 styles.

Example URL on MB website points to nonexisting file in the repo

On the MapBox GL page, the Example link points to

https://github.com/mapbox/mapbox-gl-styles/blob/mb-pages/styles/bright-v3.json

which is returning a 404 for me.