diff options
| author | Yuval Adam <yuval@y3xz.com> | 2015-11-06 01:02:58 +0200 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2015-11-06 01:02:58 +0200 |
| commit | 6a39855bd7e5f6c8c72d97f0d1f909d89895f500 (patch) | |
| tree | d2bec099b3286033660561117422c77da87c3ee9 /index.html | |
Copy example from mapbox docs
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..ebac79d --- /dev/null +++ b/index.html @@ -0,0 +1,120 @@ +<!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.11.2/mapbox-gl.js'></script> + <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.2/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.eyJ1IjoieXV2YWRtIiwiYSI6InlKdW56cVEifQ.Kp9mM9JFtja5dKeZxHg0DA'; +var mapStyle = { + "version": 8, + "name": "Dark", + "sources": { + "mapbox": { + "type": "vector", + "url": "mapbox://mapbox.mapbox-streets-v6" + }, + "overlay": { + "type": "image", + "url": "/mapbox-gl-js/assets/radar.gif", + "coordinates": [ + [-80.425, 46.437], + [-71.516, 46.437], + [-71.516, 37.936], + [-80.425, 37.936] + ] + } + }, + "sprite": "mapbox://sprites/mapbox/dark-v8", + "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": {"background-color": "#111"} + }, + { + "id": "water", + "source": "mapbox", + "source-layer": "water", + "type": "fill", + "paint": {"fill-color": "#2c2c2c"} + }, + { + "id": "boundaries", + "source": "mapbox", + "source-layer": "admin", + "type": "line", + "paint": {"line-color": "#797979", "line-dasharray": [2, 2, 6, 2]}, + "filter": ["all", ["==", "maritime", 0]], + }, + { + "id": "overlay", + "source": "overlay", + "type": "raster", + "paint": {"raster-opacity": 0.85} + }, + { + "id": "cities", + "source": "mapbox", + "source-layer": "place_label", + "type": "symbol", + "layout": { + "text-field": "{name_en}", + "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"], + "text-size": {"stops": [[4, 9], [6, 12]]} + }, + "paint": { + "text-color": "#969696", + "text-halo-width": 2, + "text-halo-color": "rgba(0, 0, 0, 0.85)" + } + }, + { + "id": "states", + "source": "mapbox", + "source-layer": "state_label", + "type": "symbol", + "layout": { + "text-transform": "uppercase", + "text-field": "{name_en}", + "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"], + "text-letter-spacing": 0.15, + "text-max-width": 7, + "text-size": {"stops": [[4, 10], [6, 14]]} + }, + "filter": [">=", "area", 80000], + "paint": { + "text-color": "#969696", + "text-halo-width": 2, + "text-halo-color": "rgba(0, 0, 0, 0.85)" + } + } + ] +}; + +var map = new mapboxgl.Map({ + container: 'map', + maxZoom: 5.99, + minZoom: 4, + zoom: 5, + center: [-75.789, 41.874], + style: mapStyle, + hash: false +}); + +</script> + +</body> +</html> + |