83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!doctype 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>
|