Geographic Information Systems Asked by Manard82 on December 16, 2020
I am looking for a possibility to create markers on a map with Leaflet. These markers will have a name and a possible description. I have seen on the website of the University of Ben-Gurion, a development that partially corresponds to my research : http://132.72.155.230:3838/js/examples/example-13-04.html
This development seems to be an extract of this page where the data is stored in a SQL database : http://132.72.155.230:3838/js/examples/example-13-05.html
<div id="map"></div>
<script>
// Add map and tile layer
let map = L.map("map", {center: [31.262218, 34.801472], zoom: 13});
L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
).addTo(map);
// Create feature group for drawn items
let drawnItems = L.featureGroup().addTo(map);
// Add draw control
new L.Control.Draw({
draw : {
polygon : true,
polyline : true,
rectangle : false, // Rectangles disabled
circle : false, // Circles disabled
circlemarker : false, // Circle markers disabled
marker: true
},
edit : {
featureGroup: drawnItems
}
}).addTo(map);
// On draw - create editable popup
map.addEventListener("draw:created", function(e) {
e.layer.addTo(drawnItems);
createFormPopup();
});
// On edit or delete - Close popup
map.addEventListener("draw:editstart", function(e) {
drawnItems.closePopup();
});
map.addEventListener("draw:deletestart", function(e) {
drawnItems.closePopup();
});
map.addEventListener("draw:editstop", function(e) {
drawnItems.openPopup();
});
map.addEventListener("draw:deletestop", function(e) {
if(drawnItems.getLayers().length > 0) {
drawnItems.openPopup();
}
});
// Create editable popup
function createFormPopup() {
let popupContent =
'<form>' +
'Description:<br><input type="text" id="input_desc"><br>' +
'Name:<br><input type="text" id="input_name"><br>' +
'<input type="button" value="Submit" id="submit">' +
'</form>';
drawnItems.bindPopup(popupContent).openPopup();
document.getElementById("submit").addEventListener("click", setData);
}
// Submission
function setData() {
// Get user name and description
let enteredUsername = document.getElementById("input_name").value;
let enteredDescription = document.getElementById("input_desc").value;
// Print user name and description
console.log(enteredUsername);
console.log(enteredDescription);
// Get and print GeoJSON for each drawn layer
drawnItems.eachLayer(function(layer) {
let drawing = JSON.stringify(layer.toGeoJSON().geometry);
console.log(drawing);
});
// Clear drawn items layer
drawnItems.closePopup();
drawnItems.clearLayers();
}
This map will be installed on a webserver. By modifying the first development, is it possible that users of this map can create markers (with name and description) and save them in a file (gpx, kml) on their PC, not in a SQL database on the server?
This map will be used with satellite photos to locate constructions of monuments in the Sahara.
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP