Leaflet Events

Open console and watch event behavior with various map moves: - Try links below map. - Try drag, and drag with inertia. - Click Reset, then click the red circle for popup pan. - Resize panes with both vertical and horizontal splitters. - Use Log Line to add a line to console for readability.

by FrictionlessPulley

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Events</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
</head>
<body>
    <div id="map"></div>
    <input id="tag" type="text" placeholder="log line tag" value=""/>
</body>
</html>

CSS

body {
	font-family: sans-serif;
    font-size: small;
	margin: 0;
}

#map {
	height: 350px;
	width: 100%;
}

ul {
    display: inline;
	margin: 0;
	padding: 0;
}

li {
	display: inline;
	margin: 10px;
	text-decoration: underline;
	list-style: none;
	cursor: pointer;
}

#tag {
    width: 100px;
    margin: 3px;
}

JavaScript

var map = L.map('map', {
	center: [47.59401, -122.24406],
	maxZoom: 17,
	zoom: 16,
	zoomControl: false
});

L.tileLayer('http://b.tiles.mapbox.com/v3/oslek.map-izae70ik/{z}/{x}/{y}.png').addTo(map);

L.circle([47.59452, -122.23736], 45.7, {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	weight: 1
}).bindPopup("Lorem ipsum dolor sit amet, consectetur adipisicing elit.").addTo(map);