Skip to content

Instantly share code, notes, and snippets.

@Rub21

Rub21/README.md

Forked from danswick/README.md
Created December 11, 2017 16:18
Show Gist options
  • Save Rub21/c579345a6fd8521e03af1293f6bf31c8 to your computer and use it in GitHub Desktop.
Save Rub21/c579345a6fd8521e03af1293f6bf31c8 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox GL JS labels on top of radar raster
Raw
README.md

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.

Raw
index.html
<!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