core-resource-app-test
Version:
App that contains assets and scripts for the core apps
82 lines (72 loc) • 2.04 kB
HTML
<html>
<head>
<title>Leaflet Context Menu</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/leaflet.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>