Leaflet edit GeoJson Data

Of course, I did it quickly, so you have to adapt to your own code. I removed L.GeoJSON.AJAX but nothing prevents you from continuing to use it, I advise you not to ;)

var features = "https://api.npoint.io/4fefc36933cc5c22cee4";

var cities = L.layerGroup();

var mbAttr =
  'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  mbUrl =
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw";

var streets = L.tileLayer(mbUrl, {
  id: "mapbox/streets-v11",
  tileSize: 512,
  zoomOffset: -1,
  attribution: mbAttr,
});

var map = L.map("mapid", {
  center: [49.9225, 18.99195],
  zoom: 8,
});

streets.addTo(map);

// add layers to map

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

fetchData(features).then((geoJsonData) => {
  const feature = L.geoJSON(geoJsonData, {
    onEachFeature: function(feature, layer) {
      layer.on("mouseover", function(e) {
        e.target.setStyle({
          color: "red",
          weight: 2,
        });
      });
      layer.on("mouseout", function(e) {
        e.target.setStyle({
          color: "#3388ff",
          weight: 2,
        });
      });
      addPopup(layer);
    },
  }).addTo(map);
});

// --------------------------------------------------
// draw section

let drawnItems = L.featureGroup().addTo(map);

map.addControl(
  new L.Control.Draw({
    edit: {
      featureGroup: drawnItems,
      poly: {
        allowIntersection: false,
      },
    },
    draw: {
      polygon: {
        allowIntersection: false,
        showArea: true,
      },
    },
  })
);

map.on(L.Draw.Event.CREATED, function(event) {
  let layer = event.layer;
  let feature = (layer.feature = layer.feature || {});
  let type = event.layerType;

  feature.type = feature.type || "Feature";
  let props = (feature.properties = feature.properties || {});

  props.type = type;

  if (type === "circle") {
    props.radius = layer.getRadius();
  }

  drawnItems.addLayer(layer);
  addPopup(layer);
});

var openLayer;

function addPopup(layer) {
  let popupContent = `
    <form>Link:<br>
    <input type="text" id="input_link" value="${
      layer.feature.properties.link || ""
    }"><br>
    Cena:<br><input type="text" id="input_cena" value=${
      layer.feature.properties.cena || ""
    }><br>
    Area:<br><input type="text" id="input_area" value=${
      layer.feature.properties.area || ""
    }><br>
    Image:<br><input type="text" id="input_image" value=${
      layer.feature.properties.image || ""
    }><br>
    </form>`;

  layer.on("popupopen", function(e) {
    var _layer = e.popup._source;
    if (!_layer.feature) {
      _layer.feature = {
        properties: {},
      };
    }

    //   document.getElementById("input_link").value =
    //     _layer.feature.properties.link || "";
    //   document.getElementById("input_cena").value =
    //     _layer.feature.properties.cena || "";
    //   document.getElementById("input_area").value =
    //     _layer.feature.properties.area || "";
    //   document.getElementById("input_image").value =
    //     _layer.feature.properties.image || "";
    //   document.getElementById("input_link").focus();
    //   openLayer = _layer;
  });

  layer.on("popupclose", function(e) {
    openLayer = undefined;
  });

  layer.bindPopup(popupContent).openPopup();
}

L.DomEvent.on(document, "keyup", function() {
  if (openLayer) {
    link = document.getElementById("input_link").value;
    cena = document.getElementById("input_cena").value;
    area = document.getElementById("input_area").value;
    image = document.getElementById("input_image").value;

    openLayer.feature.properties.link = link;
    openLayer.feature.properties.cena = cena;
    openLayer.feature.properties.area = area;
    openLayer.feature.properties.image = image;
    openLayer.feature.properties.N = 1;
  }
});

document.getElementById("export").onclick = function(e) {
  // Extract GeoJson from featureGroup
  var data = featureGroup.toGeoJSON();

  // Stringify the GeoJson
  var convertedData =
    "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));

  // Create export
  document
    .getElementById("export")
    .setAttribute("href", "data:" + convertedData);
  document.getElementById("export").setAttribute("download", "sl.geojson");
};

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0;
  padding: 0
}

#mapid {
  height: 100%
}

#export {
  position: absolute;
  top: 600px;
  z-index: 1000;
  background: white;
  color: black;
  padding: 6px;
  border-radius: 4px;
  font-family: 'Helvetica Neue';
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
}

#export {
  top: 370px;
}

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<a href='#' id='export'>Export Features to local file</a>
<div id="mapid"></div>

You can add the option to modify fields (form) only when you click the edit button.

map.on(L.Draw.Event.EDITED, function (event) {
  let layers = event.layers;

  layers.eachLayer(function (layer) {
    addPopup(layer);
  });
});

Leaflet edit GeoJson Data

Related

Recent Posts