add simple geojson example

2023-05-15 18:11:34 +02:00 · 2023-05-15 18:11:34 +02:00 · f4d53fe358
commit f4d53fe358
4 changed files with 140 additions and 0 deletions
--- a/geojson/index.html
+++ b/geojson/index.html
@ -0,0 +1,17 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+	  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+	  crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+	    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+	    crossorigin=""></script> 
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./style.css" />
+    <title>leaflet-geojson-tooltip-demo</title>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="./main.js"></script>
+  </body>
+</html>
--- a/geojson/main.js
+++ b/geojson/main.js
@ -0,0 +1,45 @@
+var map = L.map('map').setView([44.5000, 11.3447], 13);
+
+L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.{ext}', {
+    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    subdomains: 'abcd',
+    maxZoom: 15,
+    minZoom: 12,
+    ext: 'png'
+}).addTo(map);;
+
+var geojsonMarkerOptions = {
+    radius: 8,
+    fillColor: "#fb1f4f",
+    color: "#000",
+    weight: 1,
+    opacity: 1,
+    fillOpacity: 0.94
+};
+
+var request = new XMLHttpRequest();
+
+request.open('GET', './map.geojson', true);
+
+request.onload = function() {
+  if (request.status >= 200 && request.status < 400) {
+    L.geoJSON(JSON.parse(request.responseText), {
+       pointToLayer: function (feature, latlng) {
+	 return L.circleMarker(latlng, geojsonMarkerOptions);		
+       },
+      onEachFeature: (feature, layer) => {
+	if (feature.properties && feature.properties.name) {
+	  layer.bindPopup("<h1>"+feature.properties.name+"</h1>"+feature.properties.description.replace("\n","<br><br>"));
+	}   
+      }      
+    }).addTo(map);
+  } else {
+    console.log("error: "+request)
+  }
+};
+
+request.onerror = function() {
+  console.log("error: "+request)
+};
+
+request.send();
--- a/geojson/map.geojson
+++ b/geojson/map.geojson
@ -0,0 +1,61 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "description": "PRova prova 1 /\n newline",
+        "name": "Prova 1"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          11.353543996810915,
+          44.5085036959108
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": " Prova 2",
+        "description": "Prova prova 2"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          11.36665463447571,
+          44.50429536697188
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "description": "Prova prova 3",
+        "name": "Prova 3"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          11.329071521759035,
+          44.51795220021296
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Prova 4",
+        "description": "Prova \n Prova \n Prova \n quattro"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          11.35092616081238,
+          44.51151820295402
+	]
+      }
+    }
+  ]
+}
--- a/geojson/style.css
+++ b/geojson/style.css
@ -0,0 +1,17 @@
+#map {
+    height: 100%;
+}
+
+
+#name {
+    display: none;
+    position: absolute;
+    margin-top: -40%;
+}
+
+#sidebar {
+    height: 70%;
+    width: 70%;
+    font-size: 13pt;
+    margin-left: 30%		
+}