diff options
| author | Yuval Adam <yuval@y3xz.com> | 2016-01-01 00:08:20 +0200 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2016-01-01 00:08:20 +0200 |
| commit | 85133c0488fdedb8616ffca73b7118ea5177f9e0 (patch) | |
| tree | 8103e82ccee5c8c0dceb95f0c09d7a50d6bd4b47 /templates | |
| parent | 9bc622faf49397aac757f3e94f183325bdc1acfe (diff) | |
Initial react and webpack flow
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 153 |
1 files changed, 2 insertions, 151 deletions
diff --git a/templates/index.html b/templates/index.html index 12d8129..5991dc1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -23,156 +23,7 @@ </script> </head> <body> - -<div id='datetime'> - <div id='date'>{{ ts.strftime('%d/%m/%Y') }}</div> - <div id='hour'>{{ ts.strftime('%H:%M') }}</div> -</div> -<div id='map'></div> -<script> - -mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g'; -var mapStyle = { - "version": 8, - "name": "Dark", - "sources": { - "mapbox": { - "type": "vector", - "url": "mapbox://mapbox.mapbox-streets-v6" - }, - "radar_140": { - "type": "image", - "url": "/static/{{ latest_140 }}_140.png", - "coordinates": [ - [33.35317413, 33.27232471], - [36.32243686, 33.27232471], - [36.32243686, 30.72293428], - [33.35317413, 30.72293428] - ] - }, - "radar_280": { - "type": "image", - "url": "/static/{{ latest_280 }}_280.png", - "coordinates": [ - [31.93095218, 34.5156862], - [37.86644267, 34.5156862], - [37.86644267, 29.42911589], - [31.93095218, 29.42911589] - ] - } - }, - "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": "radar_140", - "source": "radar_140", - "type": "raster", - "paint": { - "raster-opacity": 0.85 - }, - "layout": { - "visibility": "none" - } - }, - { - "id": "radar_280", - "source": "radar_280", - "type": "raster", - "paint": { - "raster-opacity": 0.85 - } - }, - { - "id": "cities", - "source": "mapbox", - "source-layer": "place_label", - "type": "symbol", - "filter": ["all", ["<=", "localrank", 6]], - "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: 5, - zoom: 6.3, - center: [35, 31.9], - style: mapStyle, - hash: false -}); - -map.on('zoom', function (x) { - var zoom = map.getZoom(); - if (zoom > 7) { - map.getLayer('radar_140').layout.visibility='visible'; - map.getLayer('radar_280').layout.visibility='none'; - } - else { - map.getLayer('radar_140').layout.visibility='none'; - map.getLayer('radar_280').layout.visibility='visible'; - } -}) - -</script> - + <div id='root'></div> + <script src='/static/js/bundle.js'></script> </body> </html> |