diff options
| author | Yuval Adam <_@yuv.al> | 2017-10-10 17:33:42 +0300 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2017-10-10 17:33:42 +0300 |
| commit | 0ddc48530413d99176763d33f1b19063678a9c5a (patch) | |
| tree | b2eae013bda34894b10067259c072c8b37225604 | |
| parent | f5738d71ef39eb665b51882eda5d4eb6739209cb (diff) | |
Radar source and layer loading
| -rw-r--r-- | static/js/app.js | 64 | ||||
| -rw-r--r-- | templates/index.html | 7 |
2 files changed, 68 insertions, 3 deletions
diff --git a/static/js/app.js b/static/js/app.js index a4eee52..2cc5399 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -5,6 +5,68 @@ Vue.component('root', { var app = new Vue({ el: '#app', data: { - imgs: window.imgs + imgs: window.imgs, + res: 280, + slider: 0, + rasterCoords: { + 140: [ + [33.35317413, 33.27232471], + [36.32243686, 33.27232471], + [36.32243686, 30.72293428], + [33.35317413, 30.72293428] + ], + 280: [ + [31.93095218, 34.5156862], + [37.86644267, 34.5156862], + [37.86644267, 29.42911589], + [31.93095218, 29.42911589] + ] + } } }); + +mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw'; +var map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/dark-v9', + container: 'map', + maxZoom: 10, + minZoom: 5, + zoom: 6.3, + center: [35, 31.9], + hash: false +}); + +function addRadarSource(res, i, url) { + map.addSource('radar-' + res + '-' + i, { + type: 'image', + url: '/static/img/' + url, + coordinates: app.rasterCoords[res] + }) +} + +function addRadarLayer(res, i) { + map.addLayer({ + id: 'radar-' + res + '-' + i, + source: 'radar-' + res + '-' + i, + type: 'raster', + paint: { + 'raster-opacity': 0.85 + } + }) +} + +map.on('style.load', function () { + var i = 0; + while (i < app.imgs['140'].length) { + addRadarSource('140', i, app.imgs['140'][i++]) + } + var i = 0; + while (i < app.imgs['280'].length) { + addRadarSource('280', i, app.imgs['280'][i++]) + } + addRadarLayer('280', 0) +}) + + + diff --git a/templates/index.html b/templates/index.html index f197769..b6754cc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -15,10 +15,13 @@ </script> {% endif %} <script src="{{ url_for('static', filename='js/vue' + ('.min' if debug else '') + '.js') }}"></script> + <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script> + <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' /> </head> -<body> +<body style="margin: 0;"> <script>window.imgs = {{ imgs|safe }};</script> - <div id="app"> + <div id="map" style="position:absolute; top:0; bottom:0; width:100%;"></div> + <div id="app" style="position:absolute;"> <root></root> </div> <script src="{{ url_for('static', filename='js/app.js') }}"></script> |