pelias-leaflet-plugin
Version:
Add Pelias geocoding to your Leaflet map.
127 lines (112 loc) • 4.63 kB
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://www.nextzen.org/tangram/0.18.2/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('ge-rbojd2r4iqo5mz67', {
url: 'https://api.geocode.earth/v1',
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://www.nextzen.org/carto/refill-style/11/refill-style.zip',
global: { sdk_api_key: 'JdkWeuDGTEOTlMZxuWl0nQ' }
},
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>