From 79fb0039bb1935017b7fc4ed6c94402fd49ef2a7 Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Fri, 1 Jan 2016 23:58:04 +0200 Subject: Move radar source and layers to on style load --- geshem.js | 84 ++++++++++++++++++++++++++++------------------------- static/js/bundle.js | 66 +++++++++++++++++++++++------------------ 2 files changed, 82 insertions(+), 68 deletions(-) diff --git a/geshem.js b/geshem.js index fe32233..f736c3c 100644 --- a/geshem.js +++ b/geshem.js @@ -17,7 +17,50 @@ class GLMap extends React.Component { componentDidMount () { mapboxgl.accessToken = this.props.token + this.map = new mapboxgl.Map(this.props.view) + this.map.on('style.load', () => { + this.map.addSource('radar-140', { + "type": "image", + "url": "/static/img/20160101_103000_140.png", + "coordinates": [ + [33.35317413, 33.27232471], + [36.32243686, 33.27232471], + [36.32243686, 30.72293428], + [33.35317413, 30.72293428] + ] + }) + this.map.addSource('radar-280', { + "type": "image", + "url": "/static/img/20160101_103000_280.png", + "coordinates": [ + [31.93095218, 34.5156862], + [37.86644267, 34.5156862], + [37.86644267, 29.42911589], + [31.93095218, 29.42911589] + ] + }) + + this.map.addLayer({ + "id": "radar-140", + "source": "radar-140", + "type": "raster", + "paint": { + "raster-opacity": 0.85 + }, + "layout": { + "visibility": "none" + } + }) + this.map.addLayer({ + "id": "radar-280", + "source": "radar-280", + "type": "raster", + "paint": { + "raster-opacity": 0.85 + } + }) + }) } componentWillUnmount () { @@ -39,26 +82,6 @@ class Map extends React.Component { "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", @@ -91,25 +114,6 @@ class Map extends React.Component { "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", @@ -160,7 +164,7 @@ class Map extends React.Component { } return + token='pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g' /> } } diff --git a/static/js/bundle.js b/static/js/bundle.js index b574bdb..7eb9497 100644 --- a/static/js/bundle.js +++ b/static/js/bundle.js @@ -81,8 +81,43 @@ key: 'componentDidMount', // mapbox auth token value: function componentDidMount() { + var _this2 = this; + mapboxgl.accessToken = this.props.token; + this.map = new mapboxgl.Map(this.props.view); + this.map.on('style.load', function () { + _this2.map.addSource('radar-140', { + "type": "image", + "url": "/static/img/20160101_103000_140.png", + "coordinates": [[33.35317413, 33.27232471], [36.32243686, 33.27232471], [36.32243686, 30.72293428], [33.35317413, 30.72293428]] + }); + _this2.map.addSource('radar-280', { + "type": "image", + "url": "/static/img/20160101_103000_280.png", + "coordinates": [[31.93095218, 34.5156862], [37.86644267, 34.5156862], [37.86644267, 29.42911589], [31.93095218, 29.42911589]] + }); + + _this2.map.addLayer({ + "id": "radar-140", + "source": "radar-140", + "type": "raster", + "paint": { + "raster-opacity": 0.85 + }, + "layout": { + "visibility": "none" + } + }); + _this2.map.addLayer({ + "id": "radar-280", + "source": "radar-280", + "type": "raster", + "paint": { + "raster-opacity": 0.85 + } + }); + }); } // Adapted from Tim Welch's code that can be found at @@ -126,16 +161,6 @@ "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", @@ -163,23 +188,6 @@ "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", @@ -226,7 +234,9 @@ style: mapStyle, hash: false }; - return _react2.default.createElement(GLMap, { view: view, token: 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g' }); + return _react2.default.createElement(GLMap, { + view: view, + token: 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g' }); } }]); -- cgit v1.3.1