TransWikia.com

Search possibility to create markers with Leaflet, with name and description

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: '&copy; <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.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP