core-resource-app-test
Version:
App that contains assets and scripts for the core apps
158 lines (145 loc) • 5.02 kB
HTML
<html>
<head>
<title>Adding events to geocoder.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<!-- Load geocoding plugin after Leaflet -->
<link rel="stylesheet" href="../dist/leaflet-geocoder-mapzen.css">
<script src="../dist/leaflet-geocoder-mapzen.js"></script>
<link rel="stylesheet" href="assets/examples.css">
<style>
#events-log {
position: absolute;
top: 10px;
right: 10px;
bottom: 20px;
width: 300px;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(255,255,255,0.90);
font-family: sans-serif;
line-height: 1.4;
box-sizing: border-box;
box-shadow: 0 1px 5px rgba(0,0,0,0.35);
border-radius: 4px;
z-index: 1000;
}
#events-log.oldie {
background-color: white;
border: 1px solid #999;
}
h1 {
margin-top: 0;
}
code {
background-color: #e1e1e1;
font-weight: bold;
padding: 2px 5px;
border-radius: 3px;
}
#events-log p:first-of-type {
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
}
code.select {
background-color: aliceblue;
color: blue;
}
code.highlight {
background-color: yellow;
}
code.results {
background-color: brown;
color: white;
}
code.error {
background-color: red;
color: white;
}
code.reset {
background-color: red;
color: white;
}
code.expand,
code.collapse {
background-color: whitesmoke;
color: darkred;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="events-log">
<h1>Events log</h1>
<p>Events will be logged here! Also, open the console to see a log of the event objects that are created.</p>
</div>
<script>
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function(global) {
'use strict';
global.console = global.console || {};
var con = global.console;
var prop, method;
var empty = {};
var dummy = function() {};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) if (!con[prop]) con[prop] = empty;
while (method = methods.pop()) if (typeof con[method] !== 'function') con[method] = dummy;
// Using `this` for web workers & supports Browserify / Webpack.
})(typeof window === 'undefined' ? this : window);
</script>
<script>
// Create a basic Leaflet map
var map = L.map('map').setView([40.7259, -73.9805], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var geocoder = L.control.geocoder('search-MKZrG6M').addTo(map);
var log = document.getElementById('events-log');
geocoder.on('select', function (e) {
console.log('highlight', e);
addLog('<p><code class="select">select</code> You’ve selected ' + e.feature.properties.label + ' located at ' + e.latlng.lat + ', ' + e.latlng.lng + '</p>');
});
geocoder.on('highlight', function (e) {
console.log('select', e);
addLog('<p><code class="highlight">highlight</code> You’ve highlighted ' + e.feature.properties.label + ' located at ' + e.latlng.lat + ', ' + e.latlng.lng + '</p>');
});
geocoder.on('results', function (e) {
console.log('results', e);
addLog('<p><code class="results">results</code> <span class="type">' + e.requestType + '</span> results received!</p>');
});
geocoder.on('error', function (e) {
console.log('results', e);
addLog('<p><code class="error">error</code> Error code ' + e.errorCode + ': ' + e.errorMessage + '</p>');
});
geocoder.on('reset', function (e) {
console.log('reset', e);
addLog('<p><code class="resets">reset</code> Geocoder reset!</p>');
});
geocoder.on('expand', function (e) {
console.log('expand', e);
addLog('<p><code class="expand">expand</code> Geocoder expanded!</p>');
});
geocoder.on('collapse', function (e) {
console.log('collapse', e);
addLog('<p><code class="collapse">collapse</code> Geocoder collapsed!</p>');
});
function addLog (html) {
log.innerHTML += html;
log.scrollTop = log.scrollHeight;
}
// Old IE setup
if (L.Browser.ielt9 === true) {
log.className = 'oldie';
}
</script>
</body>
</html>