Skip to content

Instantly share code, notes, and snippets.

@vaertsen
Last active May 14, 2022 23:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vaertsen/99b3b752342e6ef888820a100d1b5891 to your computer and use it in GitHub Desktop.
Save vaertsen/99b3b752342e6ef888820a100d1b5891 to your computer and use it in GitHub Desktop.
Draggable marker with popup window: Latlng and Street info [LEAFLET]
<!DOCTYPE html>
<html>
<head>
<title>Draw draggable marker with popup window: Latlng and Street info</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- include cartodb.js and cartodb.css library -->
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style>
html, body, #map {
height: 100%;
width:100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- MAP -->
<div id="map"></div>
<script>
// main function
function main() {
// basic variables
var userName = "victor-aertsen";
var newMarker;
// map object
var map_object = new L.Map('map', {
center: [40.41637, -3.70342],
zoom: 18,
zoomControl: false
});
// set the popup information: latlng and address
function addPopup (marker) {
// OSM Nomitatim documentation: http://wiki.openstreetmap.org/wiki/Nominatim
var jsonQuery = "http://nominatim.openstreetmap.org/reverse?format=json&lat=" + marker.getLatLng().lat + "&lon=" + marker.getLatLng().lng + "&zoom=18&addressdetails=1";
$.getJSON(jsonQuery).done( function (result_data) {
console.log(result_data);
var road;
if(result_data.address.road) {
road = result_data.address.road;
}
else if (result_data.address.pedestrian) {
road = result_data.address.pedestrian;
}
else {
road = "No definido";
}
var popup_text = "<b>Latlng:</b> " + marker.getLatLng().lat + ", " + marker.getLatLng().lng +
"</br><b>Calle:</b> " + road + ", " + result_data.address.house_number +
"</br><b>Distrito:</b> " + result_data.address.city_district +
"</br><b>City:</b> " + result_data.address.city +
"</br><b>Código postal:</b> " + result_data.address.postcode;
marker.bindPopup(popup_text).openPopup();
});
}
// define base map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'})
.addTo(map_object);
// add new marker on click
map_object.on('click', function(e) {
// removes old marker
if (newMarker) {
map_object.removeLayer(newMarker);
}
// add draggable marker
newMarker = L.marker([e.latlng.lat, e.latlng.lng], {draggable: true})
.addTo(map_object)
.on('dragend', function(e) {
// add popup information on dragged marker
addPopup(newMarker);
});
// add popup information on new marker
addPopup(newMarker);
});
}
// initiates the map
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment