diff options
| author | Yuval Adam <yuval@y3xz.com> | 2015-11-07 00:29:11 +0200 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2015-11-07 00:29:11 +0200 |
| commit | 15984540740a580ccc16131d47d2e9899510b0c7 (patch) | |
| tree | 9f276ca42921e7f86ef4834e5f965cc8164fa1e9 /templates | |
| parent | 98ec7b35afb5a59e7db6af842c63b71216dc73d3 (diff) | |
Serve geshem from flask app and import latest imagery
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..8d14542 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,138 @@ +<!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> + +var RASTER_COORDS_140 = [ + [33.35317413, 33.27232471], + [36.32243686, 33.27232471], + [36.32243686, 30.72293428], + [33.35317413, 30.72293428] +]; + +var RASTER_COORDS_280 = [ + [31.93095218, 34.5156862], + [37.86644267, 34.5156862], + [37.86644267, 29.42911589], + [31.93095218, 29.42911589] +]; + + +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": "/static/280.png", + "coordinates": RASTER_COORDS_280 + } + }, + "sprite": "mapbox://sprites/mapbox/dark-v8", + "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": {"background-color": "#111"} + }, + { + "id": "boundaries", + "source": "mapbox", + "source-layer": "admin", + "type": "line", + "paint": {"line-color": "#797979"}, + "filter": ["all", ["<=", "admin_level", 2], ['==', 'maritime', 0]] + }, + { + "id": "water", + "source": "mapbox", + "source-layer": "water", + "type": "line", + "paint": {"line-color": "#797979"} + }, + { + "id": "water2", + "source": "mapbox", + "source-layer": "water", + "type": "fill", + "paint": {"fill-color": "#111122"} + }, + { + "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: 10, + minZoom: 2, + zoom: 6, + center: [35, 32], + style: mapStyle, + hash: false +}); + +</script> + +</body> +</html> + |