forked from liskin/strava-map-switcher
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (96 loc) · 3.97 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Mapissimo - Tracks OSM map</title>
<!-- adapted from https://leafletjs.com/examples/quick-start/example.html -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v1.1.1/maptiler-sdk.umd.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v1.1.1/maptiler-sdk.css" rel="stylesheet" />
<script src="https://cdn.maptiler.com/leaflet-maptilersdk/v1.0.0/leaflet-maptilersdk.js"></script>
<script src="lib/leaflet-mapbox-gl.js"></script>
<script src="lib/Control.Geocoder.js"></script>
<link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="lib/Control.Geocoder.css" />
<script src="extension/layers.js"></script>
<script src="lib/leaflet.restoreview.js"></script>
<script src="lib/leaflet.zoomdisplay.js"></script>
<script src="extension/leaflet.grid.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4T31BS3B1E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4T31BS3B1E');
</script>
</head>
<body>
<script src="bundle.js"></script>
<div id="mapid"></div>
<script>
function buildBaseMaps() {
var baseMaps = {};
var layers = mapLayers;
Object.entries(mapLayers).forEach(
([type, l]) => baseMaps[l.name] = tileLayer(l)
)
return baseMaps;
}
var mymap = L.map('mapid', {preferCanvas: true});
if (!mymap.restoreView()) {
mymap.setView([50, 10], 6);
}
function tileLayer(l) {
var r;
if (l.mtStyle) {
r = L.maptilerLayer({apiKey: maptilerKey, style: l.mtStyle});
}
else if (l.style) {
r = L.mapboxGL({accessToken: mapboxToken, style: l.style});
} else {
r = L.tileLayer(l.url, l.opts);
}
if (l.overlay) {
var o;
if (l.overlay.style) {
o = L.mapboxGL({accessToken: mapboxToken, style: l.overlay.style});
} else {
o = L.tileLayer(l.overlay.url, l.overlay.opts);
}
r = L.layerGroup([r, o, L.grid()]);
} else {
r = L.layerGroup([r, L.grid()]);
}
return r;
}
function initMaps() {
var baseMaps = buildBaseMaps();
L.control.layers(baseMaps).addTo(mymap);
var firstLayer = baseMaps[Object.keys(baseMaps)[0]];
firstLayer.addTo(mymap);
var geocoderOptions = {
defaultMarkGeocode: false
};
var geocoder = L.Control.geocoder(geocoderOptions); // uses nominatim by default
geocoder.on('markgeocode', function (e) {
var bbox = e.geocode.bbox;
var poly = L.polygon([
bbox.getSouthEast(),
bbox.getNorthEast(),
bbox.getNorthWest(),
bbox.getSouthWest()
]).addTo(mymap);
mymap.fitBounds(poly.getBounds());
poly.remove(mymap);
}).addTo(mymap);
}
window.onload = initMaps;
</script>
</body>
</html>