mirror of https://github.com/espruino/BangleApps
Create osmpoi.html
RenaudG
GitHub
parent
a47ebfaf48
commit
fae5b02277
|
|
@ -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 © <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>
|
||||
Loading…
Reference in New Issue