85 lines
No EOL
2.7 KiB
HTML
85 lines
No EOL
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>New GeoJSON Feature Form</title>
|
|
<!-- Leaflet CSS and JS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
<style>
|
|
#map {
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2>New GeoJSON Feature Form</h2>
|
|
|
|
<form id="geojsonForm">
|
|
<label for="name">Name:</label><br>
|
|
<input type="text" id="name" name="name"><br><br>
|
|
|
|
<label for="description">Description:</label><br>
|
|
<textarea id="description" name="description"></textarea><br><br>
|
|
|
|
<label for="image">Upload Image URL:</label><br>
|
|
<input type="text" id="image" name="image"><br><br>
|
|
|
|
<div id="map"></div><br>
|
|
|
|
<button type="submit">Create GeoJSON Feature</button>
|
|
</form>
|
|
|
|
<script>
|
|
var map = L.map('map').setView([44.49593478876318, 11.343095841047235], 13.5); // Set initial coordinates
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var marker;
|
|
|
|
map.on('click', function (e) {
|
|
if (marker) {
|
|
map.removeLayer(marker);
|
|
}
|
|
marker = L.marker(e.latlng).addTo(map);
|
|
document.getElementById('latitude').value = e.latlng.lat;
|
|
document.getElementById('longitude').value = e.latlng.lng;
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('geojsonForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var name = document.getElementById('name').value;
|
|
var description = document.getElementById('description').value;
|
|
var image = document.getElementById('image').value;
|
|
var latitude = marker.getLatLng().lat;
|
|
var longitude = marker.getLatLng().lng;
|
|
|
|
var newFeature = {
|
|
"type": "Feature",
|
|
"properties": {
|
|
"Nome": name,
|
|
"Descrizione": description,
|
|
"Foto": image
|
|
},
|
|
"geometry": {
|
|
"type": "Point",
|
|
"coordinates": [longitude, latitude]
|
|
}
|
|
};
|
|
});
|
|
// You can use newFeature to perform further actions, such as sending it to a server or adding it to an existing GeoJSON file.
|
|
|
|
console.log(newFeature); // For demonstration purposes, log the new feature to the console
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |