forked from pelias/leaflet-plugin
-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
111 lines (94 loc) · 3.76 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
<!DOCTYPE html>
<html>
<head>
<title>LocationIQ Search + Leaflet geocoding plugin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="https://maps.locationiq.com/v2/libs/leaflet-geocoder/1.9.6/leaflet-geocoder-locationiq.min.css">
<style>
html, body {
overflow: hidden;
}
#map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.leaflet-touch .leaflet-control-zoom {
display: none;
}
.leaflet-locationiq-expanded,
.leaflet-touch .leaflet-locationiq-control.leaflet-locationiq-expanded {
width: 400px;
}
/* Swap out the image for search icon when the control is expanded */
.leaflet-locationiq-control.leaflet-locationiq-expanded .leaflet-locationiq-search-icon:not(.leaflet-locationiq-loading) {
background-image: url('examples/assets/search_blue.png');
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="https://tiles.unwiredlabs.com/js/leaflet-unwired.js?v=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<script src="https://maps.locationiq.com/v2/libs/leaflet-geocoder/1.9.6/leaflet-geocoder-locationiq.min.js"></script>
<script type="text/javascript">
// Maps access token goes here
var key = 'pk.87f2d9fcb4fdd8da1d647b46a997c727';
// Initial map view
var INITIAL_LNG = -73.9805;
var INITIAL_LAT = 40.7259;
// Change the initial view if there is a GeoIP lookup
if (typeof Geo === 'object') {
INITIAL_LNG = Geo.lon;
INITIAL_LAT = Geo.lat;
}
// Add layers that we need to the map
var streets = L.tileLayer.Unwired({key: key, scheme: "streets"});
var earth = L.tileLayer.Unwired({key: key, scheme: "earth"});
var hybrid = L.tileLayer.Unwired({key: key, scheme: "hybrid"});
var map = L.map('map', {
scrollWheelZoom: (window.self === window.top) ? true : false,
dragging: (window.self !== window.top && L.Browser.touch) ? false : true,
layers: [streets],
tap: (window.self !== window.top && L.Browser.touch) ? false : true,
}).setView({ lng: INITIAL_LNG, lat: INITIAL_LAT }, 12);
var hash = new L.Hash(map);
L.control.zoom({
position:'topright'
}).addTo(map);
// Add the 'layers' control
L.control.layers({
"Streets": streets,
"Earth": earth,
"Hybrid": hybrid,
}, null, {
position: "topright"
}).addTo(map);
// Add the 'scale' control
L.control.scale().addTo(map);
// Add geocoder
var geocoder = L.control.geocoder(key, {
fullWidth: 650,
expanded: true,
markers: true,
url: 'https://api.locationiq.com/v1',
}).addTo(map);
// Re-sort control order so that geocoder is on top
var geocoderEl = geocoder._container;
geocoderEl.parentNode.insertBefore(geocoderEl, geocoderEl.parentNode.childNodes[0]);
// Focus to geocoder input
geocoder.focus();
// Adding a script block to post message to the parent container (think iframed demos)
window.addEventListener('hashchange', function () {
parent.postMessage(window.location.hash, '*')
});
</script>
</body>
</html>