FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity
BangleApps/apps/osmpoi/osmpoi.html

229 lines
10 KiB
HTML
Raw Normal View History

Create osmpoi.html
2020-04-20 18:39:59 +00:00
<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)};
Update osmpoi.html
2020-04-21 13:31:26 +00:00
var img_nofix = require("heatshrink").decompress(atob("mEwhBC/AH4AS6+sq0AgMrBo8rgICB1mBgIABAoNWAAusDYOBwWBF5IPBldWwAhCGQQJBgOBwNWqsxmIoF64AC1g2ClcGmIvKgGAwGwrcxqtWwItBFYdbw2x2APBG4IqBKgI0CLQIIBDISCBABAlBmOxAAOww1bqtVrY5BBIPVBYMxlYkBKoIFBAAJHBAoI6BQQSwIAANWmJQBAAIyCxmx6xbCBANbFwIhCwuGAAZHCBQKZBSgQvIgNWQQYACDgIHD6tcFwKBBSwIADrgFEGIJiBqASBSBFWrYvGMAIIB2OGJwJdBrYMBwArEAAWAxgwBewQvJwNVF4uMM4IvCquA68rqoqHGgQ3DUIT8BeJNVRAhgCfAWGmPXwExRoIlB2AsB2FbSwSTBAIOwQYLCBSBWFFwgvErYZBXgS+FLgoDCSIRFBwIvLC4WMMoIACqusbIKACEoYCCeAYLDwEAwLBBX5ExXgmG1eGwoCBRwL+BEQVcEYKMCAQxKBqovBC4LvOLYLwC1aoCwqGEIAR1BL4QLEqtWF5RQBF4+M62GF4QnCAAoHBeQILFrmBR5VVKwIvFA4PVw1VR4eAAAIkDA4L3CTIILBwtW1mAL48r1kxc4YADF4KPBF4gpCF4TmCeoYECraOBR5C+DAAjyB1YDB2NV1gPBQQgxDBA8xq1QF5EBV4KOEVIQvBAANbVAMrQoQAKRwREBSAJhBX4y+CLgQACFwewVQJIBmKRD2C4BxlbAwKLBrlbRwQVC1gvGq2FLIWGxiKB1YCBJwUrwRgDeAmMAYQsBrYKBlbkBMIK/Ira2CFgIyBGoOrGoQcB6+BmOAKgIyBFQVbqr0CGwMGXoReHd4aLBRQbuCBAVbJYIcBlcxSYIADYAgRBwARBCQIvGGANV1fVFIiPBTAJeCFwIABwIwBQ4SPCCIJiBKIIuBqAuIF4NWSAKRDAAJIBAAQuDAAKuBmIKBrcxqoCBDwJvCgwuJSAYtEFwMAwOBqEBFgY1D1mBqxZBFgOBBIJsBMYKOJgEBJQJdFgBaDDAIDBUIJWBFAZoEGwMxwvWwC/BMBVWWwK6BrcBEAowBJwLNCwpTBKgIABqqSBDgPV6uGL5TADFwS4GGAUGc4WMfYQABwuFAYJ5CPwOGTQIvJIgOMdQQuHXoWGL4WwGgQzCFgOr1Y8BDwKPKd4XWFxTeCLoYyEFQI6EL4IvBL5MrwGGwC7GLwkBToIlFEwKHBBAqtCRxMBwFVFxkxV4IvLX4QGBq1QF5UGgAuKlYuBKo7oCdobuDq2BFxLJBFxrlCFwwnBFgSOEXxTeBFxdVKAbuEK4erFwgEBriOKqGBFxHXFwerfoOAMAKGEXwmwxmGrdVRxMALxSMBDQNcqtWPgICBGYOFMIaaBCAIRBqAPBF5ILBRg8BgFcFYeBA4IGCA4IoCHoYsBwItKF4UrSAq7BLAgXIwErgIQDwArLGBQuBDYIZPLQIsQGAqSBLoQbUGCquDF1IA/AH4AKA=="));
var img_fix = require("heatshrink").decompress(atob("mEwhBC/AH4A/AH4A/AE0rg4vtq8PF1kHxM7gJesF4Jgrg+IF4M6MFReBF4JgqXoIvDMFJeCF4RgoLwYvDnZgmLwYvEMEpeEF4jBlmYvIMEheFF4pgjXogvGMEReGF407MEBeGF45gfg+IF5rBfLw4vHMDxeIF5BgdLxAvIMDkHFxAvJMDZeJF5JgaLxQvKnZgYLxQvLMC5eLF5bBXmYvWMCxeMF5hgVXpYvNMCheNF5s7MCReNF5xgRg+IFZNersylcHhEPmjBbLw1er1XlkHIhI0CnRgUmQqEKwKnRgIzBiBpBnUICpszryCCFiIyGM4TBRAH4A/AH4A/AH4AFA"));
Create osmpoi.html
2020-04-20 18:39:59 +00:00
// 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>