JSFiddle - React, Tailwind, and code Playground

by falkedesign

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw.css">
<script src="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw-src.js"></script>
<div id="map"></div>

<button id="convert">
Get all features to GeoJSON string
</button>

CSS

#map {
    height: 500px;
}

JavaScript

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
    });

map = L.map('map', {
    layers: [osm],
    center: [31.9500, 35.9333],
    zoom: 15
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
}));

map.on('draw:created', function (event) {
    var layer = event.layer,
    	feature = layer.feature = layer.feature || {};
    
    feature.type = feature.type || "Feature";
    var props = feature.properties = feature.properties || {};
    //layer.feature = {properties: {}}; // No need to convert to GeoJSON.
    //var props = layer.feature.properties;
    props.desc = null;
    props.image = null;
    drawnItems.addLayer(layer);
    addPopup(layer);
});

var openLayer;
function addPopup(layer){
  let popupContent = 
  '<form>' + 
  'Description:<br><textarea type="text" id="input_desc"></textarea><br>' +
  'Name:<br><textarea type="text" id="input_cena"></textarea><br>' +
  '</form>';
  
  layer.bindPopup(popupContent).openPopup();
  
  layer.on("popupopen", function (e) {
  	var _layer = e.popup._source;
    if(!_layer.feature){
    	_layer.feature = {
      	properties: {}
      };
    }
    document.getElementById("input_desc").value = _layer.feature.properties.link || "";
    document.getElementById("input_cena").value = _layer.feature.properties.cena || "";
    document.getElementById("input_desc").focus();
    openLayer = _layer;
  });
  
  layer.on("popupclose", function (e) {
  	openLayer = undefined;
  })
  
};

L.DomEvent.on(document,"keyup",function(){
  if(openLayer){
    link = document.getElementById("input_desc").value;
    cena = document.getElementById("input_cena").value;

    openLayer.feature.properties.link = link;
    openLayer.feature.properties.cena = cena;   
 ...