openmaptiles / osm-bright-gl-style

OSM Bright GL Style using OpenMapTiles

OSM Bright

A GL JS basemap style showcasing OpenStreetMap. It is using the vector tile schema of OpenMapTiles.

Preview

🌐 Browse the map

Edit the Style

Use the map editor in MapTiler Cloud to view and adjust this map. Open the editor and upload style from this repository or host from various styles available on the platform.

Try style editor

Test updated Bright v2

Or use the Maputnik CLI to edit and develop the style. After you've started Maputnik open the editor on localhost:8000.

maputnik --watch --file style.json

osm-bright-gl-style's Issues

us-interstate icons with ref_length > 3

The highway-shield-us-interstate layer looks for ref_length >= 6 and assigns the icon-image that translates to us_interstate_{ref_length}. But we don't have icons for us-interstate_4, us-interstate_5, and us-interstate_6.

osm-bright-gl-style/style.json

Lines 2522 to 2551 in 500e26e

	"filter": ["all", ["<=", "ref_length", 6],
	["==", "$type", "LineString"],
	["in", "network", "us-interstate"]
	],
	"id": "highway-shield-us-interstate",
	"layout": {
	"icon-image": "{network}_{ref_length}",
	"icon-rotation-alignment": "viewport",
	"icon-size": 1,
	"symbol-placement": {
	"base": 1,
	"stops": [
	[7, "point"],
	[7, "line"],
	[8, "line"]
	]
	},
	"symbol-spacing": 200,
	"text-field": "{ref}",
	"text-font": ["Noto Sans Regular"],
	"text-rotation-alignment": "viewport",
	"text-size": 10
	},
	"minzoom": 7,
	"paint": {
	"text-color": "rgba(0, 0, 0, 1)"
	},
	"source": "openmaptiles",
	"source-layer": "transportation_name",
	"type": "symbol"

However, I don't expect there are any us-interstate networks with a ref_length > 3. So would it make sense to update this filter as such instead of creating new icons?

