forked from pelias/leaflet-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (111 loc) · 4.46 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
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<title>Mapzen 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">
<script src="examples/assets/modernizr.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.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-pelias-expanded,
.leaflet-touch .leaflet-pelias-control.leaflet-pelias-expanded {
width: 400px;
}
/* Swap out the image for search icon when the control is expanded */
.leaflet-pelias-control.leaflet-pelias-expanded .leaflet-pelias-search-icon:not(.leaflet-pelias-loading) {
background-image: url('examples/assets/search_blue.png');
}
.no-webgl-message {
display: none;
}
html.no-webgl .no-webgl-message{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 1001; /* Ensures visibility in IE8 */
padding: 10px;
font-family: sans-serif;
background-color: lightyellow;
border-bottom: 1px solid gold;
}
</style>
</head>
<body>
<div id="message" class="no-webgl-message">Your browser cannot display the map on this page. <a href="./examples/">Try this one instead.</a></div>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://mapzen.com/tangram/tangram.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.min.js"></script>
<script type="text/javascript">
// 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;
}
var map = L.map('map', {
scrollWheelZoom: (window.self === window.top) ? true : false,
dragging: (window.self !== window.top && L.Browser.touch) ? false : true,
tap: (window.self !== window.top && L.Browser.touch) ? false : true,
}).setView({ lng: INITIAL_LNG, lat: INITIAL_LAT }, 12);
var hash = new L.Hash(map);
// Add geocoder
var geocoder = L.control.geocoder('search-MKZrG6M', {
fullWidth: 650,
expanded: true
}).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();
// Add Tangram scene layer
var layer = Tangram.leafletLayer({
scene: {
import: 'https://mapzen.com/carto/bubble-wrap-style/bubble-wrap.yaml',
global: { sdk_mapzen_api_key: 'search-MKZrG6M' }
},
attribution: 'Rendering by <a href="https://mapzen.com/products/tangram/">Tangram</a> | © OSM contributors'
}).addTo(map);
// Adding a script block to post message to the parent container (think iframed demos)
window.addEventListener('hashchange', function () {
parent.postMessage(window.location.hash, '*')
});
</script>
<script type="text/javascript">
// Compatibility checks
(function () {
var messageEl = document.getElementById('message');
var mapEl = document.getElementById('map');
var height;
// This message box is displayed if Modernizr cannot detect WebGL support.
if (messageEl.style.display !== 'none') {
height = messageEl.getBoundingClientRect().bottom; // No .height in IE8, but top is assumed to be 0
mapEl.style.top = height.toString() + 'px';
}
})();
</script>
</body>
</html>