Changing images live

6 files changed, 33 insertions, 13 deletions

diff --git a/img/280_0.png b/img/280_0.png
new file mode 100644
index 0000000..979cef4
--- /dev/null
+++ b/img/280_0.png
diff --git a/img/280.png b/img/280_1.png
index 48af202..48af202 100644
--- a/img/280.png
+++ b/img/280_1.png
diff --git a/img/280_2.png b/img/280_2.png
new file mode 100644
index 0000000..f98fa52
--- /dev/null
+++ b/img/280_2.png
diff --git a/img/280_3.png b/img/280_3.png
new file mode 100644
index 0000000..98bfe2a
--- /dev/null
+++ b/img/280_3.png
diff --git a/img/280_4.png b/img/280_4.png
new file mode 100644
index 0000000..327d39c
--- /dev/null
+++ b/img/280_4.png
diff --git a/index.html b/index.html
index 8b77ded..ca9386a 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <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' />
+      <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%; }
@@ -39,11 +39,6 @@ var mapStyle = {
         "mapbox": {
             "type": "vector",
             "url": "mapbox://mapbox.mapbox-streets-v6"
-        },
-        "overlay": {
-            "type": "image",
-            "url": "/img/280.png",
-            "coordinates": RASTER_COORDS_280
         }
     },
     "sprite": "mapbox://sprites/mapbox/dark-v8",
@@ -70,12 +65,6 @@ var mapStyle = {
             "paint": {"line-color": "#797979"}
         },
         {
-            "id": "overlay",
-            "source": "overlay",
-            "type": "raster",
-            "paint": {"raster-opacity": 0.85}
-        },
-        {
             "id": "cities",
             "source": "mapbox",
             "source-layer": "place_label",
@@ -124,8 +113,39 @@ var map = new mapboxgl.Map({
     hash: false
 });
 
+function changeToImage(num){
+  map.addSource('overlay'+num,{
+      "type": "image",
+      "url": "/img/280_"+num+".png",
+      "coordinates": RASTER_COORDS_280
+    }
+  );
+  if (map.getLayer("overlay")) {
+    map.removeSource(map.getLayer("overlay").source);
+    map.removeLayer('overlay');
+  }
+  map.addLayer({
+    "id": "overlay",
+    "source": "overlay"+num,
+    "type": "raster",
+    "paint": {"raster-opacity": 0.85}
+  },"cities");
+  map.update(true);
+}
+
+map.on('load', function(){
+  var count = 0;
+  var nextImage = function(){
+    changeToImage(count);
+    count = count+1;
+    if(count>4) count = 0;
+  }
+
+  window.setInterval(nextImage, 1000);
+});
+
+
 </script>
 
 </body>
 </html>
-