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 Arjan Haverkamp

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>
	<ul>
		<li id="zoomin">Zoom In</li>
		<li id="zoomout">Zoom Out</li>
		<li id="near">Go Near</li>
		<li id="far">Go Far</li>
		<li id="pan">Pan</li>
		<li id="reset">Reset</li>
        <li id="line">Log Line</li>
	</ul>
    <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('https://{s}.tile.openstreetmap.org/{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);

map.on('movestart',       function (e) { console.log('< movestart'); });
map.on('moveend',         function (e) { console.log('> moveend'); });
map.on('dragstart',       function (e) { console.log('    [ dragstart'); });
map.on('dragend',         function (e) { console.log('    ] dragend'); });
map.on('zoomstart',       function (e) { console.log('    ( zoomstart'); });
map.on('zoomend',         function (e) { console.log('    ) zoomend'); });
map.on('viewreset',       function (e) { console.log('      viewreset'); });
map.on('autopanstart',    function (e) { console.log('      autopanstart'); });

//map.on('move',            function (e) { console.log('      move'); });
//map.on('drag',            function (e) { console.log('      drag'); });
//map.on('click',           function (e) { console.log('click ' + e.latlng); });
//map.on('dblclick',        function (e) { console.log('dblclick'); });
//map.on('mousedown',       function (e) { console.log('mousedown'); });
//map.on('mouseup',         function (e) { console.log('mouseup'); });
//map.on('mouseover',       function (e) { console.log('mouseover'); });
//map.on('mouseout',        function (e) { console.log('mouseout'); });
//map.on('mousemove',       function (e) { console.log('mousemove'); });
//map.on('contextmenu',     function (e) { console.log('contextmenu'); });
//map.on('focus',           function (e) { console.log('focus'); });
//map.on('blur',            function (e) { console.log('blur'); });
//map.on('preclick',        function (e) { console.log('preclick'); });
//map.on('load',            function (e) { console.log('load');...