leaflet-contextmenu
Version:
A context menu for Leaflet
83 lines (73 loc) • 2.08 kB
HTML
<html>
<head>
<title>Leaflet Context Menu</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<link rel="stylesheet" href="../dist/leaflet.contextmenu.css"/>
</head>
<body>
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="../dist/leaflet.contextmenu.js"></script>
<script src="../src/Map.ContextMenu.js"></script>
<script>
var map,
cm,
ll = new L.LatLng(-36.852668, 174.762675),
ll2 = new L.LatLng(-36.86, 174.77);
function showCoordinates (e) {
alert(e.latlng);
}
function centerMap (e) {
map.panTo(e.latlng);
}
function zoomIn (e) {
map.zoomIn();
}
function zoomOut (e) {
map.zoomOut();
}
map = L.map('map', {
center: ll,
zoom: 15,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{
text: 'Show coordinates',
callback: showCoordinates
}, {
text: 'Center map here',
callback: centerMap
}, '-', {
text: 'Zoom in',
icon: 'images/zoom-in.png',
callback: zoomIn
}, {
text: 'Zoom out',
icon: 'images/zoom-out.png',
callback: zoomOut
}]
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker(ll, {
contextmenu: true,
contextmenuItems: [{
text: 'Marker item',
index: 0
}, {
separator: true,
index: 1
}]
}).addTo(map);
L.marker(ll2, {
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [{
text: 'Marker item'
}]
}).addTo(map);
</script>
</body>
</html>