Skip to content

Instantly share code, notes, and snippets.

@Avec112

Avec112/index.html

Last active June 22, 2020 09:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Avec112/212b225979f4a90188480e3f27ca5a08 to your computer and use it in GitHub Desktop.
Save Avec112/212b225979f4a90188480e3f27ca5a08 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Leflet with Context Menu Plugin demonstration. OpenStreetMap is default. Use your own accesstoken if you want to use MapBox.
Raw
index.html
<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