Add images and raster coords, set center and zoom

3 files changed, 22 insertions, 11 deletions

diff --git a/img/140.png b/img/140.png
new file mode 100644
index 0000000..e2394d5
--- /dev/null
+++ b/img/140.png
diff --git a/img/280.png b/img/280.png
new file mode 100644
index 0000000..48af202
--- /dev/null
+++ b/img/280.png
diff --git a/index.html b/index.html
index ebac79d..3959f87 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,22 @@
 
 <div id='map'></div>
 <script>
+
+var RASTER_COORDS_140 = [
+    [33.35317413, 33.27232471],
+    [36.32243686, 33.27232471],
+    [36.32243686, 30.72293428],
+    [33.35317413, 30.72293428]
+];
+
+var RASTER_COORDS_280 = [
+    [31.93095218, 34.5156862],
+    [37.86644267, 34.5156862],
+    [37.86644267, 29.42911589],
+    [31.93095218, 29.42911589]
+];
+
+
 mapboxgl.accessToken = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6InlKdW56cVEifQ.Kp9mM9JFtja5dKeZxHg0DA';
 var mapStyle = {
     "version": 8,
@@ -26,13 +42,8 @@ var mapStyle = {
         },
         "overlay": {
             "type": "image",
-            "url": "/mapbox-gl-js/assets/radar.gif",
-            "coordinates": [
-                [-80.425, 46.437],
-                [-71.516, 46.437],
-                [-71.516, 37.936],
-                [-80.425, 37.936]
-            ]
+            "url": "/img/280.png",
+            "coordinates": RASTER_COORDS_280
         }
     },
     "sprite": "mapbox://sprites/mapbox/dark-v8",
@@ -105,10 +116,10 @@ var mapStyle = {
 
 var map = new mapboxgl.Map({
     container: 'map',
-    maxZoom: 5.99,
-    minZoom: 4,
-    zoom: 5,
-    center: [-75.789, 41.874],
+    maxZoom: 10,
+    minZoom: 2,
+    zoom: 6,
+    center: [35, 32],
     style: mapStyle,
     hash: false
 });