-"filter": ["all", ["<=", "ref_length", 6], 
+"filter": ["all", ["<=", "ref_length", 3], 
   ["==", "$type", "LineString"], 
   ["in", "network", "us-interstate"] 
 ]

Missing icons defined in the style

Some icons seem to be missing in the current definition of sprite.

Country names nonlatin are missing

https://openmaptiles.github.io/osm-bright-gl-style/#2.5/49.96/81.34
vs.
https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json
Maybe related to different fonts

Use these styles locally hosted

We want to run our own tile server on premises but we don't know how get these styles to run locally. What do we need to do to get these styles to work locally and run in an environment that has no outside internet access? I see http urls in the style files

Getting: Error: Source layer "aerodrome_label" does not exist on source "openmaptiles" .....

I'm using mbtiles from openmaptiles with tileserver.php, mapbox-gl.js. as well as leaflet-mapbox-gl.js. Vector tiles and all other files are on my computer. Map is showing and working for the different zoom levels, but and there is no label and icon displayed for airport(s) - and I'm getting this error in the browser console:
Error: Source layer "aerodrome_label" does not exist on source "openmaptiles" as specified by style layer "airport-label-major"

The mbtile file used is from openmaptiles.com and is this one:
osm-2017-07-03-v3.6.1-europe_norway.mbtiles

The style was downloaded from here:
https://github.com/openmaptiles/osm-bright-gl-style/tree/gh-pages

Below there is a copy of the error from the browser console.
At the end there is the relevant code from the style-cdn.json file.

Does anyone know what I have to do to make the name and icon for the airports to show in the map?

Here is the error in the browser console:

In the style-cdn.json file I find this relevant information:
{
"id": "airport-label-major",
"type": "symbol",
"source": "openmaptiles",
"source-layer": "aerodrome_label",
"minzoom": 10,
"filter": [
"all",
[
"has",
"iata"
]
],
"layout": {
"icon-image": "airport_11",
"icon-size": 1,
"text-anchor": "top",
"text-field": "{name:latin}\n{name:nonlatin}",
"text-font": [
"Klokantech Noto Sans Regular"
],
"text-max-width": 9,
"text-offset": [
0,
0.6
],
"text-optional": true,
"text-padding": 2,
"text-size": 12,
"visibility": "visible"
},
"paint": {
"text-color": "#666",
"text-halo-blur": 0.5,
"text-halo-color": "#ffffff",
"text-halo-width": 1
}
},

Invalid MapBox GL JS Schema

Hi,
I was looking for a way to style tiles and I found MapBox GL spec that was supposed to replace the Carto, which is great since one can easily parse json, whereas custom "css" syntax would be a tough task.

So I am currently writing parser for this json according to schema and I chose this style as my base. And to my surprise I see a lot of things like:

"line-width": {
        "base": 1.2,
        "stops": [
          [10, 0.8],
          [20, 6]
        ]
      }

which is invalid, according to the schema. It should be uint and not this custom definition.

or

"fill-color": {
        "base": 1,
        "stops": [
          [12, "hsla(30, 19%, 90%, 0.4)"],
          [16, "hsla(30, 19%, 90%, 0.2)"]
        ]
      }

which is invalid color definition.

So I wonder, since there are many cases of this, what is going on?

Slashes in the wrong position on Amharic / English Text

We are hosting a Makina Maps based tile server at https://africa.tiles.openplaceguide.org/ which is based on OpenMapTiles, but the problem we are seeing is also happening on the maptiler.com map which osmapp.org is using.

The text "አዲስ አበባ / Addis Ababa" is rendered with the slash at a wrong position like this:

Addis Ababa
አዲስ አበባ / 

The language / font is Amharic / Ethiopic. It is not a RTL font.

I happens for the outdoor style as well:

https://osmapp.org/node/622357041#13.95/9.0117/38.7596

https://africa.tiles.openplaceguide.org/#map=14.57/9.01108/38.7665

Not sure where the issue comes from - from the style or from Maplibre GL?

Style for *_link, but not part of OpenMapTiles schema

The style have layers to style the highway *_link, but OpenMapTiles does not define such class or subclass.

Error: unknown pbf field type exception

Line 54 of style.json:

"sprite": "https://openmaptiles.github.io/osm-bright-gl-style/sprite",

references https://openmaptiles.github.io/osm-bright-gl-style/sprite, which is returning 404 not found.

I suspect this is the cause of errors I'm getting along the lines of:

Error: unknown pbf field type exception                     
    at Error (native)                                        
   mbgl: { class: 'Style',                                     
   severity: 'ERROR',                                        
   text: 'Failed to load glyph range 65024-65279 for font stack Klokantech Noto Sans CJK Regular: unknown pbf field type exception' }

but that could be something else.

It looks like this is present for many other styles (e.g. https://github.com/openmaptiles/positron-gl-style/blob/master/style.json) but I'm only raising the issue here.

Style cannot be edit in Mapbox Studio

When trying to edit / view this style in Mapbox Studio (https://www.mapbox.com/studio/styles/) there appears an error:

Major cities labels much worse on master vs v1.9

v1.9 was much better when it come to lower zoom level labels. On master, it's always the regional county which overtakes the major cities.

This is against common logic, you want to see Roma, not Lazio, Napoli, not Campania. Paris, not Il-De-France.

v1.9:

master:

Usage of non existing minor_road class of transportation

The tunnel-minor layer use a filter on class minor_road. But this class does not exist on OMT.
So the layer tunnel-minor render nothing.

The style look like this

1. Applying the same style as trunk...tertiary done this:

{
  "id": "tunnel-minor",
  "type": "line",
  "metadata": {
    "mapbox:group": "1444849354174.1904"
  },
  "source": "openmaptiles",
  "source-layer": "transportation",
  "filter": [
    "all",
    ["==", "brunnel", "tunnel"],
    ["==", "class", "minor"]
  ],
  "layout": {"line-join": "round"},
  "paint": {
    "line-color": "#fff",
    "line-opacity": 1,
    "line-width": {
      "base": 1.2,
      "stops": [
        [13.5, 0],
        [14, 2.5],
        [20, 11.5]
      ]
    }
  }
}

Round casing cannot be removed.

[discuss] Adopt style splitting

The OpenMapTiles main repo has adopted style splitting across layer definitions with a new tool added to the tools repo. This makes maintaining the styles much simpler and easier to review and reuse.

Would it makes sense for the bright style to adopt the same approach? We (Elastic) have just started using it in our own modified version of this style (you can take a look at this PR) and even we are still keeping the, now generated, style.json file, we can track changes on each layer separately.

We are happy to create a similar PR here if this is useful for others.

What do you think?

Use geojson file as multiple sources causes error in vector mode

i edited the style in the Maputnik. In the website editor i add new sources,the source type is geojson and data is from remote url..when i finished editing the style,i exported the style json file..
before running the tileserver-gl docker , i only modified the sources of openmaptiles url to local url. and run .but error occurs when i open in vector mode
part of style json file is as below

 "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "mbtiles://{v3}"
    },
    "places": {
      "type": "geojson",
      "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places_simple.geojson"
    }
  },
  "glyphs": "{fontstack}/{range}.pbf",

ERROR:

GET /styles/ckstyle.json 500 10.040 ms - 890
TypeError: Cannot read property 'replace' of undefined
    at fixUrl (/usr/src/app/src/serve_style.js:74:17)
    at /usr/src/app/src/serve_style.js:81:20
    at Array.forEach (native)
    at /usr/src/app/src/serve_style.js:79:37
    at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/app/node_modules/express/lib/router/route.js:131:13)
    at Route.dispatch (/usr/src/app/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)
    at /usr/src/app/node_modules/express/lib/router/index.js:277:22
    at Function.process_params (/usr/src/app/node_modules/express/lib/router/index.js:330:12)

