Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created August 7, 2014 19:54
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 wboykinm/97c5317889f3860b5917 to your computer and use it in GitHub Desktop.
Save wboykinm/97c5317889f3860b5917 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapbox GL JS Examples</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.2.0/mapbox-gl.js'></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map;
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
map = new mapboxgl.Map({
container: 'map', // container id
style: 'pencil-v4.json', //stylesheet location
center: [36.97319, -122.03552], // starting position
zoom: 14, // starting zoom
bearing: 90,
hash: true
});
</script>
</body>
</html>
Raw
pencil-v4.json
{
"version": 4,
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/pencil",
"glyphs": "https://mapbox.s3.amazonaws.com/gl-glyphs-256/{fontstack}/{range}.pbf",
"constants": {
"@land": "rgba(0,0,0,0)",
"@water": "#73b6e6",
"@park": "#c8df9f",
"@road": "#fefefe",
"@border": "#6d90ab",
"@wood": "#33AA66",
"@building": "#d9ccbe",
"@building_outline": "#d2c6b9",
"@text": "#000000",
"@satellite_brightness_low": 0,
"@satellite_brightness_high": 1,
"@satellite_saturation": 2,
"@satellite_spin": 0
},
"sources": {
"mapbox": {
"type": "vector",
"url": "mapbox://mapbox.mapbox-streets-v6-dev"
}
},
"layers": [{
"id": "background",
"style": {
"background-color": "@land",
"background-image": "natural_paper"
},
"type": "background"
}, {
"id": "park",
"source": "mapbox",
"source-layer": "landuse",
"filter": { "class": "park" },
"style": {
"fill-color": "@park",
"fill-image": "shade_medium",
"fill-antialias": true
},
"type": "fill"
}, {
"id": "park_outline",
"source": "mapbox",
"source-layer": "landuse",
"filter": { "class": "park", "$type": "Polygon" },
"style": {
"line-image": "line_shade_22_1",
"line-opacity": 0.7,
"line-color": "#eeeeee",
"line-width": {
"stops": [[1.6468052936710817, 1.01], [12.751938909271168, 5.999999999999997]]
}
},
"type": "line"
}, {
"id": "wood",
"source": "mapbox",
"source-layer": "landuse",
"filter": { "class": "wood" },
"style": {
"fill-color": "@wood",
"fill-opacity": 0.08,
"fill-antialias": true
},
"type": "fill"
}, {
"id": "waterway",
"source": "mapbox",
"source-layer": "waterway",
"style": {
"line-color": "@water",
"line-width": {
"base": 1.01,
"stops": [[6, 0.5], [19, 7]]
}
},
"type": "line"
}, {
"id": "water",
"source": "mapbox",
"source-layer": "water",
"style": {
"fill-color": "@water",
"fill-image": "shade_medium",
"fill-antialias": true
},
"type": "fill"
}, {
"id": "roads",
"layers": [{
"id": "road_large_casing",
"source": "mapbox",
"source-layer": "road",
"filter": { "class": ["motorway", "main"] },
"render": {
"line-cap": "butt",
"line-join": "bevel"
},
"style": {
"line-color": "rgba(152,152,152,1)",
"line-width": 0,
"line-opacity": {
"base": 1.01,
"stops": [[13.5, 0], [14.5, 1]]
}
},
"type": "line"
}, {
"id": "road_regular_casing",
"source": "mapbox",
"source-layer": "road",
"filter": { "class": ["street"] },
"render": {
"line-cap": "butt",
"line-join": "bevel"
},
"style": {
"line-color": "rgba(152,152,152,1)",
"line-opacity": {
"base": 1.01,
"stops": [[13.5, 0], [14.5, 1]]
},
"line-width": {
"stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
}
},
"type": "line"
}, {
"id": "road_limited",
"source": "mapbox",
"source-layer": "road",
"filter": { "class": ["street_limited"] },
"render": {
"line-cap": "round",
"line-join": "bevel",
"line-round-limit": 0.7
},
"style": {
"line-dasharray": [10, 2],
"line-color": "@road",
"line-image": "line_solid_7",
"line-opacity": 0.7,
"line-width": {
"stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
}
},
"type": "line"
}, {
"id": "road_large",
"ref": "road_large_casing",
"style": {
"line-color": "@road",
"line-image": "line_double_20",
"line-width": {
"stops": [[11.11458208048225, 1], [15.31634927121565, 20]]
}
}
}, {
"id": "road_regular",
"ref": "road_regular_casing",
"style": {
"line-image": "line_double_18",
"line-color": "@road",
"line-width": {
"stops": [[13.353194706328917, 1], [15.459380810709622, 9.999999999999998]]
}
}
}, {
"id": "path",
"source": "mapbox",
"source-layer": "road",
"filter": { "class": ["path"] },
"render": {
"line-cap": "round",
"line-join": "bevel"
},
"style": {
"line-color": "rgba(255,255,255,1)",
"line-dasharray": [2, 2],
"line-image": "line_dotted_8",
"line-opacity": 0.7,
"line-width": 2
},
"type": "line"
}, {
"id": "bridge_large_casing",
"source": "mapbox",
"source-layer": "bridge",
"filter": { "class": ["motorway", "main"] },
"style": {
"line-color": "rgba(152,152,152,1)",
"line-width": 0,
"line-opacity": {
"base": 1.01,
"stops": [[12, 0], [13, 1]]
}
},
"type": "line"
}, {
"id": "bridge_large",
"ref": "bridge_large_casing",
"style": {
"line-color": "@road",
"line-image": "line_double_20",
"line-width": {
"stops": [[11.11458208048225, 1], [15.31634927121565, 20]]
}
}
}, {
"id": "bridge_regular_casing",
"source": "mapbox",
"source-layer": "bridge",
"filter": { "class": ["street", "street_limited"] },
"style": {
"line-color": "rgba(152,152,152,1)",
"line-opacity": {
"base": 1.01,
"stops": [[13.5, 0], [14.5, 1]]
},
"line-width": {
"stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
}
},
"type": "line"
}, {
"id": "bridge_regular",
"ref": "bridge_regular_casing",
"style": {
"line-image": "line_double_18",
"line-color": "@road",
"line-width": {
"stops": [[13.353194706328917, 1], [15.459380810709622, 9.999999999999998]]
}
}
}],
"style": {
"composite-opacity": 1
},
"type": "composite"
}, {
"id": "building",
"source": "mapbox",
"source-layer": "building",
"style": {
"fill-color": "@building",
"fill-antialias": true,
"fill-image": "shade_medium",
"fill-opacity": {
"base": 1.01,
"stops": [[12, 0], [13, 1]]
}
},
"type": "fill"
}, {
"id": "building_outline",
"source": "mapbox",
"source-layer": "building",
"filter": { "$type": "Polygon" },
"render": {
"line-cap": "butt",
"line-join": "bevel"
},
"style": {
"line-width": {
"stops": [[13.875969454635584, 0], [16.353194706328917, 2.9999999999999996]]
},
"line-color": "@land",
"line-opacity": 0.5,
"line-image": "line_solid_7"
},
"type": "line"
}, {
"id": "borders",
"source": "mapbox",
"source-layer": "admin",
"style": {
"line-color": "rgba(0,0,0,0.3)",
"line-width": 1
},
"type": "line"
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment