From fae5b02277014aae97e31109ffd01adc66f04430 Mon Sep 17 00:00:00 2001
From: RenaudG <34276398+renaudgweb@users.noreply.github.com>
Date: Mon, 20 Apr 2020 20:39:59 +0200
Subject: [PATCH] Create osmpoi.html

---
 apps/osmpoi/osmpoi.html | 228 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 apps/osmpoi/osmpoi.html
diff --git a/apps/osmpoi/osmpoi.html b/apps/osmpoi/osmpoi.html
new file mode 100644
index 000000000..56a1f8eb6
--- /dev/null
+++ b/apps/osmpoi/osmpoi.html
@@ -0,0 +1,228 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      html, body, #map {
+        height: 100%;
+        width: 100%;
+      }
+      #map { z-index: 1; }
+      #controls {
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid black;
+        position:absolute;
+        right:0px;top:0px;
+        background-color: rgb(255, 255, 255);
+        z-index: 100;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map">
+    </div>
+
+    <div id="controls">
+      <select id="amenity">
+        <option value="drinking_water">Drinking Water</option>
+        <option value="bicycle_parking">Bicycle Park</option>
+        <option value="post_box">Post Box</option>
+        <option value="bar">Bars</option>
+        <option value="bbq">Barbecue</option>
+        <option value="cafe">Café</option>
+        <option value="fast_food">Fast food</option>
+        <option value="restaurant">restaurant</option>
+        <option value="bicycle_repair_station">Bicycle Repair</option>
+        <option value="bicycle_rental">Bicycle rental</option>
+        <option value="bus_station">Bus station</option>
+        <option value="atm">Bank</option>
+        <option value="pharmacy">Pharmacy</option>
+        <option value="interner_cafe">Cybercafé</option>
+      </select>
+      <p>Click <button id="poi" class="btn btn-primary">Find P.O.I.</button></p>
+      <p>If ok, Click <button id="upload" class="btn btn-primary">Upload</button></p>
+    </div>
+
+    <script src="../../lib/customize.js"></script>
+    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://unpkg.com/osmtogeojson@2.2.12/osmtogeojson.js"></script>
+
+    <script>
+ /*
+
+      https://overpass-turbo.eu/ to check queries.
+      Run:
+
+      node
+        ({{bbox}});
+      out;
+
+      Over the area you're interested in, click on the POI and find out
+      what you need to search for, eg.
+
+        node
+        [amenity=pub]
+        ({{bbox}});
+      out;
+
+*/
+
+      var map = L.map('map').locate({setView: true, maxZoom: 16});
+      var features = [];
+      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
+      }).addTo(map);
+      function buildOverpassApiUrl(map, overpassQuery) {
+        var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
+        var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
+        var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
+        var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
+        var query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
+        var baseUrl = 'https://overpass-api.de/api/interpreter';
+        var resultUrl = baseUrl + query;
+        return resultUrl;
+      }
+
+      document.getElementById("poi").addEventListener("click", function() {
+        //var overpassApiUrl = buildOverpassApiUrl(map, "highway=bus_stop");
+        var poi = document.getElementById("amenity").options[document.getElementById("amenity").selectedIndex].value;
+        var overpassApiUrl = buildOverpassApiUrl(map, "amenity="+poi);
+        var req = new XMLHttpRequest();
+        req.responseType = 'json';
+        req.onreadystatechange = function() {
+          console.log("XMLHttpRequest", this.readyState);
+          if (this.readyState == 4) {
+            var osmDataAsJson = req.response;
+            features = [];
+            if (osmDataAsJson.elements) {
+              osmDataAsJson.elements.forEach(function(el) {
+                if (el.type!="node") return;
+                features.push({lat:el.lat, lon:el.lon,name:el.tags.name});
+              });
+            }
+
+            var resultAsGeojson = osmtogeojson(osmDataAsJson);
+            var resultLayer = L.geoJson(resultAsGeojson, {
+              style: function (feature) {
+                return {color: "#ff0000"};
+              },
+              filter: function (feature, layer) {
+                var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === "Polygon");
+                if (isPolygon) {
+                  feature.geometry.type = "Point";
+                  var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
+                  feature.geometry.coordinates = [ polygonCenter.lat, polygonCenter.lng ];
+                }
+                return true;
+              },
+              onEachFeature: function (feature, layer) {
+                var popupContent = "";
+                popupContent = popupContent + "<dt>@id</dt><dd>" + feature.properties.type + "/" + feature.properties.id + "</dd>";
+                var keys = Object.keys(feature.properties.tags);
+                keys.forEach(function (key) {
+                  popupContent = popupContent + "<dt>" + key + "</dt><dd>" + feature.properties.tags[key] + "</dd>";
+                });
+                popupContent = popupContent + "</dl>"
+                layer.bindPopup(popupContent);
+              }
+            }).addTo(map);
+          }
+        };
+        req.open("GET", overpassApiUrl, true);
+        req.send();
+      });
+      document.getElementById("upload").addEventListener("click", function() {
+        var app = `var features = ${JSON.stringify(features)};
+var img_nofix = require("heatshrink").decompress(atob("mEwxH+AH4A0PgYurg9kr0rGM4nBg9dsgADmUHGUYtHAAddGIJcgFpIxEMTsAlYtMAAZiaLh4AFmQwXLiSTaLiosBnMymUrGCYTBAAgvPCgjwaMh4raF/4v/F/4vUg4vulZgDgAAIF8EyEQUAh0cAAkVisHGA4+HF6gVBiwwFjkONo0HAAMOAAIvTnIhEiovMFQQADNgYvQroUDg4uGjj9EF448DF6a+HAAS+EF5CQCF6SMIeAQvFXYYwHF59eLpSOBF4hgKGAIvPskAFxKOFF80VM4KOFSBs5F6EWRY4xBF43+F5UyF6DuEizZBKwIuHSBQvXdIwvKMYsHlYvQW4IuPYAYRBMggvRgIvCFxwwCTYZlEg4vPlcHjkVFx6WJF6YuXMoTwCF58yVgIvXY4YvQrqqDGDAvvPYIvPsguaYQYv/F7owBF/4vfg4AGTIIAHF7gA/AH4AwA="));
+var img_fix = require("heatshrink").decompress(atob("mEwxH+AH4A/AH4A/AG2JnYv/FzovBGFgvuFwIvCGFQvuFwQvDGFAvuFwYvEGEwvuFwgvFGEgvuFwovGGEQvuFwwvHGEAvuFw4vIGDwvuFxAvJGDgvuFxIvKGDQvuFxQvLGDAvuFxYvMGCwvuFxgvNGCgvuFxovOGCQvuFxwvPGCAvuFx4vQGBwtOCQYvbFRwAJGCwqTGh4uMFS40LEcIA/AH4A/ACQA="));
+
+// https://github.com/Leaflet/Leaflet/blob/master/src/geo/projection/Projection.SphericalMercator.js
+function project(latlong) {
+  var d = Math.PI / 180,
+      max = 85.0511287798,
+      R = 6378137, // earth radius in m
+      lat = Math.max(Math.min(max, latlong.lat), -max),
+      sin = Math.sin(lat * d);
+  return {x:R * latlong.lon * d,
+          y:R * Math.log((1 + sin) / (1 - sin)) / 2};
+}
+
+features.forEach(function(f) {
+  f.p = project(f);
+});
+var fix = {fix:false,satellites:0};
+var nearest = undefined;
+var nearestangle = 0;
+var nearestdist = 0;
+
+Bangle.on('GPS', function(f) {
+  fix = f;
+  fix.p = project(fix);
+  nearest = undefined;
+  nearestangle = 0;
+  nearestdist = 5000; // 5km
+  features.forEach(function(f) {
+    var dx = f.p.x - fix.p.x;
+    var dy = f.p.y - fix.p.y;
+    var d = Math.sqrt(dx*dx + dy*dy);
+    if (d<nearestdist) {
+      nearestdist = d;
+      nearest = f;
+    }
+  });
+  if (nearest) {
+    var dx = nearest.p.x - fix.p.x;
+    var dy = nearest.p.y - fix.p.y;
+    nearestangle = Math.atan2(dy,dx);
+  }
+});
+
+Bangle.on('mag', function(m) {
+  if (!Bangle.isLCDOn()) return;
+  var headingrad = m.heading*Math.PI/180; // in radians
+  if (!isFinite(headingrad)) headingrad=0;
+  if (nearest)
+    g.drawImage(img_fix,120,120,{
+      rotate: (Math.PI/2)+headingrad-nearestangle,
+      scale:3,
+    });
+  else
+    g.drawImage(img_nofix,120,120,{
+      rotate: headingrad,
+      scale:2,
+    });
+  g.clearRect(60,0,180,24);
+  g.setFontAlign(0,0);
+  g.setFont("6x8");
+  if (fix.fix) {
+    g.drawString(nearest ? nearest.name : "---",120,4);
+    g.setFont("6x8",2);
+    g.drawString(nearest ? Math.round(nearestdist)+"m" : "---",120,16);
+  } else {
+    g.drawString(fix.satellites+" satellites",120,4);
+  }
+});
+Bangle.setCompassPower(1);
+Bangle.setGPSPower(1);
+g.clear();`;
+var icon = `require("heatshrink").decompress(atob("mEwxH+AH4A0PgYurg9kr0rGM4nBg9dsgADmUHGUYtHAAddGIJcgFpIxEMTsAlYtMAAZiaLh4AFmQwXLiSTaLiosBnMymUrGCYTBAAgvPCgjwaMh4raF/4v/F/4vUg4vulZgDgAAIF8EyEQUAh0cAAkVisHGA4+HF6gVBiwwFjkONo0HAAMOAAIvTnIhEiovMFQQADNgYvQroUDg4uGjj9EF448DF6a+HAAS+EF5CQCF6SMIeAQvFXYYwHF59eLpSOBF4hgKGAIvPskAFxKOFF80VM4KOFSBs5F6EWRY4xBF43+F5UyF6DuEizZBKwIuHSBQvXdIwvKMYsHlYvQW4IuPYAYRBMggvRgIvCFxwwCTYZlEg4vPlcHjkVFx6WJF6YuXMoTwCF58yVgIvXY4YvQrqqDGDAvvPYIvPsguaYQYv/F7owBF/4vfg4AGTIIAHF7gA/AH4AwA="))`;
+
+        sendCustomizedApp({
+          storage:[
+            {name:"osmpoi.app.js", content:app},
+            {name:"osmpoi.img", content:icon, evaluate:true},
+          ]
+        });
+      });
+
+    </script>
+  </body>
+</html>
