commit 8cfcb7e50eee6311ee030f9c7870a9ac40a76f70 Author: Peter Ludikovsky Date: Wed Aug 15 16:39:05 2018 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a01ee28 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.*.swp diff --git a/osmtile.css b/osmtile.css new file mode 100644 index 0000000..9a85a64 --- /dev/null +++ b/osmtile.css @@ -0,0 +1,14 @@ +#map { + margin: 0; + padding: 0; + width: 768px; + height: 768px; +} +#map >img { + margin: 0; + padding: 0; + border: 0; + width: 256px; + height: 256px; + vertical-align: middle; +} diff --git a/osmtile.html b/osmtile.html new file mode 100644 index 0000000..729ce87 --- /dev/null +++ b/osmtile.html @@ -0,0 +1,30 @@ + + + + + OSM tile calc + + + + + +
+ + + +
+ +
+
+ + + + + diff --git a/osmtile.js b/osmtile.js new file mode 100644 index 0000000..f20fb10 --- /dev/null +++ b/osmtile.js @@ -0,0 +1,58 @@ +var regex = /^(\d+)\/(-?\d{1,2}(?:\.\d+)?)\/(-?\d{1,3}(?:\.\d+)?)$/; +var app = new Vue({ + el: '#app', + data: { + instr: '', + zoom: 0, + xpos: 0, + ypos: 0, + tiles: [ + ['https://tile.openstreetmap.org/2/1/0.png', + 'https://tile.openstreetmap.org/2/2/0.png', + 'https://tile.openstreetmap.org/2/3/0.png' + ], + ['https://tile.openstreetmap.org/2/1/1.png', + 'https://tile.openstreetmap.org/2/2/1.png', + 'https://tile.openstreetmap.org/2/3/1.png' + ], + ['https://tile.openstreetmap.org/2/1/2.png', + 'https://tile.openstreetmap.org/2/2/2.png', + 'https://tile.openstreetmap.org/2/3/2.png' + ] + ], + tilestatus: 'https://tile.openstreetmap.org/0/0/0.png/status', + tiledirty: 'https://tile.openstreetmap.org/0/0/0.png/dirty' + }, + methods: { + calc: function() { + if (regex.test(this.instr)) { + var groups = this.instr.match(regex); + zoom = parseInt(groups[1]); + lat = parseFloat(groups[2]); + lon = parseFloat(groups[3]); + this.zoom = Math.pow(2, zoom); + this.xpos = Math.floor(this.zoom * ((lon + 180) / 360)); + this.ypos = Math.floor(this.zoom * (1 - (Math.log(Math.tan(lat * + Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / + Math.PI)) / 2); + var arr = new Array(new Array(3), new Array(3), new Array(3)); + var i = 0, + j = 0; + var xpos = this.xpos; + var ypos = this.ypos; + var z2 = this.zoom + for (var x = 0; x <= 2; x++) { + for (var y = 0; y <= 2; y++) { + var str = 'https://tile.openstreetmap.org/' + zoom + '/' + (( + z2 + xpos + x - 1) % z2) + '/' + ((z2 + ypos + y - 1) % + z2) + '.png'; + arr[y][x] = str; + } + } + this.tiles = arr; + this.tilestatus = arr[1][1] + '/status'; + this.tiledirty = arr[1][1] + '/dirty'; + } + } + } +})