forked from FOSS/BangleApps
210 lines
8.0 KiB
HTML
210 lines
8.0 KiB
HTML
<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">
|
|
<p>Find the area of interest</p>
|
|
<p>Click <button id="pubfinder" class="btn btn-primary">Find Pubs</button></p>
|
|
<p>If ok, Click <button id="upload" class="btn btn-primary">Upload</button></p>
|
|
</div>
|
|
|
|
<script src="../../core/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 © <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("pubfinder").addEventListener("click", function() {
|
|
//var overpassApiUrl = buildOverpassApiUrl(map, "highway=bus_stop");
|
|
var overpassApiUrl = buildOverpassApiUrl(map, "amenity=pub");
|
|
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("mUyxH+ACYhJDygtYGsqLVF8u02gziGBoyhQ5gwDGRozRGCQydGCgybGCwyZC5gAaGPQwnGRAwpGQ4xwGFYyFDKsrlYxYDCsBmUyg4yXLyUsFwMyq1WAgUsNCRjUmVXroAEq8yMbcllkskwCEkplDmQwDq0sC54xEHQ9RqQAGqIwCFgOBAASYBSgMBltRAA0sgJsOGJeBxAAGwMrgIXIloxOJYNSvl8CwIDCqMBlYxNC4wxQDIOCwVYDIIDBGJ9YwV8rADBwRJCSqAVCAYaVMC4oxCPYYxQSo4xMSpIxPY4T5HY54XIMbIxKgwXKfKjhEllWGJNWlgXJGLNXruCGI+CrtXGKP+GJB9HMZ6VO/wxJcI8lfJclfKAxKfJEAGJIXLGKSvBWYQZCMZbfEqTHBGJYyFfIo1DGJ4tDGJQwCGJB9IMZyVNGIYyEfJQxPfJgwEMgoZJgAxMltRAA0tGJQyEksslkmAQklGINXxDTBFwIDCq8rC4YACC4gwJMowAJldWAAwwBABowIGJ4AYGJIymGBQylGBgyjGBwyhGCAzeF6YycGCwzYF7IzVF7o1PDqYA=="));
|
|
var img_fix = require("heatshrink").decompress(atob("mUyxH+ACYhJDygtYGsqLVF94zaDYkq6wAOlQyYJo2A63VAAIoC2m0GI16My5/H5/V64ABGQIwBGQ+rTKwWHkhiBGIYwDGQ3VZioVIqoiBGAJhEGRFPGSYTIYwQxCGA4yFqodJGKeqSgQwJGQmkGKQSJfAYwLGQfPDxQwRgHVfAi/EAA4xLGQwRLYwb5BABoxQCBcA43G5wABAgIAMEBgxQ0QxB54xB5gAG4xgBBYOiGJ4PMGInPGIhcCGIt4EJoxPvHM5oxBGAnO6xrCGoXMqgxdpwxD5qQFL4QADlQxdgAhBGILIDMYoADEBwwPgCHBfQzHDAAb4NACTIIAA74OACLIIMo7GOACQoBZAoHBHQPNA4QwggGiZBA5B54HBY0DIKMYtUGMMqFYLIGY4jGhZAr6FAAYwiZAgxIY0TIFfQgADvAfR/zISGJTGR/wxRkj6CGJBiSGKL6DGP4xOGSKVDGAwxRGAQxU5oxcGR75DGJEkGCYxPlXM5vPGA/MlQxUGR1OGIL4I5lOGCgyOqgxBShHMqgwVGJt4GJd4GKwyMvHG5vGABAxMGBQyM1mtABWsGC4yLGBYABGDAyKGKwwQGZKVUF6b/OABowWGbAvZGaovdGp4dTA"));
|
|
|
|
var W = g.getWidth(), H = g.getHeight();
|
|
|
|
// 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 = (360-m.heading)*Math.PI/180; // in radians
|
|
if (!isFinite(headingrad)) headingrad=0;
|
|
if (nearest)
|
|
g.drawImage(img_fix,W/2,H/2,{
|
|
rotate: (Math.PI/2)+headingrad-nearestangle,
|
|
scale:3,
|
|
});
|
|
else
|
|
g.drawImage(img_nofix,W/2,H/2,{
|
|
rotate: headingrad,
|
|
scale:2,
|
|
});
|
|
g.clearRect(0,0,W,24).setFontAlign(0,0).setFont("6x8");
|
|
if (fix.fix) {
|
|
g.drawString(nearest ? nearest.name : "---",W/2,4);
|
|
g.setFont("6x8",2);
|
|
g.drawString(nearest ? Math.round(nearestdist)+"m" : "---",W/2,16);
|
|
} else {
|
|
g.drawString(fix.satellites+" satellites",W/2,4);
|
|
}
|
|
});
|
|
Bangle.setCompassPower(1);
|
|
Bangle.setGPSPower(1);
|
|
g.setColor("#fff").setBgColor("#000").clear();`;
|
|
|
|
sendCustomizedApp({
|
|
storage:[
|
|
{name:"beer.app.js", url:"app.js", content:app}
|
|
]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|