mirror of https://github.com/espruino/BangleApps
280 lines
9.5 KiB
HTML
280 lines
9.5 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
|
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
|
crossorigin=""/>
|
|
|
|
<style>
|
|
#svgmap { width: 95%; }
|
|
#map { height: 180px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
|
|
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
|
|
crossorigin=""></script>
|
|
<div id="map"></div>
|
|
|
|
<p>Please select a gpx file OR an area on the map using shift + drag the mouse.</p>
|
|
|
|
gpx file : <input type="file" is="gpx_file" id="fileInput" accept=".gpx">
|
|
<br>
|
|
gps filename : <input type="text" id="gps_file" name="gps_file" maxlength="24">.gps (max 24 characters)
|
|
<br>
|
|
<table>
|
|
<tr>
|
|
<th><bold>OpenstreetMap <a href="https://wiki.openstreetmap.org/wiki/Tags">NODE Tags</a></bold></th>
|
|
</tr>
|
|
<tr>
|
|
<th>color</th><th>key</th><th>value</th>
|
|
</tr>
|
|
<tr>
|
|
<th style="color:red">red</th><th><input type="text" id="key1" name="key1" value="shop"></th><th><input type="text" id="value1" name="value1" value="bakery"></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="color:blue">blue</th><th><input type="text" id="key2" name="key2" value="amenity"></th><th><input type="text" id="value2" name="value2" value="drinking_water"></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="color:cyan">cyan</th><th><input type="text" id="key3" name="key3" value="amenity"></th><th><input type="text" id="value3" name="value3" value="toilets"></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="color:green">green</th><th><input type="text" id="key4" name="key4" value="tourism"></th><th><input type="text" id="value4" name="value4" value="artwork"></th>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>nice tags could be :
|
|
shop/bicycle, amenity/bank, shop/supermarket, leisure/picnic_table, tourism/information, amenity/pharmacy
|
|
</p>
|
|
|
|
<input type="button" id="convert" name="convert" value="Convert" disabled>
|
|
|
|
|
|
<input type="button" id="upload" name="upload" value="Upload" disabled>
|
|
<input type="checkbox" id="autodetect_waypoints" name="autodetect_waypoints" checked/>
|
|
<label for="autodetect_waypoints">detect waypoints</label>
|
|
<input type="checkbox" id="include_elevation" name="include_elevation" checked/>
|
|
<label for="include_elevation">include elevation</label>
|
|
<input type="checkbox" id="ski" name="ski"/>
|
|
<label for="ski">ski</label>
|
|
|
|
<div id="status"></div>
|
|
<div id="svgmap"></div>
|
|
|
|
<script src="../../core/lib/interface.js"></script>
|
|
<script>
|
|
function onInit() {
|
|
}
|
|
</script>
|
|
|
|
|
|
<script type="module">
|
|
|
|
function vec_to_string(vec) {
|
|
let final_string = '';
|
|
for (let i = 0 ; i < vec.length ; i++) {
|
|
final_string += String.fromCharCode(vec[i]);
|
|
}
|
|
return final_string;
|
|
}
|
|
|
|
function display_polygon(map) {
|
|
document.getElementById('upload').disabled = true;
|
|
if (displayed_polygon !== null) {
|
|
displayed_polygon.remove();
|
|
}
|
|
if (displayed_path !== null) {
|
|
displayed_path.remove();
|
|
}
|
|
let polygon = get_polygon(gps_data);
|
|
let min_lat = polygon[0];
|
|
let max_lat = polygon[0];
|
|
let min_lng = polygon[1];
|
|
let max_lng = polygon[1];
|
|
let map_polygon = [];
|
|
for (let i = 0 ; i < polygon.length ; i+=2) {
|
|
map_polygon.push([polygon[i], polygon[i+1]]);
|
|
if (min_lat > polygon[i]) {
|
|
min_lat = polygon[i];
|
|
} else if (max_lat < polygon[i]) {
|
|
max_lat = polygon[i];
|
|
}
|
|
|
|
if (min_lng > polygon[i+1]) {
|
|
min_lng = polygon[i+1];
|
|
} else if (max_lng < polygon[i+1]) {
|
|
max_lng = polygon[i+1];
|
|
}
|
|
}
|
|
displayed_polygon = L.polygon(map_polygon).addTo(map);
|
|
|
|
let polyline = get_polyline(gps_data);
|
|
if (polyline.length > 0) {
|
|
let map_polyline = [];
|
|
for (let i = 0 ; i < polyline.length ; i+= 2) {
|
|
map_polyline.push([polyline[i], polyline[i+1]]);
|
|
}
|
|
displayed_path = L.polyline(map_polyline, {color: 'red'}).addTo(map);
|
|
}
|
|
|
|
map.fitBounds(L.latLngBounds(L.latLng(min_lat, min_lng), L.latLng(max_lat, max_lng)));
|
|
|
|
document.getElementById('convert').disabled = false;
|
|
}
|
|
|
|
import init, { disable_elevation, load_gps_from_string, get_polygon, get_polyline, request_map, get_gps_content, get_gps_map_svg, gps_from_area } from "./pkg/gps.js";
|
|
console.log("imported wasm");
|
|
|
|
// start map
|
|
L.Map.BoxPrinter = L.Map.BoxZoom.extend({
|
|
_onMouseUp: function (e) {
|
|
|
|
if ((e.which !== 1) && (e.button !== 1)) { return; }
|
|
|
|
this._finish();
|
|
|
|
if (!this._moved) { return; }
|
|
// Postpone to next JS tick so internal click event handling
|
|
// still see it as "moved".
|
|
setTimeout(L.bind(this._resetState, this), 0);
|
|
|
|
var bounds = new L.LatLngBounds(
|
|
this._map.containerPointToLatLng(this._startPoint),
|
|
this._map.containerPointToLatLng(this._point));
|
|
let south_west = bounds.getSouthWest();
|
|
let north_east = bounds.getNorthEast();
|
|
let ski = document.getElementById("ski").checked;
|
|
console.log("ski", ski);
|
|
gps_data = gps_from_area(south_west.lng, south_west.lat, north_east.lng, north_east.lat, ski);
|
|
document.getElementById('gps_file').value = "";
|
|
display_polygon(this._map);
|
|
|
|
this._map.fire('boxzoomend', {boxZoomBounds: bounds});
|
|
}
|
|
});
|
|
L.Map.mergeOptions({boxPrinter: true});
|
|
L.Map.addInitHook('addHandler', 'boxPrinter', L.Map.BoxPrinter);
|
|
|
|
// now the interactions
|
|
let status = document.getElementById("status");
|
|
let gps_data = null;
|
|
let gps_filename = null;
|
|
let gps_content = null;
|
|
let displayed_polygon = null;
|
|
let displayed_path = null;
|
|
|
|
init().then(() => {
|
|
|
|
var map = L.map('map').setView([45.1825, 5.6731], 1);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
|
|
document
|
|
.getElementById("fileInput")
|
|
.addEventListener("change", function selectedFileChanged() {
|
|
document.getElementById('convert').disabled = true;
|
|
document.getElementById('upload').disabled = true;
|
|
if (this.files.length === 0) {
|
|
console.log("No file selected.");
|
|
return;
|
|
}
|
|
status.innerHTML = "reading file";
|
|
|
|
let gpx_filename = this.files[0].name;
|
|
if (gps_filename === null || gps_filename == "") {
|
|
if (gpx_filename.length <= 28) {
|
|
gps_filename = gpx_filename.slice(0, gpx_filename.length - 4);
|
|
document.getElementById('gps_file').value = gps_filename;
|
|
}
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function fileReadCompleted() {
|
|
console.log("reading file completed");
|
|
status.innerHTML = "file reading completed";
|
|
let gpx_content = reader.result;
|
|
|
|
let autodetect_waypoints = document.getElementById("autodetect_waypoints").checked;
|
|
gps_data = load_gps_from_string(gpx_content, autodetect_waypoints);
|
|
display_polygon(map);
|
|
};
|
|
reader.readAsText(this.files[0]);
|
|
});
|
|
|
|
document
|
|
.getElementById("convert")
|
|
.addEventListener('click', function() {
|
|
console.log("starting conversion");
|
|
document.getElementById('convert').disabled = true;
|
|
document.getElementById('upload').disabled = true;
|
|
status.innerHTML = "please wait, converting file";
|
|
let key1 = document.getElementById('key1').value;
|
|
let key2 = document.getElementById('key2').value;
|
|
let key3 = document.getElementById('key3').value;
|
|
let key4 = document.getElementById('key4').value;
|
|
let value1 = document.getElementById('value1').value;
|
|
let value2 = document.getElementById('value2').value;
|
|
let value3 = document.getElementById('value3').value;
|
|
let value4 = document.getElementById('value4').value;
|
|
request_map(gps_data, key1, value1, key2, value2, key3, value3, key4, value4).then(
|
|
() => {
|
|
|
|
let include_elevation = document.getElementById("include_elevation").checked;
|
|
if (!include_elevation) {
|
|
disable_elevation(gps_data);
|
|
}
|
|
gps_content = get_gps_content(gps_data);
|
|
status.innerHTML = "file converted (" + gps_content.length + " bytes)";
|
|
let svg_string = get_gps_map_svg(gps_data);
|
|
let img = document.getElementById("svgmap");
|
|
img.innerHTML = svg_string;
|
|
if (gps_filename !== null) {
|
|
document.getElementById('upload').disabled = false;
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
document
|
|
.getElementById("gps_file")
|
|
.addEventListener('change', function() {
|
|
gps_filename = document.getElementById("gps_file").value;
|
|
if (gps_filename == "") {
|
|
document.getElementById("upload").disabled = true;
|
|
} else {
|
|
if (gps_content !== null) {
|
|
document.getElementById("upload").disabled = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
document
|
|
.getElementById("upload")
|
|
.addEventListener('click', function() {
|
|
document.getElementById('upload').disabled = true;
|
|
status.innerHTML = "uploading file";
|
|
console.log("uploading");
|
|
let gps_string = vec_to_string(gps_content);
|
|
Util.writeStorage(gps_filename + ".gps", gps_string, () => {
|
|
status.innerHTML = "Checking upload";
|
|
Util.readStorage(gps_filename + ".gps", uploaded_content => {
|
|
if (uploaded_content == gps_string) {
|
|
status.innerHTML = `${gps_filename}.gps uploaded`;
|
|
console.log("DONE");
|
|
} else {
|
|
status.innerHTML = "Upload FAILED";
|
|
document.getElementById('upload').disabled = false;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|