make map view

* move widget to edit.html * widget outputs block.metadata.isBasedOnUrl to index.html with location query params * widget outputs block.html as iframe of ☝️
the-grid · Jun 28, 2016 · a64fc7d · a64fc7d
1 parent 5d9f299
commit a64fc7d
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 28 deletions.
diff --git a/demo.html b/demo.html
@@ -5,11 +5,13 @@
   <title>demo ed-location</title>
 </head>
 <body>
-  <h2>demo ed-location</h2>
-  <h2>Editor</h2>
-  <iframe id="demo" src="./index.html" width="480" height="360"></iframe>
+  <h1>demo ed-location</h1>
+  <h2>Edit (edit.html)</h2>
+  <iframe id="demo" src="./edit.html" width="480" height="360"></iframe>
+  <h2>View (index.html)</h2>
+  <iframe id="view" src="./index.html" width="480" height="360"></iframe>
   <h2>Block</h2>
-  <pre id="block"></pre>
+  <pre id="blocktext"></pre>
   <button id="focus">focus</button>
 
   <script>
@@ -34,12 +36,18 @@ <h2>Block</h2>
     // Receiving content from the editor
     window.addEventListener('message', function (message) {
       var iframe = document.getElementById('demo')
+      var view = document.getElementById('view')
       var preview = document.getElementById('preview')
-      var block = document.getElementById('block')
+      var blocktext = document.getElementById('blocktext')
 
       switch (message.data.topic) {
         case 'changed':
-          block.textContent = JSON.stringify(message.data.payload, null, 2)
+          var block = message.data.payload
+          if (block && block.metadata && block.metadata.isBasedOnUrl) {
+            var search = block.metadata.isBasedOnUrl.split('?')[1]
+            view.src = './index.html?' + search
+          }
+          blocktext.textContent = JSON.stringify(message.data.payload, null, 2)
           break
         case 'height':
           iframe.height = message.data.payload

diff --git a/ed-location.js b/ed-location.js
@@ -71,15 +71,14 @@ var map = L.mapbox
   , 'mapbox.streets'
   , { center: [20, -35]
     , zoom: 2
+    , scrollWheelZoom: false
     }
   )
   .addControl(addressControl)
   .addControl(geocoderControl)
   .addEventListener('zoomend', function (event) {
     locationToEd()
   })
-
-map.scrollWheelZoom.disable()
 
 var marker = L.marker([20, -35]
   , { icon: L.mapbox.marker.icon({'marker-color': 'ff8888'})
@@ -109,6 +108,15 @@ function locationToEd (place_name) {
   if (place_name) {
     block.metadata.address = place_name
   }
+  var url = 'https://the-grid.github.io/ed-location/'
+    + '?latitude=' + encodeURIComponent(block.metadata.geo.latitude)
+    + '&longitude=' + encodeURIComponent(block.metadata.geo.longitude)
+    + '&zoom=' + encodeURIComponent(block.metadata.geo.zoom)
+  if (block.metadata.address) {
+    url += '&address=' + encodeURIComponent(block.metadata.address)
+  }
+  block.metadata.isBasedOnUrl = url
+  block.html = '<iframe src="' + url + '"></iframe>'
   send('changed', block)
 }
 

diff --git a/edit.html b/edit.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8 />
+  <title>ed-location</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
+  <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
+  <style>
+    body { margin:0; padding:0; }
+    #map {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+    .leaflet-control-mapbox-geocoder {
+      display: none;
+    }
+    .leaflet-control-mapbox-geocoder,
+    .ed-address-control {
+      position: absolute;
+      top: 0;
+      left: 40px;
+    }
+    .ed-address-control {
+      border: 1px solid #999;
+      background-color: white;
+      min-width: 10rem;
+      max-width: 80rem;
+      min-height: 1.5rem;
+      padding: 0 0.25rem;
+    }
+  </style>
+</head>
+<body>
+  <div id='map'></div>
+  <script src='./ed-location.js'></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset=utf-8 />
-  <title>ed-location</title>
+  <title>Location Viewer</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
   <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
@@ -14,27 +14,54 @@
       bottom: 0;
       width: 100%;
     }
-    .leaflet-control-mapbox-geocoder {
-      display: none;
-    }
-    .leaflet-control-mapbox-geocoder,
-    .ed-address-control {
-      position: absolute;
-      top: 0;
-      left: 40px;
-    }
-    .ed-address-control {
-      border: 1px solid #999;
-      background-color: white;
-      min-width: 10rem;
-      max-width: 80rem;
-      min-height: 1.5rem;
-      padding: 0 0.25rem;
-    }
   </style>
 </head>
 <body>
-  <div id='map'></div>
-  <script src='./ed-location.js'></script>
+  <div id='map'>Loading map...</div>
+  <script>
+  document.addEventListener('DOMContentLoaded', function () {
+
+    var query = {}
+    var search = window.location.search.substring(1);
+    var vars = search.split("&")
+    for (var i=0, len = vars.length; i<len; i++) {
+      var pair = vars[i].split("=")
+      query[pair[0]] = window.decodeURIComponent(pair[1])
+    }
+
+    if (query.latitude == null || query.longitude == null) {
+      document.getElementById('map').textContent = 'Map query not found.'
+      return
+    }
+    var center = {lat: query.latitude, lon: query.longitude}
+    var zoom = query.zoom || 10
+
+    L.mapbox.accessToken = 'pk.eyJ1IjoiZm9ycmVzdG8iLCJhIjoiY2lwOGtmN2s0MDE4dXRqbm91eWIzbzhqZiJ9.ythDls7OnKQKEPL6iq5p8Q'
+
+    var map = L.mapbox
+      .map('map'
+      , 'mapbox.streets'
+      , { center: center
+        , zoom: zoom
+        , scrollWheelZoom: false
+        , doubleClickZoom: false
+        }
+      )
+      .on('dblclick', function () {
+        map.setView(center, zoom)
+      })
+
+    // map.scrollWheelZoom.disable()
+
+    var marker = L.marker(center
+      , { icon: L.mapbox.marker.icon({'marker-color': 'ff8888'})
+        , draggable: false
+        , title: query.address || ''
+        }
+      )
+      .addTo(map)
+
+  })
+  </script>
 </body>
 </html>