Skip to content

Instantly share code, notes, and snippets.

@hepplerj
Last active May 10, 2018
Embed
What would you like to do?
Add leaflet points on click

Click on the map to add points. See the console for lat/long output.

<html>
<head>
<title>Adding or moving markers on a Leaflet map</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style type="text/css">
html, body, #map{
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var options = {
center: [37.7749, -122.4194],
zoom: 10
}
var map = L.map('map', options);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'})
.addTo(map);
map.on('click',
function(e){
var coord = e.latlng.toString().split(',');
var lat = coord[0].split('(');
var lng = coord[1].split(')');
console.log("You clicked the map at LAT: " + lat[1] + " and LONG: " + lng[0]);
L.marker(e.latlng).addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment