Last active
May 14, 2022 23:07
-
-
Save vaertsen/99b3b752342e6ef888820a100d1b5891 to your computer and use it in GitHub Desktop.
Draggable marker with popup window: Latlng and Street info [LEAFLET]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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