Skip to content

Instantly share code, notes, and snippets.

@danswick
Last active December 11, 2017 16:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save danswick/c19fec2e92e00967458d to your computer and use it in GitHub Desktop.
Save danswick/c19fec2e92e00967458d to your computer and use it in GitHub Desktop.
Mapbox GL JS labels on top of radar raster

A Mapbox GL JS demo that creates a layer from a third-party tiles source and draws it below the Mapbox Style's label layers. Layers in the Mapbox GL Style Spec draw in the order in which they're listed in the layers array.

Look for the following in the style JSON below:

"sources": {
        "mapbox": {
            "url": "mapbox://mapbox.mapbox-streets-v7",
            "type": "vector"
        }, 
        "simple-tiles": {
            "type": "raster",
            "tiles": [
                "http://tileserver.maptiler.com/weather/{z}/{x}/{y}.png"
            ],
            "tileSize": 256
        }
    },

The simple-tiles source points to our 3rd-party raster tiles.

{
    "id": "simple-tiles",
    "type": "raster",
    "source": "simple-tiles",
    "minzoom": 0,
    "maxzoom": 22
},

Create a new layer from the simple-tiles source.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"name": "Basic",
"sources": {
"mapbox": {
"url": "mapbox://mapbox.mapbox-streets-v7",
"type": "vector"
},
"simple-tiles": {
"type": "raster",
"tiles": [
"https://tileserver.maptiler.com/weather/{z}/{x}/{y}.png"
],
"tileSize": 256
}
},
"sprite": "mapbox://sprites/danswick/ciljv8aim00459dm3hht07ite",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#dedede"
},
"interactive": true
},
{
"id": "landuse_overlay_national_park",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse_overlay",
"filter": [
"==",
"class",
"national_park"
],
"paint": {
"fill-color": "#d2edae",
"fill-opacity": 0.75
},
"interactive": true
},
{
"id": "landuse_park",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse",
"filter": [
"==",
"class",
"park"
],
"paint": {
"fill-color": "#d2edae"
},
"interactive": true
},
{
"id": "waterway",
"type": "line",
"source": "mapbox",
"source-layer": "waterway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"river",
"canal"
]
],
"paint": {
"line-color": "#a0cfdf",
"line-width": {
"base": 1.4,
"stops": [
[
8,
0.5
],
[
20,
15
]
]
}
},
"interactive": true
},
{
"id": "water",
"type": "fill",
"source": "mapbox",
"source-layer": "water",
"paint": {
"fill-color": "#a0cfdf"
},
"interactive": true
},
{
"id": "building",
"type": "fill",
"source": "mapbox",
"source-layer": "building",
"paint": {
"fill-color": "#d6d6d6"
},
"interactive": true
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"tunnel"
]
]
],
"type": "line",
"source": "mapbox",
"id": "tunnel_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
},
"line-dasharray": [
0.36,
0.18
]
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"tunnel"
]
]
],
"type": "line",
"source": "mapbox",
"id": "tunnel_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
},
"line-dasharray": [
0.28,
0.14
]
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"in",
"structure",
"none",
"ford"
]
]
],
"type": "line",
"source": "mapbox",
"id": "road_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"in",
"structure",
"none",
"ford"
]
]
],
"type": "line",
"source": "mapbox",
"id": "road_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_minor case",
"paint": {
"line-color": "#dedede",
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
},
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "butt",
"line-join": "miter"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_major case",
"paint": {
"line-color": "#dedede",
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
},
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"track",
"pedestrian",
"path",
"link"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_minor",
"paint": {
"line-color": "#efefef",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
],
[
"==",
"structure",
"bridge"
]
]
],
"type": "line",
"source": "mapbox",
"id": "bridge_major",
"paint": {
"line-color": "#fff",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
}
},
"source-layer": "road"
},
{
"interactive": true,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"all",
[
"<=",
"admin_level",
2
],
[
"==",
"maritime",
0
]
]
],
"type": "line",
"source": "mapbox",
"id": "admin_country",
"paint": {
"line-color": "#8b8a8a",
"line-width": {
"base": 1.3,
"stops": [
[
3,
0.5
],
[
22,
15
]
]
}
},
"source-layer": "admin"
},
{
"id": "simple-tiles",
"type": "raster",
"source": "simple-tiles",
"minzoom": 0,
"maxzoom": 22
},
{
"interactive": true,
"minzoom": 5,
"layout": {
"icon-image": "{maki}-11",
"text-offset": [
0,
0.5
],
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-max-width": 8,
"text-anchor": "top",
"text-size": 11,
"icon-size": 1
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"all",
[
"==",
"scalerank",
1
],
[
"==",
"localrank",
1
]
]
],
"type": "symbol",
"source": "mapbox",
"id": "poi_label",
"paint": {
"text-color": "#666",
"text-halo-width": 1.5,
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-blur": 1
},
"source-layer": "poi_label"
},
{
"interactive": true,
"layout": {
"symbol-placement": "line",
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-transform": "uppercase",
"text-letter-spacing": 0.1,
"text-size": {
"base": 1.4,
"stops": [
[
10,
8
],
[
20,
14
]
]
}
},
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"motorway",
"primary",
"secondary",
"tertiary",
"trunk"
]
],
"type": "symbol",
"source": "mapbox",
"id": "road_major_label",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-width": 2
},
"source-layer": "road_label"
},
{
"interactive": true,
"minzoom": 8,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
],
"text-max-width": 6,
"text-size": {
"stops": [
[
6,
12
],
[
12,
16
]
]
}
},
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"in",
"type",
"town",
"village",
"hamlet",
"suburb",
"neighbourhood",
"island"
]
],
"type": "symbol",
"source": "mapbox",
"id": "place_label_other",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-width": 1.5,
"text-halo-blur": 1
},
"source-layer": "place_label"
},
{
"interactive": true,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Bold",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
12
],
[
8,
16
]
]
}
},
"maxzoom": 16,
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"==",
"type",
"city"
]
],
"type": "symbol",
"source": "mapbox",
"id": "place_label_city",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-width": 1.5,
"text-halo-blur": 1
},
"source-layer": "place_label"
},
{
"interactive": true,
"layout": {
"text-field": "{name_en}",
"text-font": [
"Open Sans Regular",
"Arial Unicode MS Regular"
],
"text-max-width": 10,
"text-size": {
"stops": [
[
3,
14
],
[
8,
22
]
]
}
},
"maxzoom": 12,
"filter": [
"==",
"$type",
"Point"
],
"type": "symbol",
"source": "mapbox",
"id": "country_label",
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-width": 1.5,
"text-halo-blur": 1
},
"source-layer": "country_label"
}
],
"created": "2016-03-08T20:24:55.187Z",
"id": "ciljv8aim00459dm3hht07ite",
"modified": "2016-03-08T20:24:55.187Z",
"owner": "danswick",
"draft": false
},
center: [8.482928371982553, 38.79496328906251], // starting position
zoom: 5 // starting zoom
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment