geotiff in leaflet

iamtekson · Apr 26, 2024 · 2da73c1 · 2da73c1
1 parent dd82862
commit 2da73c1
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 0 deletions.
diff --git a/data/raster/MODIS_18Nov02_NIR.tif b/data/raster/MODIS_18Nov02_NIR.tif
diff --git a/data/raster/nepal_lc_2020.tif b/data/raster/nepal_lc_2020.tif
diff --git a/data/raster/srtm_57_08_1.tif b/data/raster/srtm_57_08_1.tif
diff --git a/draw/indexx.html b/draw/indexx.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no" />
+  <title>Leaflet.Editable demo</title>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+  <script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>
+  <script src="./lib/Leaflet.Editable.js"></script>
+  <script src="./data/polygon.js"></script>
+
+  <style type='text/css'>
+      body { margin:0; padding:0; }
+      #map { position:absolute; top:0; bottom:0; right: 0; left: 0; width:100%; }
+</style>
+</head>
+<body>
+  <div id='map'></div>
+
+<script type="text/javascript">
+var map = L.map('map', {editable: true}).setView([43.1249, 1.254], 9)
+var osmlayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', 
+    {attribution: 'Data \u00a9 <a href="http://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'});
+
+osmlayer.addTo(map);
+
+// Single feature edit
+var polyline = L.polyline([
+    [43.1249, 1.254],
+    [43.55, 1.28]
+], {color: 'red'}).addTo(map);
+
+polyline.enableEdit();
+
+// GeoJSON layer with multiple features edit
+var geojsonLayer = L.geoJSON(geojsonData, {
+    style: function (feature) {
+        // color based on the feature type 
+        switch (feature.geometry.type) {
+            case 'Point': return {color: "green"};
+            case 'LineString': return {color: "red"};
+            case 'Polygon': return {color: "blue", fillColor: 'yellow'};
+        }
+    }
+}).addTo(map);
+map.fitBounds(geojsonLayer.getBounds());
+geojsonLayer.eachLayer(function (layer) {
+    layer.enableEdit();
+});
+
+// add a download link as a popup in each feature
+geojsonLayer.eachLayer(function (layer) {
+    var popupContent = "Name: " + layer.feature.properties.name + "<br>" +
+        "Type: " + layer.feature.geometry.type + "<br>" +
+    '<a href="data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(layer.toGeoJSON())) + '" download="data.json">Download</a>';
+    layer.bindPopup(popupContent);
+});
+
+
+
+</script>
+</body>
+</html>
diff --git a/geotiff/index.html b/geotiff/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Load Geotiff</title>
+
+    <!-- leaflet cdn link -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <script src="https://unpkg.com/georaster"></script>
+    <!-- //georaster layer for leaflet  -->
+    <script src="https://unpkg.com/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.min.js"></script>
+    <script src="https://unpkg.com/geoblaze"></script>
+
+    <script>
+      // Map initialization
+      var map = L.map("map").setView([28.3949, 84.124], 7);
+
+      //osm layer
+      var osm = L.tileLayer(
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        {
+          attribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        }
+      );
+      osm.addTo(map);
+
+      // load geotiff layer
+      fetch("../data/raster/nepal_lc_2020.tif")
+        .then((response) => response.arrayBuffer())
+        .then((arrayBuffer) => {
+          parseGeoraster(arrayBuffer).then((georaster) => {
+            // console.log("georaster:", georaster);
+
+            var layer = new GeoRasterLayer({
+              georaster: georaster,
+              opacity: 0.7,
+              pixelValuesToColorFn: function (value) {
+                // if value
+                if (value < 50) {
+                  return "yellow";
+                } else if (value > 50 && value < 130) {
+                  return "green";
+                } else if (value < 130 && value > 180) {
+                  return "#93E9BE";
+                } else if (value == 190) {
+                  return "red";
+                } else if (value == 200) {
+                  return "#966400";
+                } else if (value == 210) {
+                  return "blue";
+                } else if (value == 220) {
+                  return "#ffffff";
+                } else {
+                  return "transparent";
+                }
+              },
+
+              resolution: 128, // optional parameter for adjusting display resolution
+            });
+            // layer.addTo(map);
+
+            // map.fitBounds(layer.getBounds());
+          });
+        });
+
+      //srtm dem data
+      fetch("../data/raster/srtm_57_08_1.tif")
+        .then((response) => response.arrayBuffer())
+        .then((arrayBuffer) => {
+          parseGeoraster(arrayBuffer).then((georaster) => {
+            // console.log("georaster:", georaster);
+
+            var layer = new GeoRasterLayer({
+              georaster: georaster,
+              opacity: 0.7,
+              resolution: 128, // optional parameter for adjusting display resolution
+            });
+            layer.addTo(map);
+
+            map.fitBounds(layer.getBounds());
+
+            //map onclick event
+            map.on("click", function (event) {
+              console.log(event, "event");
+              var lat = event.latlng.lat;
+              var lng = event.latlng.lng;
+              var elevation = geoblaze.identify(georaster, [lng, lat]);
+
+              // remove previous marker
+              map.eachLayer(function (layer) {
+                if (layer instanceof L.Marker) {
+                  map.removeLayer(layer);
+                }
+              });
+
+              //add popup with marker
+              var marker = L.marker([lat, lng])
+                .addTo(map)
+                .bindPopup("Elevation: " + elevation)
+                .openPopup();
+            });
+          });
+        });
+    </script>
+  </body>
+</html>