2020-04-07 20:41:57 +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">
|
2022-01-12 13:54:21 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.css"/>
|
2020-04-07 20:41:57 +00:00
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2022-11-25 15:34:51 +00:00
|
|
|
html, body, #map, #mapsLoaded, #mapContainer {
|
|
|
|
|
position: relative;
|
2020-04-07 20:41:57 +00:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
#maptiles {
|
|
|
|
|
width: 256px;
|
|
|
|
|
height: 256px;
|
|
|
|
|
}
|
2022-11-25 15:34:51 +00:00
|
|
|
.tile-title {
|
|
|
|
|
font-weight:bold;
|
|
|
|
|
font-size: 125%;
|
|
|
|
|
}
|
|
|
|
|
.tile-map {
|
|
|
|
|
width: 128px;
|
|
|
|
|
height: 128px;
|
|
|
|
|
}
|
2020-04-07 20:41:57 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-11-25 15:34:51 +00:00
|
|
|
<div id="mapsLoadedContainer">
|
2020-04-07 20:41:57 +00:00
|
|
|
</div>
|
2022-11-25 15:34:51 +00:00
|
|
|
<div id="mapContainer">
|
|
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="controls">
|
2024-01-27 09:15:31 +00:00
|
|
|
<div style="display:inline-block;text-align:left;vertical-align: top;" id="3bitdiv">
|
|
|
|
|
<input type="checkbox" id="3bit"></input><span>3 bit</span>
|
|
|
|
|
<br>
|
|
|
|
|
<input type="checkbox" id="preview"><span>Preview</span>
|
|
|
|
|
</div>
|
2022-11-25 15:34:51 +00:00
|
|
|
<div class="form-group" style="display:inline-block;">
|
|
|
|
|
<select class="form-select" id="mapSize">
|
2022-11-30 16:54:27 +00:00
|
|
|
<option value="4">Small (4x4)</option>
|
|
|
|
|
<option value="5" selected>Medium (5x5)</option>
|
|
|
|
|
<option value="7">Large (7x7)</option>
|
|
|
|
|
<option value="10">XL (10x10)</option>
|
|
|
|
|
<option value="15">XXL (15x15)</option>
|
2022-11-25 15:34:51 +00:00
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="getmap" class="btn btn-primary">Get Map</button><button class="btn" onclick="showLoadedMaps()">Map List</button><br/>
|
|
|
|
|
<canvas id="maptiles" style="display:none"></canvas>
|
|
|
|
|
<div id="uploadbuttons" style="display:none"><button id="upload" class="btn btn-primary">Upload</button>
|
2022-11-30 16:54:27 +00:00
|
|
|
<button id="cancel" class="btn">Cancel</button>
|
|
|
|
|
<span id="mapstats"></span></div>
|
2022-11-25 15:34:51 +00:00
|
|
|
</div>
|
2020-04-07 20:41:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
<script src="../../core/lib/interface.js"></script>
|
2020-04-07 20:41:57 +00:00
|
|
|
<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>
|
2022-11-21 12:16:27 +00:00
|
|
|
<script src="../../webtools/heatshrink.js"></script>
|
|
|
|
|
<script src="../../webtools/imageconverter.js"></script>
|
2022-01-12 13:54:21 +00:00
|
|
|
<script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
|
2023-06-30 15:41:58 +00:00
|
|
|
<script src="imagefilter.js"></script>
|
2020-04-07 20:41:57 +00:00
|
|
|
<script>
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
|
|
TODO:
|
|
|
|
|
|
|
|
|
|
* Could maybe use palettised output?
|
|
|
|
|
* Could potentially use a custom 16 color palette?
|
|
|
|
|
* Allow user to choose size of map area to be uploaded (small/med/large)
|
|
|
|
|
* What is faster? Storing as a compressed image and decompressing, or storing decompressed?
|
|
|
|
|
|
|
|
|
|
*/
|
2022-03-17 08:28:55 +00:00
|
|
|
var TILESIZE = 96; // Size of our tiles
|
|
|
|
|
var OSMTILESIZE = 256; // Size of openstreetmap tiles
|
2020-04-08 20:34:40 +00:00
|
|
|
/* Can see possible tiles on http://leaflet-extras.github.io/leaflet-providers/preview/
|
|
|
|
|
However some don't allow cross-origin use */
|
2022-07-21 14:12:39 +00:00
|
|
|
//var TILELAYER = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; // simple, high contrast, TOO SLOW
|
2020-04-08 20:34:40 +00:00
|
|
|
//var TILELAYER = 'http://a.tile.stamen.com/toner/{z}/{x}/{y}.png'; // black and white
|
2023-04-25 09:09:07 +00:00
|
|
|
var TILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
|
|
|
var PREVIEWTILELAYER = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
|
2021-12-03 12:04:40 +00:00
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
var loadedMaps = [];
|
|
|
|
|
|
2021-12-03 12:04:40 +00:00
|
|
|
// Tiles used for Bangle.js itself
|
|
|
|
|
var bangleTileLayer = L.tileLayer(TILELAYER, {
|
|
|
|
|
maxZoom: 18,
|
2022-09-23 07:37:38 +00:00
|
|
|
attribution: 'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
2021-12-03 12:04:40 +00:00
|
|
|
});
|
|
|
|
|
// Tiles used for the may the user sees (faster)
|
|
|
|
|
var previewTileLayer = L.tileLayer(PREVIEWTILELAYER, {
|
2020-04-07 20:41:57 +00:00
|
|
|
maxZoom: 18,
|
2022-09-23 07:37:38 +00:00
|
|
|
attribution: 'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
2020-04-07 20:41:57 +00:00
|
|
|
});
|
2020-04-08 20:34:40 +00:00
|
|
|
// Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
|
|
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
// Create map and try and set the location to where the browser thinks we are
|
|
|
|
|
var map = L.map('map').locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
|
|
|
|
|
previewTileLayer.addTo(map);
|
|
|
|
|
|
2022-03-17 08:28:55 +00:00
|
|
|
// Search box:
|
|
|
|
|
const searchProvider = new window.GeoSearch.OpenStreetMapProvider();
|
|
|
|
|
const searchControl = new GeoSearch.GeoSearchControl({
|
|
|
|
|
provider: searchProvider,
|
|
|
|
|
style: 'button',
|
|
|
|
|
updateMap: true,
|
|
|
|
|
autoClose: true,
|
|
|
|
|
showMarker: false,
|
|
|
|
|
keepResult: true,
|
|
|
|
|
autoComplete: false
|
|
|
|
|
});
|
|
|
|
|
map.addControl(searchControl);
|
|
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
// ---------------------------------------- Run at startup
|
2022-03-17 08:28:55 +00:00
|
|
|
function onInit(device) {
|
|
|
|
|
if (device && device.info && device.info.g) {
|
2023-08-07 11:22:40 +00:00
|
|
|
// On 3 bit devices, 3 bit is the best way
|
|
|
|
|
// still allow 8 bit as it makes zoom out much nicer
|
2022-03-17 08:28:55 +00:00
|
|
|
if (device.info.g.bpp==3) {
|
|
|
|
|
document.getElementById("3bit").checked = true;
|
2023-08-07 11:22:40 +00:00
|
|
|
//document.getElementById("3bitdiv").style = "display:none";
|
2022-03-17 08:28:55 +00:00
|
|
|
}
|
|
|
|
|
}
|
2022-11-25 15:34:51 +00:00
|
|
|
|
|
|
|
|
showLoadedMaps();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showLoadedMaps() {
|
|
|
|
|
document.getElementById("mapsLoadedContainer").style.display = "";
|
|
|
|
|
document.getElementById("mapContainer").style.display = "none";
|
|
|
|
|
|
|
|
|
|
Util.showModal("Loading maps...");
|
|
|
|
|
let mapsLoadedContainer = document.getElementById("mapsLoadedContainer");
|
|
|
|
|
mapsLoadedContainer.innerHTML = "";
|
|
|
|
|
loadedMaps = [];
|
|
|
|
|
|
|
|
|
|
Puck.write(`\x10Bluetooth.println(require("Storage").list(/openstmap\\.\\d+\\.json/))\n`,function(files) {
|
|
|
|
|
console.log("MAPS:",files);
|
|
|
|
|
let promise = Promise.resolve();
|
|
|
|
|
files.trim().split(",").forEach(filename => {
|
|
|
|
|
if (filename=="") return;
|
|
|
|
|
promise = promise.then(() => new Promise(resolve => {
|
2023-11-23 12:52:48 +00:00
|
|
|
Util.readStorageJSON(filename, mapInfo => {
|
2023-11-24 08:31:12 +00:00
|
|
|
console.log(filename + " => " + JSON.stringify(mapInfo));
|
2022-11-25 15:34:51 +00:00
|
|
|
let mapNumber = filename.match(/\d+/)[0]; // figure out what map number we are
|
|
|
|
|
loadedMaps[mapNumber] = mapInfo;
|
|
|
|
|
if (mapInfo!==undefined) {
|
|
|
|
|
let latlon = L.latLng(mapInfo.lat, mapInfo.lon);
|
|
|
|
|
mapsLoadedContainer.innerHTML += `
|
|
|
|
|
<div class="tile">
|
|
|
|
|
<div class="tile-icon">
|
|
|
|
|
<div class="tile-map" id="tile-map-${mapNumber}">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-content">
|
|
|
|
|
<p class="tile-title">Map ${mapNumber}</p>
|
|
|
|
|
<p class="tile-subtitle">${mapInfo.w*mapInfo.h} Tiles (${((mapInfo.imgx*mapInfo.imgy)>>11).toFixed(0)}k)</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-action">
|
|
|
|
|
<button class="btn btn-primary" onclick="onMapDelete(${mapNumber})">Delete</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
2022-12-01 13:47:48 +00:00
|
|
|
setTimeout(function() {
|
|
|
|
|
let map = L.map(`tile-map-${mapNumber}`);
|
|
|
|
|
L.tileLayer(PREVIEWTILELAYER, {
|
|
|
|
|
maxZoom: 18
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
let marker = new L.marker(latlon).addTo(map);
|
|
|
|
|
map.fitBounds(latlon.toBounds(2000/*meters*/), {animation: false});
|
2023-06-28 09:08:19 +00:00
|
|
|
}, 500);
|
2022-11-25 15:34:51 +00:00
|
|
|
}
|
|
|
|
|
resolve();
|
|
|
|
|
});
|
|
|
|
|
}));
|
|
|
|
|
});
|
|
|
|
|
promise = promise.then(() => new Promise(resolve => {
|
|
|
|
|
if (!loadedMaps.length) {
|
|
|
|
|
mapsLoadedContainer.innerHTML += `
|
|
|
|
|
<div class="tile">
|
|
|
|
|
<div class="tile-icon">
|
|
|
|
|
<div class="tile-map">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-content">
|
|
|
|
|
<p class="tile-title">No Maps Loaded</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-action">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
mapsLoadedContainer.innerHTML += `
|
|
|
|
|
<div class="tile">
|
|
|
|
|
<div class="tile-icon">
|
|
|
|
|
<div class="tile-map">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-content">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tile-action">
|
|
|
|
|
<button class="btn btn-primary" onclick="showMap()">Add Map</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
Util.hideModal();
|
|
|
|
|
}));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onMapDelete(mapNumber) {
|
|
|
|
|
console.log("delete", mapNumber);
|
|
|
|
|
Util.showModal(`Erasing map ${mapNumber}...`);
|
|
|
|
|
Util.eraseStorage(`openstmap.${mapNumber}.json`, function() {
|
|
|
|
|
Util.eraseStorage(`openstmap.${mapNumber}.img`, function() {
|
|
|
|
|
Util.hideModal();
|
|
|
|
|
showLoadedMaps();
|
|
|
|
|
});
|
|
|
|
|
});
|
2022-03-17 08:28:55 +00:00
|
|
|
}
|
|
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
function showMap() {
|
|
|
|
|
document.getElementById("mapsLoadedContainer").style.display = "none";
|
|
|
|
|
document.getElementById("mapContainer").style.display = "";
|
|
|
|
|
document.getElementById("maptiles").style.display="none";
|
|
|
|
|
document.getElementById("uploadbuttons").style.display="none";
|
2023-05-17 09:38:21 +00:00
|
|
|
map.invalidateSize();
|
|
|
|
|
map.locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
|
2022-11-25 15:34:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// -----------------------------------------------------
|
2020-04-08 20:22:51 +00:00
|
|
|
var mapFiles = [];
|
2020-04-07 20:41:57 +00:00
|
|
|
|
2022-11-25 15:34:51 +00:00
|
|
|
// convert canvas into an actual tiled image file
|
|
|
|
|
function tilesLoaded(ctx, width, height, mapImageFile) {
|
2022-03-17 08:28:55 +00:00
|
|
|
var options = {
|
|
|
|
|
compression:false, output:"raw",
|
|
|
|
|
mode:"web"
|
|
|
|
|
};
|
2021-06-11 10:34:05 +00:00
|
|
|
if (document.getElementById("3bit").checked) {
|
|
|
|
|
options = {
|
2021-06-21 12:46:16 +00:00
|
|
|
compression:false, output:"raw",
|
2022-01-19 15:13:13 +00:00
|
|
|
mode:"3bit",
|
2022-11-25 17:05:30 +00:00
|
|
|
diffusion:"bayer2"
|
2021-06-11 10:34:05 +00:00
|
|
|
};
|
|
|
|
|
}
|
2023-08-07 11:22:40 +00:00
|
|
|
/* Go through all the data beforehand and
|
|
|
|
|
turn the saturation up to maximum, so if thresholded to 3 bits it
|
|
|
|
|
works a lot better */
|
|
|
|
|
var imageData = ctx.getImageData(0,0,width,height);
|
|
|
|
|
var dstData = ctx.createImageData(width, height);
|
|
|
|
|
var filterOptions = {};
|
|
|
|
|
imageFilterFor3BPP(imageData, dstData, filterOptions);
|
|
|
|
|
ctx.putImageData(dstData,0,0);
|
|
|
|
|
|
2021-06-11 10:34:05 +00:00
|
|
|
console.log("Compression options", options);
|
2020-04-07 20:41:57 +00:00
|
|
|
var w = Math.round(width / TILESIZE);
|
|
|
|
|
var h = Math.round(height / TILESIZE);
|
2022-07-21 14:45:17 +00:00
|
|
|
var tiledImage;
|
2020-04-07 20:41:57 +00:00
|
|
|
for (var y=0;y<h;y++) {
|
|
|
|
|
for (var x=0;x<w;x++) {
|
|
|
|
|
var imageData = ctx.getImageData(x*TILESIZE, y*TILESIZE, TILESIZE, TILESIZE);
|
|
|
|
|
var rgba = imageData.data;
|
|
|
|
|
options.rgbaOut = rgba;
|
|
|
|
|
options.width = TILESIZE;
|
|
|
|
|
options.height = TILESIZE;
|
|
|
|
|
var imgstr = imageconverter.RGBAtoString(rgba, options);
|
2024-01-27 09:15:31 +00:00
|
|
|
if (document.getElementById("preview").checked) {
|
|
|
|
|
ctx.putImageData(imageData,x*TILESIZE, y*TILESIZE); // write preview
|
|
|
|
|
}
|
2020-04-07 20:41:57 +00:00
|
|
|
/*var compress = 'require("heatshrink").decompress('
|
|
|
|
|
if (!imgstr.startsWith(compress)) throw "Data in wrong format";
|
|
|
|
|
imgstr = imgstr.slice(compress.length,-1);*/
|
2022-07-21 14:45:17 +00:00
|
|
|
if (tiledImage) tiledImage += imgstr.substr(3); // skip header
|
|
|
|
|
else tiledImage = imgstr; // for first image, keep the header
|
2020-04-07 20:41:57 +00:00
|
|
|
}
|
|
|
|
|
}
|
2022-07-21 14:45:17 +00:00
|
|
|
return [{
|
2022-11-25 15:34:51 +00:00
|
|
|
name:mapImageFile,
|
2022-07-21 14:45:17 +00:00
|
|
|
content:tiledImage
|
|
|
|
|
}];
|
2020-04-07 20:41:57 +00:00
|
|
|
}
|
|
|
|
|
|
2020-04-08 20:22:51 +00:00
|
|
|
document.getElementById("getmap").addEventListener("click", function() {
|
2022-11-25 15:34:51 +00:00
|
|
|
|
|
|
|
|
var MAPTILES = parseInt(document.getElementById("mapSize").value);
|
|
|
|
|
var MAPSIZE = TILESIZE*MAPTILES; /// Size of map we download to Bangle in pixels
|
|
|
|
|
var OSMTILECOUNT = (Math.ceil((MAPSIZE+TILESIZE) / OSMTILESIZE)+1); // how many tiles do we download from OSM in each direction
|
|
|
|
|
|
2020-04-07 20:41:57 +00:00
|
|
|
var zoom = map.getZoom();
|
2021-12-03 12:04:40 +00:00
|
|
|
var centerlatlon = map.getBounds().getCenter();
|
2022-11-30 16:54:27 +00:00
|
|
|
var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE); // the center of our map
|
|
|
|
|
// ox/oy = offset in pixels
|
|
|
|
|
var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE);
|
|
|
|
|
var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE);
|
|
|
|
|
// adjust offset because we want to center our map
|
|
|
|
|
ox -= MAPTILES * TILESIZE / 2;
|
|
|
|
|
oy -= MAPTILES * TILESIZE / 2;
|
2021-12-03 12:04:40 +00:00
|
|
|
center = center.floor(); // make sure we're in the middle of a tile
|
|
|
|
|
// JS version of Bangle.js's projection
|
|
|
|
|
function bproject(lat, lon) {
|
|
|
|
|
const degToRad = Math.PI / 180; // degree to radian conversion
|
|
|
|
|
const latMax = 85.0511287798; // clip latitude to sane values
|
|
|
|
|
const R = 6378137; // earth radius in m
|
|
|
|
|
if (lat > latMax) lat=latMax;
|
|
|
|
|
if (lat < -latMax) lat=-latMax;
|
|
|
|
|
var s = Math.sin(lat * degToRad);
|
|
|
|
|
return new L.Point(
|
|
|
|
|
(R * lon * degToRad),
|
|
|
|
|
(R * Math.log((1 + s) / (1 - s)) / 2)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
// Work out scale factors (how much from Bangle.project does one pixel equate to?)
|
|
|
|
|
var pc = map.unproject(center.multiplyBy(OSMTILESIZE), zoom);
|
|
|
|
|
var pd = map.unproject(center.multiplyBy(OSMTILESIZE).add({x:1,y:0}), zoom);
|
|
|
|
|
var bc = bproject(pc.lat, pc.lng)
|
|
|
|
|
var bd = bproject(pd.lat, pd.lng)
|
|
|
|
|
var scale = bc.distanceTo(bd);
|
2020-04-07 20:41:57 +00:00
|
|
|
|
2021-12-06 15:35:24 +00:00
|
|
|
// test
|
|
|
|
|
/*var p = bproject(centerlatlon.lat, centerlatlon.lng);
|
|
|
|
|
var q = bproject(mylat, mylon);
|
|
|
|
|
var testPt = {
|
|
|
|
|
x : (q.x-p.x)/scale + (MAPSIZE/2),
|
|
|
|
|
y : (MAPSIZE/2) - (q.y-p.y)/scale
|
|
|
|
|
};*/
|
2020-04-07 20:41:57 +00:00
|
|
|
|
2021-12-06 15:35:24 +00:00
|
|
|
var tileGetters = [];
|
2021-12-03 12:04:40 +00:00
|
|
|
// Render everything to a canvas...
|
2020-04-07 20:41:57 +00:00
|
|
|
var canvas = document.getElementById("maptiles");
|
2020-04-08 20:22:51 +00:00
|
|
|
canvas.style.display="";
|
2020-04-07 20:41:57 +00:00
|
|
|
var ctx = canvas.getContext('2d');
|
2022-03-17 08:28:55 +00:00
|
|
|
canvas.width = MAPSIZE;
|
|
|
|
|
canvas.height = MAPSIZE;
|
2022-11-30 16:54:27 +00:00
|
|
|
var tileMin = Math.round(-OSMTILECOUNT/2);
|
|
|
|
|
var tileMax = Math.round(OSMTILECOUNT/2);
|
|
|
|
|
for (var i = tileMin; i <= tileMax; i++) {
|
|
|
|
|
for (var j = tileMin; j <= tileMax; j++) {
|
2020-04-07 20:41:57 +00:00
|
|
|
(function(i,j){
|
2022-11-30 16:54:27 +00:00
|
|
|
var coords = new L.Point(center.x+i, center.y+j);
|
2020-04-07 20:41:57 +00:00
|
|
|
coords.z = zoom;
|
|
|
|
|
var img = new Image();
|
|
|
|
|
img.crossOrigin = "Anonymous";
|
|
|
|
|
tileGetters.push(new Promise(function(resolve,reject) {
|
|
|
|
|
img.onload = function(){
|
|
|
|
|
ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy);
|
2021-12-06 15:35:24 +00:00
|
|
|
/*if (testPt) {
|
|
|
|
|
ctx.fillStyle="green";
|
|
|
|
|
ctx.fillRect(testPt.x-1, testPt.y-5, 3,10);
|
|
|
|
|
ctx.fillRect(testPt.x-5, testPt.y-1, 10,3);
|
|
|
|
|
}*/
|
2022-11-30 16:54:27 +00:00
|
|
|
/*ctx.fillStyle="black";
|
|
|
|
|
ctx.fillRect(i*OSMTILESIZE - ox, j*OSMTILESIZE - oy, 6,6);*/
|
2020-04-07 20:41:57 +00:00
|
|
|
resolve();
|
|
|
|
|
};
|
|
|
|
|
}));
|
2021-12-03 12:04:40 +00:00
|
|
|
bangleTileLayer._tileZoom = previewTileLayer._tileZoom;
|
|
|
|
|
img.src = bangleTileLayer.getTileUrl(coords);
|
2020-04-07 20:41:57 +00:00
|
|
|
})(i,j);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Promise.all(tileGetters).then(() => {
|
2020-04-08 20:22:51 +00:00
|
|
|
document.getElementById("uploadbuttons").style.display="";
|
2022-11-25 15:34:51 +00:00
|
|
|
var mapNumber = 0;
|
|
|
|
|
while (loadedMaps[mapNumber]) mapNumber++;
|
|
|
|
|
let mapImageFile = `openstmap.${mapNumber}.img`;
|
|
|
|
|
mapFiles = tilesLoaded(ctx, canvas.width, canvas.height, mapImageFile);
|
|
|
|
|
mapFiles.unshift({name:`openstmap.${mapNumber}.json`,content:JSON.stringify({
|
2020-04-07 20:41:57 +00:00
|
|
|
imgx : canvas.width,
|
|
|
|
|
imgy : canvas.height,
|
|
|
|
|
tilesize : TILESIZE,
|
2021-12-03 12:04:40 +00:00
|
|
|
scale : scale, // how much of Bangle.project(latlon) does one pixel equate to?
|
2020-04-07 20:41:57 +00:00
|
|
|
lat : centerlatlon.lat,
|
2022-07-21 14:45:17 +00:00
|
|
|
lon : centerlatlon.lng,
|
|
|
|
|
w : Math.round(canvas.width / TILESIZE), // width in tiles
|
|
|
|
|
h : Math.round(canvas.height / TILESIZE), // height in tiles
|
2022-11-25 15:34:51 +00:00
|
|
|
fn : mapImageFile
|
2020-04-07 20:41:57 +00:00
|
|
|
})});
|
2022-11-30 16:54:27 +00:00
|
|
|
var mapSizeInK = Math.round(mapFiles.reduce((r,m)=>m.content.length+r,0)/1000);
|
|
|
|
|
document.getElementById("mapstats").innerText = "Size : "+ (mapSizeInK+"kb");
|
2020-04-08 20:22:51 +00:00
|
|
|
console.log(mapFiles);
|
2020-04-07 20:41:57 +00:00
|
|
|
});
|
2020-04-08 20:22:51 +00:00
|
|
|
});
|
2020-04-07 20:41:57 +00:00
|
|
|
|
2020-04-08 20:22:51 +00:00
|
|
|
document.getElementById("upload").addEventListener("click", function() {
|
2022-11-25 15:34:51 +00:00
|
|
|
Util.showModal("Uploading...");
|
|
|
|
|
let promise = Promise.resolve();
|
|
|
|
|
mapFiles.forEach(file => {
|
|
|
|
|
promise = promise.then(function() {
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
Util.writeStorage(file.name, file.content, resolve);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
promise.then(function() {
|
|
|
|
|
Util.hideModal();
|
|
|
|
|
console.log("Upload Complete");
|
|
|
|
|
showLoadedMaps();
|
2020-04-08 20:22:51 +00:00
|
|
|
});
|
|
|
|
|
});
|
2020-04-07 20:41:57 +00:00
|
|
|
|
2020-04-08 20:22:51 +00:00
|
|
|
document.getElementById("cancel").addEventListener("click", function() {
|
2022-11-25 15:34:51 +00:00
|
|
|
showMap();
|
2020-04-07 20:41:57 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
