pludi
/
osmtile
mirror of https://git.ludikovsky.name/git/osmtile.git
1
0
Fork 0
Code Issues Releases Activity

Initial commit

This commit is contained in:
Peter Ludikovsky 2018-08-15 16:39:05 +02:00
commit 8cfcb7e50e
Signed by: pludi
GPG Key ID: CFBA360E696EDC99
4 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.*.swp

14
osmtile.css Normal file
View File

@ -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;
}

30
osmtile.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>OSM tile calc</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" href="osmtile.css">
</head>
<body>
<div id="app">
<label>Zoom/Lat/Lon:</label>
<input placeholder="zoom/lat/lon" v-model="instr" v-on:input="calc">
<ul>
<li><a :href='tilestatus' target='osmtileext'>Status</a></li>
<li><a :href='tiledirty' target='osmtileext'>Mark dirty</a></li>
</ul>
<div id="map">
<template v-for='tilear in tiles'>
<template v-for='tile in tilear'><img :src='tile'></template>
</template>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue">
</script>
<script src="osmtile.js">
</script>
</body>
</html>

58
osmtile.js Normal file
View File

@ -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';
}
}
}
})