Can reconsiter to reformat the source of the style.json

The source of the style was reformatted to less readable format. I guess with Mapbox Studio.
Please can you consider back to the original format, the one used by maputnik?

fc8e4bd

tm2 style

Hi,

I want to port an existing TM2 style (https://github.com/mapbox/mapbox-studio-osm-bright.tm2) to OpenMapTiles (https://github.com/openmaptiles/mapbox-studio-osm-bright.tm2/) by myself.

Is there any tutorial?

Thanks.

Highway ramps broken

Compared to v1.9 the highway ramps look broken on latest commit. Source is OpenMapTiles.

1.9:

latest:

JSON syntax error in least version of style.json

As title....
And I have no idea if it is related, https://maputnik.github.io/editor/#0.57/0/0 also can't load OSM Bright style

Name fallback to "name" or "name:latin"?

POI's require "name" to be defined for them to appear in poi-level-1. The rest of the style depends on name:latin begin defined. Can this be simplified so "name" is not needed?

Oneway arrow colide with other object

Oneway arrow collide with other objects

Oneway arrow have the priority over the POIs.
On urban dense area it avoid displaying many POIs.

I suggest to move the arrow layers to prioritize POIs.

An option could be to allow both at the same time. But I think the result is rough.

Add aeroways with OMT v3.5

{
  "id": "aeroway",
  "type": "line",
  "metadata": {
    "mapbox:group": "1444849345966.4436"
  },
  "source": "openmaptiles",
  "source-layer": "aeroway",
  "minzoom": 4,
  "layout": {
    "line-cap": "round",
    "line-join": "round",
    "visibility": "visible"
  },
  "paint": {
    "line-color": "rgba(153, 153, 153, 1)",
    "line-width": 3
  },
  "filter": [
    "all",
    [
      "in",
      "class",
      "runway",
      "taxiway"
    ]
  ]
}

{
  "id": "aeroway-copy",
  "type": "line",
  "metadata": {
    "mapbox:group": "1444849345966.4436"
  },
  "source": "openmaptiles",
  "source-layer": "aeroway",
  "minzoom": 4,
  "layout": {
    "line-cap": "round",
    "line-join": "round",
    "visibility": "visible"
  },
  "paint": {
    "line-color": "rgba(204, 204, 204, 1)",
    "line-width": 2
  },
  "filter": [
    "all",
    [
      "in",
      "class",
      "runway",
      "taxiway"
    ]
  ]
}

Tools for building the style

Really nice style, and I just wonder if it would be possible to provide the tool/scripts that you use for building the github pages version that contains the local version and that also builds the sprites?

Covert this style to array instead of object

Hi,
it would be nice this style to be converted to an array,instead of an object,so as to use with Maplibre.
If anyone could do this I would be grateful.
Cheers

delete shields branch?

seems to be stale