-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
68 lines (68 loc) · 2.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>map.simonwillison.net</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
function toPoint(s) {
return s.split(",").map(parseFloat);
}
async function load() {
let params = new URLSearchParams(location.search);
let center = params.get('center') || '0,0';
let initialZoom = params.get('zoom');
let zoom = parseInt(initialZoom || '2', 10);
let q = params.get('q');
let markers = params.getAll('marker');
let map = L.map('map', { zoomControl: false }).setView(toPoint(center), zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
detectRetina: true
}).addTo(map);
if (q && !params.get('center')) {
let response = await fetch(
`https://nominatim.openstreetmap.org/search.php?q=${encodeURIComponent(q)}&format=jsonv2`
)
let data = await response.json();
let bounds = [
[data[0].boundingbox[0],data[0].boundingbox[2]],
[data[0].boundingbox[1],data[0].boundingbox[3]]
];
map.fitBounds(bounds);
// User-provided zoom over-rides this
if (initialZoom) {
map.setZoom(parseInt(initialZoom));
}
}
map.on('moveend zoomend', () => {
// Update URL bar with current location
let newZoom = map.getZoom();
let center = map.getCenter();
let u = new URLSearchParams();
markers.forEach(s => u.append('marker', s));
u.append('center', `${center.lat},${center.lng}`);
u.append('zoom', newZoom);
history.replaceState(null, null, '?' + u.toString());
});
markers.forEach(s => {
L.marker(toPoint(s)).addTo(map);
});
}
load();
</script>
</body>
</html>
<!-- See https://github.com/simonw/url-map for documentation -->