pelias-leaflet-plugin
Version:
Add Pelias geocoding to your Leaflet map.
61 lines (53 loc) • 2.53 kB
HTML
<html>
<head>
<title>Using geocoding plugin with Tangram.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="assets/modernizr.js"></script>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<!-- Load leaflet-hash -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<!-- Load geocoding plugin after Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.min.js"></script>
<!-- Load Tangram -->
<script src="https://mapzen.com/tangram/tangram.min.js"></script>
<link rel="stylesheet" href="assets/examples.css">
</head>
<body>
<div id="message" class="no-webgl-message">Your browser cannot display the map on this page. <a href="index.html">Try this one instead.</a></div>
<div id="map"></div>
<script>
// Create a basic Leaflet map (with URL hash enabled)
var map = L.map('map').setView([43.0809, -89.3747], 13);
var hash = new L.Hash(map);
// Add geocoding plugin
var geocoder = L.control.geocoder('search-MKZrG6M').addTo(map);
// Add Tangram scene layer
// (Note: Tangram can also be initialized before the geocoder, if you choose.)
var layer = Tangram.leafletLayer({
scene: {
import: 'https://mapzen.com/carto/cinnabar-style-more-labels/cinnabar-style-more-labels.yaml',
global: { sdk_mapzen_api_key: 'search-MKZrG6M' }
},
attribution: 'Rendering by <a href="https://mapzen.com/tangram">Tangram</a> | © OSM contributors'
}).addTo(map);
</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>