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 aidankirrane

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Events</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
    <div id="map"></div>
    <div id="dragMessage">Draggable: </div>
    <div id="notDragMessage">Not Draggable: </div>
</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: 14,
	zoomControl: false
});

L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png').addTo(map);

var marker = L.marker([47.59452, -122.23736], {draggable: true}).addTo(map);

marker.on('click', function () {
    $('#dragMessage').html('Draggable: CLICK');
});

marker.on('contextmenu', function () {
        $('#dragMessage').html('Draggable: CONTEXTMENU');
});


var notDraggableMarker = L.marker([47.59, -122.23], {draggable: false}).addTo(map)
notDraggableMarker.on('click', function () {
    $('#notDragMessage').html('Not Draggable: CLICK');
});

notDraggableMarker.on('contextmenu', function () {
        $('#notDragMessage').html('Not Draggable: CONTEXTMENU');
});