4

I used a manual marker input development under Leaflet found on this website : http://www.gistechsolutions.com/leaflet/DEMO/basic/addmarker.html

I have added two properties to the markers: name and description and the possibility to register these markers.

<html>
<head>
<title>Saisie waypoints</title>
<meta charset="utf-8" />
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<style>
#map {
height: 700px;
width: 1500px

}

#delete, #export {
            position: absolute;
            top:150px;
            left:10px;
            z-index:1000;
            background:white;
            color:black;
            padding:6px;
            border-radius:4px;
            font-family: 'Arial';
            font-weight: bold;
            cursor: pointer;
            font-size:12px;
            text-decoration:none;
    
        }
        #export {
            top:200px;
        }
 
</style>
</head>
<body>

<input type="text" id="a">Lat</a>
<input type="text" id="b">Long</a>
<input type="text" id="c">Name</a>
<input type="text" id="d">Description</a>
<button type="button" onclick="clickme()">Create</button>

<div id="map" </div>

<a href="#" id='delete' data-toggle="tooltip">Delete</a>
<a href="#" id='export' data-toggle="tooltip">Export Geojson</a>

<script>
    var map = L.map('map').setView([30, -8], 9);  

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

function clickme(){


    var lat =   document.getElementById("a").value;
    var lng =   document.getElementById("b").value;
    var name = document.getElementById("c").value;
    var description = document.getElementById("d").value;
    
        
    L.marker([lat, lng]).addTo(drawnItems).bindPopup("Name: " + name + "</br>" + "Description: " + description + "</br>" + "latitude: " + lat + "</br>" + "longitude: " + lng);

    map.setView([lat,lng], 9); 
    
    
 }
 
  document.getElementById('delete').onclick = function (e) {
      drawnItems.clearLayers();
    }


document.getElementById('export').onclick = function (e) {
      // Extractions GeoJson from featureGroup
      var geojson = drawnItems.toGeoJSON();
      // Stringify the GeoJson
     
      var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(geojson));
      // Create export
      document.getElementById('export').setAttribute('href', 'data:' + convertedData);
      document.getElementById('export').setAttribute('download', 'data.geojson');
    }
    
</script>
</body>
</html>

I would like to be able to export in geojson format these markers with their names and descriptions. In the current export I only have the latitude and longitude coordinates of the registered markers.

What changes do I need to make in order to get these complete registrations?

2 Answers 2

4

If you create GeoJSON layer in Leaflet from GeoJSON file/object, you'll see that each Leaflet feature object gets feature property, which contains source GeoJSON object with all it's properties. If you create GeoJSON object from such layer with .toGeoJSON() method, you get initial GeoJSON object, again with all it's properties.

Taking this into account when creating your marker, you can add property feature to Leaflet marker object and add desired properties to it. These properties will then be used when creating GeoJSON object with the .toGeoJSON() method.

In your case this could look something like this:

function clickme(){

  var lat =   document.getElementById("a").value;
  var lng =   document.getElementById("b").value;
  var name = document.getElementById("c").value;
  var description = document.getElementById("d").value;  
      
  var marker = L.marker([lat, lng]).bindPopup("Name: " + name + "</br>" + "Description: " + description + "</br>" + "latitude: " + lat + "</br>" + "longitude: " + lng);;
  marker.feature = {};
  marker.feature.type = 'Feature';    // Correction, thanks to @Manard82
  marker.feature.properties = {};
  marker.feature.properties.name = name;
  marker.feature.properties.decription = description;
  marker.addTo(drawnItems);

  map.setView([lat,lng], 9); 
   
 }
3

Using the generated geojson file, I noticed that it did not open, the name and description being under geometry. I applied the following modification:


  var lat =   document.getElementById("a").value;
  var lng =   document.getElementById("b").value;
  var name = document.getElementById("c").value;
  var description = document.getElementById("d").value;  
      
  var marker = L.marker([lat, lng]).bindPopup("Nom: " + name + "</br>" + "Description: " + description + "</br>" + "Latitude: " + lat + "</br>" + "Longitude: " + lng + "</br>" +"<input type='button' value='Effacer ce waypoint' class='marker-delete-button'/>");

  marker.on("popupopen", onPopupOpen);
       
   
 feature = marker.feature = marker.feature || {}; // Initialize feature
 feature.type = feature.type || "Feature"; // Initialize feature.type
 var props = feature.properties = feature.properties || {}; // Initialize feature.properties
 marker.feature.properties.name = name;
 marker.feature.properties.description = description;
    
    
    
      marker.addTo(drawnItems);

  map.setView([lat,lng], 9); 
   
 }
1
  • You are right, I completely overlooked that. My answer is corrected now accordingly.
    – TomazicM
    Jan 4, 2021 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.