Move radar source and layers to on style load

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",
@@ -92,25 +115,6 @@ class Map extends React.Component {
                 "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",
@@ -160,7 +164,7 @@ class Map extends React.Component {
     }
     return <GLMap
         view={view}
-        token='pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g'/>
+        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",
@@ -164,23 +189,6 @@
 	                    "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",
@@ -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' });
 	        }
 	    }]);