From b3b185eda1c61f1142481465802181d8bf9968c2 Mon Sep 17 00:00:00 2001
From: ctyo <ctyo@live.jp>
Date: Fri, 8 May 2020 20:29:18 +0900
Subject: [PATCH 1/3] add geocode and jump result point.

---
 locate/index.html | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/locate/index.html b/locate/index.html
index cff870f..d460138 100644
--- a/locate/index.html
+++ b/locate/index.html
@@ -18,7 +18,7 @@
       <script>
         //make a map using osm tiles
         var map = L.map('map').setView([16.73, -169.52], 14);
-        L.tileLayer('http://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           maxZoom: 19,
           attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributers'
         }).addTo(map);
@@ -47,6 +47,8 @@
 
     </div>
     <div id="sidebar" style="float:right; width:25%">
+      <input id="saerchquery" type="text" placeholder="lat,lon or word" style="width:60%; margin: 5px">
+      <button id="saerch">search</button>
       <pre id="properties"></pre>
     </div>
   </div>
@@ -202,6 +204,34 @@
 
     //hook up the callback for the text box changing
     map.on('click', onClick);
+
+
+    // geocode and jump result point
+    $('#saerch').on('click', ()=>{
+      const query = $('#saerchquery').val();
+      if (query === '') {
+        return;
+      }
+      $.ajax({
+        type: 'GET',
+        url: 'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURI(query),
+        dataType: 'jsonp',
+        jsonp: 'json_callback',
+      }).done((data) => {
+        if (data.length === 0) {
+          alert('no result search data.')
+        }
+
+        let e = {};
+        e.latlng = {
+          lat : data[0].lat,
+          lng : data[0].lon,
+        };
+        onClick(e);
+      });
+
+      // ?q=%E5%90%8D%E5%8F%A4%E5%B1%8B%E5%B8%82&format=json
+    })
   </script>
 </body>
 </html>

From adc2bfe1b5c296469a82a8cd71cab8338022cfef Mon Sep 17 00:00:00 2001
From: ctyo <ctyo@live.jp>
Date: Fri, 8 May 2020 20:47:24 +0900
Subject: [PATCH 2/3] add visualize shape data.

---
 locate/index.html | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/locate/index.html b/locate/index.html
index d460138..5d1a1fa 100644
--- a/locate/index.html
+++ b/locate/index.html
@@ -14,7 +14,7 @@
       <div id="map" style="height: 800px"></div>
       <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
       <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
-
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.0/polyline.min.js"></script>
       <script>
         //make a map using osm tiles
         var map = L.map('map').setView([16.73, -169.52], 14);
@@ -80,9 +80,28 @@
         return y;
       }
     };
+
+    var shapes = [];
     function clickGroup(event) {
-      var printed = pretty.print(event.target.feature.properties.edges);
+      var edges = event.target.feature.properties.edges;
+      // print properties
+      var printed = pretty.print(edges);
       $('#properties').html(printed);
+
+      // remove before add shape
+      if (shapes.length > 0) {
+        shapes.map(s=>{
+          s.removeFrom(map);
+        });
+        shapes = [];
+      }
+      // print shape
+      edges.map(edge=>{
+        var shape = L.geoJson(polyline.toGeoJSON(edge.edge_info.shape, 6));
+        shape.addTo(map);
+        shapes.push(shape);
+      });
+
       L.DomEvent.stopPropagation(event);
     }
 

From 155e8a3dea6165e370934cde7399f6c4f01859a7 Mon Sep 17 00:00:00 2001
From: ctyo <ctyo@live.jp>
Date: Mon, 11 May 2020 09:22:10 +0900
Subject: [PATCH 3/3] fix merge error

---
 locate/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locate/index.html b/locate/index.html
index d821743..c543c49 100644
--- a/locate/index.html
+++ b/locate/index.html
@@ -255,7 +255,7 @@
     }
 
     //hook up the callback for the text box changing
-    map.on('click', onClick);
+    map.on('click', onMapClick);
 
 
     // geocode and jump result point
@@ -279,7 +279,7 @@
           lat : data[0].lat,
           lng : data[0].lon,
         };
-        onClick(e);
+        onMapClick(e);
       });
 
     });