core-resource-app-test
Version:
App that contains assets and scripts for the core apps
121 lines (104 loc) • 4.23 kB
HTML
<html>
<head>
<title>Pelias Geocoder Leaflet 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>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<!-- With leaflet-hash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<!-- Load Tangram -->
<script src="https://mapzen.com/tangram/tangram.min.js"></script>
<!-- Load Pelias geocoding plugin after Leaflet -->
<link rel="stylesheet" href="./dist/leaflet-geocoder-mapzen.css">
<script src="./dist/leaflet-geocoder-mapzen.js"></script>
<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 type="text/javascript">
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([40.7259, -73.9805], 12);
var hash = new L.Hash(map);
// Add geocoder
var geocoder = L.control.geocoder('search-MKZrG6M', {
fullWidth: 650,
expanded: true,
markers: true,
latlng: 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]);
// Add Tangram scene layer
var layer = Tangram.leafletLayer({
scene: 'https://cdn.rawgit.com/tangrams/refill-style/ef1259dbbcd5f47ad3e8bed1a27c4fcab9676b3c/refill-style.yaml',
attribution: 'Rendering by <a href="https://mapzen.com/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>