Skip to content

Instantly share code, notes, and snippets.

@Avec112
Last active Jun 22, 2020
Embed
What would you like to do?
Simple Leflet with Context Menu Plugin demonstration. OpenStreetMap is default. Use your own accesstoken if you want to use MapBox.
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.css"/>
</head>
<body>
<div><p>LatLng: <span id="coordinates"></span></p></div>
<div id="map"/>
</body>
<style>
#map {
height: 800px;
}
#coordinates {
text-align: center;
height:20px;
width: 320px;
background-color: white;
color: black;
border: 1px solid black;
display: inline-block;
}
</style>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.js">
</script>
<script>
const map = L.map('map', {
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
}]
}).setView([59.91, 10.74], 13);
function showCoordinates (e) {
alert(e.latlng);
}
function centerMap (e) {
map.panTo(e.latlng);
}
function zoomIn (e) {
map.zoomIn();
}
function zoomOut (e) {
map.zoomOut();
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
/*L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your mapbox token here'
}).addTo(map);*/
let lat;
let lng;
map.on('mousemove', function(e) {
// do not log here
lat = e.latlng.lat;
lng = e.latlng.lng;
document.getElementById("coordinates").innerHTML = lat + ", " + lng;
});
map.on('click', function(e) {
console.log("map click event");
L.marker([e.latlng.lat, e.latlng.lng], {draggable: true}).addTo(map).on('click', function(e) {
console.log('marker click event');
this.remove();
}).on('contextmenu', function(e) {
console.log("marker contextmenu event");
this.bindPopup('Lat:' + lat + '<br>Lng:' + lng)
.openPopup();
}).on('move', function(e) {
console.log("marker move event");
this.bindPopup('Lat:' + lat + '<br>Lng:' + lng)
.openPopup();
}).on('dragend', function(e) {
console.log("marker dragend event");
this.closePopup();
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment