[GIS] Adding GeoJSON properties when creating marker in Leaflet

exportgeojsonleafletmarkers

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/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/togeojson@0.16.0"></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?

Best Answer

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); 
   
 }
Related Question