Dear Community,
I have created a django app that allow me to:
- Create a polygon
- Delete a polygon
Now i am getting a lot of problem to figure it out how to edit the polygon saved and then after the editing i would like to save it
This is my models.py
#Very easy
from django.contrib.gis.db import models
class Polygon(models.Model):
name = models.CharField(max_length=255)
geometry = models.PolygonField()
This is my views.py
def polygon_update(request, pk):
polygon = get_object_or_404(Polygon, pk=pk)
print(polygon.geometry)
# SRID=4326;POLYGON ((-0.047023 51.490095, -0.058463 51.506837, -0.073792 51.498574, -0.077796 51.487601, -0.047023 51.490095))
print(type(polygon.geometry))
# <class 'django.contrib.gis.geos.polygon.Polygon'>
if request.method == 'POST':
name = request.POST['name']
geometry = request.POST['geometry']
polygon.name = name
polygon.geometry = GEOSGeometry(geometry)
polygon.save()
return redirect('polygon_list')
return render(request, 'mapapp/polygon_update.html', {'polygon': polygon})
This is my template
{% extends 'base.html' %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Modifica GeoJSON su Leaflet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="startEditing">Inizia l'editing</button>
<button id="stopEditing" disabled>Termina l'editing</button>
<button id="salvaGeoJSON" disabled>Salva GeoJSON</button>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turf/6.3.0/turf.min.js"></script> <!-- Libreria Turf.js per le operazioni GIS -->
<script>
var map = L.map('map').setView([0, 0], 2); // Imposta la vista della mappa
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var geoJSONLayer;
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// Funzione per avviare l'editing
document.getElementById('startEditing').addEventListener('click', function () {
map.addLayer(editableLayers);
document.getElementById('startEditing').disabled = true;
document.getElementById('stopEditing').disabled = false;
document.getElementById('salvaGeoJSON').disabled = false;
});
// Funzione per terminare l'editing
document.getElementById('stopEditing').addEventListener('click', function () {
map.removeLayer(editableLayers);
document.getElementById('startEditing').disabled = false;
document.getElementById('stopEditing').disabled = true;
document.getElementById('salvaGeoJSON').disabled = true;
});
// Funzione per salvare il GeoJSON
document.getElementById('salvaGeoJSON').addEventListener('click', function () {
var modifiedGeoJSON = editableLayers.toGeoJSON(); // Converte i dati modificati in GeoJSON
console.log(JSON.stringify(modifiedGeoJSON));
// Ora puoi inviare il GeoJSON modificato al server o fare altro con esso.
alert("GeoJSON modificato salvato!");
});
// Esempio di GeoJSON da visualizzare e modificare
var sampleGeoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
{{polygon.geometry}}
}
}]
};
geoJSONLayer = L.geoJSON(sampleGeoJSON, {
onEachFeature: function (feature, layer) {
editableLayers.addLayer(layer);
}
});
map.addLayer(geoJSONLayer);
</script>
</body>
</html>
{% endblock %}
Can someone help me to figure it out how to do it?
