Upload folder using huggingface_hub

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

L.KML.js

@@ -0,0 +1,482 @@
+/*!
+	Copyright (c) 2011-2015, Pavel Shramov, Bruno Bergot - MIT licence
+*/
+
+L.KML = L.FeatureGroup.extend({
+
+	initialize: function (kml, kmlOptions) {
+		this._kml = kml;
+		this._layers = {};
+		this._kmlOptions = kmlOptions;
+
+		if (kml) {
+			this.addKML(kml, kmlOptions);
+		}
+	},
+
+	addKML: function (xml, kmlOptions) {
+		var layers = L.KML.parseKML(xml, kmlOptions);
+		if (!layers || !layers.length) return;
+		for (var i = 0; i < layers.length; i++) {
+			this.fire('addlayer', {
+				layer: layers[i]
+			});
+			this.addLayer(layers[i]);
+		}
+		this.latLngs = L.KML.getLatLngs(xml);
+		this.fire('loaded');
+	},
+
+	latLngs: []
+});
+
+L.Util.extend(L.KML, {
+
+	parseKML: function (xml, kmlOptions) {
+		var style = this.parseStyles(xml, kmlOptions);
+		this.parseStyleMap(xml, style);
+		var el = xml.getElementsByTagName('Folder');
+		var layers = [], l;
+		for (var i = 0; i < el.length; i++) {
+			if (!this._check_folder(el[i])) { continue; }
+			l = this.parseFolder(el[i], style);
+			if (l) { layers.push(l); }
+		}
+		el = xml.getElementsByTagName('Placemark');
+		for (var j = 0; j < el.length; j++) {
+			if (!this._check_folder(el[j])) { continue; }
+			l = this.parsePlacemark(el[j], xml, style);
+			if (l) { layers.push(l); }
+		}
+		el = xml.getElementsByTagName('GroundOverlay');
+		for (var k = 0; k < el.length; k++) {
+			l = this.parseGroundOverlay(el[k]);
+			if (l) { layers.push(l); }
+		}
+		return layers;
+	},
+
+	// Return false if e's first parent Folder is not [folder]
+	// - returns true if no parent Folders
+	_check_folder: function (e, folder) {
+		e = e.parentNode;
+		while (e && e.tagName !== 'Folder')
+		{
+			e = e.parentNode;
+		}
+		return !e || e === folder;
+	},
+
+	parseStyles: function (xml, kmlOptions) {
+		var styles = {};
+		var sl = xml.getElementsByTagName('Style');
+		for (var i=0, len=sl.length; i<len; i++) {
+			var style = this.parseStyle(sl[i], kmlOptions);
+			if (style) {
+				var styleName = '#' + style.id;
+				styles[styleName] = style;
+			}
+		}
+		return styles;
+	},
+
+	parseStyle: function (xml, kmlOptions) {
+		var style = {}, poptions = {}, ioptions = {}, el, id;
+
+		var attributes = {color: true, width: true, Icon: true, href: true, hotSpot: true};
+
+		function _parse (xml) {
+			var options = {};
+			for (var i = 0; i < xml.childNodes.length; i++) {
+				var e = xml.childNodes[i];
+				var key = e.tagName;
+				if (!attributes[key]) { continue; }
+				if (key === 'hotSpot')
+				{
+					for (var j = 0; j < e.attributes.length; j++) {
+						options[e.attributes[j].name] = e.attributes[j].nodeValue;
+					}
+				} else {
+					var value = (e.childNodes && e.childNodes.length) ? e.childNodes[0].nodeValue : null;
+					if(!value) {
+						continue;
+					}
+					if (key === 'color') {
+						options.opacity = parseInt(value.substring(0, 2), 16) / 255.0;
+						options.color = '#' + value.substring(6, 8) + value.substring(4, 6) + value.substring(2, 4);
+					} else if (key === 'width') {
+						options.weight = parseInt(value);
+					} else if (key === 'Icon') {
+						ioptions = _parse(e);
+						if (ioptions.href) { options.href = ioptions.href; }
+					} else if (key === 'href') {
+						options.href = value;
+					}
+				}
+			}
+			return options;
+		}
+
+		el = xml.getElementsByTagName('LineStyle');
+		if (el && el[0]) { style = _parse(el[0]); }
+		el = xml.getElementsByTagName('PolyStyle');
+		if (el && el[0]) { poptions = _parse(el[0]); }
+		if (poptions.color) { style.fillColor = poptions.color; }
+		if (poptions.opacity) { style.fillOpacity = poptions.opacity; }
+		el = xml.getElementsByTagName('IconStyle');
+		if (el && el[0]) { ioptions = _parse(el[0]); }
+		if (ioptions.href) {
+			var iconOptions = {
+				iconUrl: ioptions.href,
+				shadowUrl: null,
+				anchorRef: {x: ioptions.x, y: ioptions.y},
+				anchorType:	{x: ioptions.xunits, y: ioptions.yunits}
+			};
+
+			if (typeof kmlOptions === "object" && typeof kmlOptions.iconOptions === "object") {
+				L.Util.extend(iconOptions, kmlOptions.iconOptions);
+			}
+
+			style.icon = new L.KMLIcon(iconOptions);
+		}
+
+		id = xml.getAttribute('id');
+		if (id && style) {
+			style.id = id;
+		}
+
+		return style;
+	},
+
+	parseStyleMap: function (xml, existingStyles) {
+		var sl = xml.getElementsByTagName('StyleMap');
+
+		for (var i = 0; i < sl.length; i++) {
+			var e = sl[i], el;
+			var smKey, smStyleUrl;
+
+			el = e.getElementsByTagName('key');
+			if (el && el[0]) { smKey = el[0].textContent; }
+			el = e.getElementsByTagName('styleUrl');
+			if (el && el[0]) { smStyleUrl = el[0].textContent; }
+
+			if (smKey === 'normal')
+			{
+				existingStyles['#' + e.getAttribute('id')] = existingStyles[smStyleUrl];
+			}
+		}
+
+		return;
+	},
+
+	parseFolder: function (xml, style) {
+		var el, layers = [], l;
+		el = xml.getElementsByTagName('Folder');
+		for (var i = 0; i < el.length; i++) {
+			if (!this._check_folder(el[i], xml)) { continue; }
+			l = this.parseFolder(el[i], style);
+			if (l) { layers.push(l); }
+		}
+		el = xml.getElementsByTagName('Placemark');
+		for (var j = 0; j < el.length; j++) {
+			if (!this._check_folder(el[j], xml)) { continue; }
+			l = this.parsePlacemark(el[j], xml, style);
+			if (l) { layers.push(l); }
+		}
+		el = xml.getElementsByTagName('GroundOverlay');
+		for (var k = 0; k < el.length; k++) {
+			if (!this._check_folder(el[k], xml)) { continue; }
+			l = this.parseGroundOverlay(el[k]);
+			if (l) { layers.push(l); }
+		}
+		if (!layers.length) { return; }
+		if (layers.length === 1) {
+			l = layers[0];
+		} else {
+			l = new L.FeatureGroup(layers);
+		}
+		el = xml.getElementsByTagName('name');
+		if (el.length && el[0].childNodes.length) {
+			l.options.name = el[0].childNodes[0].nodeValue;
+		}
+		return l;
+	},
+
+	parsePlacemark: function (place, xml, style, options) {
+		var h, i, j, k, el, il, opts = options || {};
+
+		el = place.getElementsByTagName('styleUrl');
+		for (i = 0; i < el.length; i++) {
+			var url = el[i].childNodes[0].nodeValue;
+			for (var a in style[url]) {
+				opts[a] = style[url][a];
+			}
+		}
+
+		il = place.getElementsByTagName('Style')[0];
+		if (il) {
+			var inlineStyle = this.parseStyle(place);
+			if (inlineStyle) {
+				for (k in inlineStyle) {
+					opts[k] = inlineStyle[k];
+				}
+			}
+		}
+
+		var multi = ['MultiGeometry', 'MultiTrack', 'gx:MultiTrack'];
+		for (h in multi) {
+			el = place.getElementsByTagName(multi[h]);
+			for (i = 0; i < el.length; i++) {
+				var layer = this.parsePlacemark(el[i], xml, style, opts);
+				if (layer === undefined)
+					continue;
+				this.addPlacePopup(place, layer);
+				return layer;
+			}
+		}
+
+		var layers = [];
+
+		var parse = ['LineString', 'Polygon', 'Point', 'Track', 'gx:Track'];
+		for (j in parse) {
+			var tag = parse[j];
+			el = place.getElementsByTagName(tag);
+			for (i = 0; i < el.length; i++) {
+				var l = this['parse' + tag.replace(/gx:/, '')](el[i], xml, opts);
+				if (l) { layers.push(l); }
+			}
+		}
+
+		if (!layers.length) {
+			return;
+		}
+		var layer = layers[0];
+		if (layers.length > 1) {
+			layer = new L.FeatureGroup(layers);
+		}
+
+		this.addPlacePopup(place, layer);
+		return layer;
+	},
+
+  addPlacePopup: function(place, layer) {
+    var el, i, j, name, descr = '';
+    el = place.getElementsByTagName('name');
+    if (el.length && el[0].childNodes.length) {
+      name = el[0].childNodes[0].nodeValue;
+    }
+    el = place.getElementsByTagName('description');
+    for (i = 0; i < el.length; i++) {
+      for (j = 0; j < el[i].childNodes.length; j++) {
+        descr = descr + el[i].childNodes[j].nodeValue;
+      }
+    }
+
+    if (name) {
+      layer.bindPopup('<h2>' + name + '</h2>' + descr, { className: 'kml-popup'});
+    }
+  },
+
+	parseCoords: function (xml) {
+		var el = xml.getElementsByTagName('coordinates');
+		return this._read_coords(el[0]);
+	},
+
+	parseLineString: function (line, xml, options) {
+		var coords = this.parseCoords(line);
+		if (!coords.length) { return; }
+		return new L.Polyline(coords, options);
+	},
+
+	parseTrack: function (line, xml, options) {
+		var el = xml.getElementsByTagName('gx:coord');
+		if (el.length === 0) { el = xml.getElementsByTagName('coord'); }
+		var coords = [];
+		for (var j = 0; j < el.length; j++) {
+			coords = coords.concat(this._read_gxcoords(el[j]));
+		}
+		if (!coords.length) { return; }
+		return new L.Polyline(coords, options);
+	},
+
+	parsePoint: function (line, xml, options) {
+		var el = line.getElementsByTagName('coordinates');
+		if (!el.length) {
+			return;
+		}
+		var ll = el[0].childNodes[0].nodeValue.split(',');
+		return new L.KMLMarker(new L.LatLng(ll[1], ll[0]), options);
+	},
+
+	parsePolygon: function (line, xml, options) {
+		var el, polys = [], inner = [], i, coords;
+		el = line.getElementsByTagName('outerBoundaryIs');
+		for (i = 0; i < el.length; i++) {
+			coords = this.parseCoords(el[i]);
+			if (coords) {
+				polys.push(coords);
+			}
+		}
+		el = line.getElementsByTagName('innerBoundaryIs');
+		for (i = 0; i < el.length; i++) {
+			coords = this.parseCoords(el[i]);
+			if (coords) {
+				inner.push(coords);
+			}
+		}
+		if (!polys.length) {
+			return;
+		}
+		if (options.fillColor) {
+			options.fill = true;
+		}
+		if (polys.length === 1) {
+			return new L.Polygon(polys.concat(inner), options);
+		}
+		return new L.MultiPolygon(polys, options);
+	},
+
+	getLatLngs: function (xml) {
+		var el = xml.getElementsByTagName('coordinates');
+		var coords = [];
+		for (var j = 0; j < el.length; j++) {
+			// text might span many childNodes
+			coords = coords.concat(this._read_coords(el[j]));
+		}
+		return coords;
+	},
+
+	_read_coords: function (el) {
+		var text = '', coords = [], i;
+		for (i = 0; i < el.childNodes.length; i++) {
+			text = text + el.childNodes[i].nodeValue;
+		}
+		text = text.split(/[\s\n]+/);
+		for (i = 0; i < text.length; i++) {
+			var ll = text[i].split(',');
+			if (ll.length < 2) {
+				continue;
+			}
+			coords.push(new L.LatLng(ll[1], ll[0]));
+		}
+		return coords;
+	},
+
+	_read_gxcoords: function (el) {
+		var text = '', coords = [];
+		text = el.firstChild.nodeValue.split(' ');
+		coords.push(new L.LatLng(text[1], text[0]));
+		return coords;
+	},
+
+	parseGroundOverlay: function (xml) {
+		var latlonbox = xml.getElementsByTagName('LatLonBox')[0];
+		var bounds = new L.LatLngBounds(
+			[
+				latlonbox.getElementsByTagName('south')[0].childNodes[0].nodeValue,
+				latlonbox.getElementsByTagName('west')[0].childNodes[0].nodeValue
+			],
+			[
+				latlonbox.getElementsByTagName('north')[0].childNodes[0].nodeValue,
+				latlonbox.getElementsByTagName('east')[0].childNodes[0].nodeValue
+			]
+		);
+		var attributes = {Icon: true, href: true, color: true};
+		function _parse (xml) {
+			var options = {}, ioptions = {};
+			for (var i = 0; i < xml.childNodes.length; i++) {
+				var e = xml.childNodes[i];
+				var key = e.tagName;
+				if (!attributes[key]) { continue; }
+				var value = e.childNodes[0].nodeValue;
+				if (key === 'Icon') {
+					ioptions = _parse(e);
+					if (ioptions.href) { options.href = ioptions.href; }
+				} else if (key === 'href') {
+					options.href = value;
+				} else if (key === 'color') {
+					options.opacity = parseInt(value.substring(0, 2), 16) / 255.0;
+					options.color = '#' + value.substring(6, 8) + value.substring(4, 6) + value.substring(2, 4);
+				}
+			}
+			return options;
+		}
+		var options = {};
+		options = _parse(xml);
+		if (latlonbox.getElementsByTagName('rotation')[0] !== undefined) {
+			var rotation = latlonbox.getElementsByTagName('rotation')[0].childNodes[0].nodeValue;
+			options.rotation = parseFloat(rotation);
+		}
+		return new L.RotatedImageOverlay(options.href, bounds, {opacity: options.opacity, angle: options.rotation});
+	}
+
+});
+
+L.KMLIcon = L.Icon.extend({
+	options: {
+		iconSize: [32, 32],
+		iconAnchor: [16, 16],
+	},
+	_setIconStyles: function (img, name) {
+		L.Icon.prototype._setIconStyles.apply(this, [img, name]);
+	},
+	_createImg: function (src, el) {
+		el = el || document.createElement('img');
+		el.onload = this.applyCustomStyles.bind(this,el)
+		el.src = src;
+		return el;
+	},
+	applyCustomStyles: function(img) {
+		var options = this.options;
+		var width = options.iconSize[0];
+		var height = options.iconSize[1];
+
+		this.options.popupAnchor = [0,(-0.83*height)];
+		if (options.anchorType.x === 'fraction')
+			img.style.marginLeft = (-options.anchorRef.x * width) + 'px';
+		if (options.anchorType.y === 'fraction')
+			img.style.marginTop  = ((-(1 - options.anchorRef.y) * height) + 1) + 'px';
+		if (options.anchorType.x === 'pixels')
+			img.style.marginLeft = (-options.anchorRef.x) + 'px';
+		if (options.anchorType.y === 'pixels')
+			img.style.marginTop  = (options.anchorRef.y - height + 1) + 'px';
+	}
+});
+
+
+L.KMLMarker = L.Marker.extend({
+	options: {
+		icon: new L.KMLIcon.Default()
+	}
+});
+
+// Inspired by https://github.com/bbecquet/Leaflet.PolylineDecorator/tree/master/src
+L.RotatedImageOverlay = L.ImageOverlay.extend({
+	options: {
+		angle: 0
+	},
+	_reset: function () {
+		L.ImageOverlay.prototype._reset.call(this);
+		this._rotate();
+	},
+	_animateZoom: function (e) {
+		L.ImageOverlay.prototype._animateZoom.call(this, e);
+		this._rotate();
+	},
+	_rotate: function () {
+        if (L.DomUtil.TRANSFORM) {
+            // use the CSS transform rule if available
+            this._image.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
+        } else if (L.Browser.ie) {
+            // fallback for IE6, IE7, IE8
+            var rad = this.options.angle * (Math.PI / 180),
+                costheta = Math.cos(rad),
+                sintheta = Math.sin(rad);
+            this._image.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
+                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
+        }
+	},
+	getBounds: function () {
+		return this._bounds;
+	}
+});

README.md

@@ -1,12 +1 @@
----
-title: Bhuvan
-emoji: 🐨
-colorFrom: yellow
-colorTo: blue
-sdk: gradio
-sdk_version: 5.4.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# bhuvan

data/Bhankhara-Df-11-he-5-2020-21.kml

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
+<Document>
+	<name>Bhankhara Df 11 he 5 2020-21</name>
+	<gx:CascadingStyle kml:id="__managed_style_2ECD90080C332BDE40E2">
+		<Style>
+			<IconStyle>
+				<scale>1.2</scale>
+				<Icon>
+					<href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href>
+				</Icon>
+				<hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/>
+			</IconStyle>
+			<LabelStyle>
+			</LabelStyle>
+			<LineStyle>
+				<color>ff2dc0fb</color>
+				<width>2.4389</width>
+			</LineStyle>
+			<PolyStyle>
+				<color>00ffffff</color>
+			</PolyStyle>
+			<BalloonStyle>
+				<displayMode>hide</displayMode>
+			</BalloonStyle>
+		</Style>
+	</gx:CascadingStyle>
+	<gx:CascadingStyle kml:id="__managed_style_175A38A9FB332BDE40E2">
+		<Style>
+			<IconStyle>
+				<Icon>
+					<href>https://earth.google.com/earth/rpc/cc/icon?color=1976d2&amp;id=2000&amp;scale=4</href>
+				</Icon>
+				<hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/>
+			</IconStyle>
+			<LabelStyle>
+			</LabelStyle>
+			<LineStyle>
+				<color>ff2dc0fb</color>
+				<width>1.62594</width>
+			</LineStyle>
+			<PolyStyle>
+				<color>00ffffff</color>
+			</PolyStyle>
+			<BalloonStyle>
+				<displayMode>hide</displayMode>
+			</BalloonStyle>
+		</Style>
+	</gx:CascadingStyle>
+	<StyleMap id="__managed_style_02B2DF3F10332BDE40E2">
+		<Pair>
+			<key>normal</key>
+			<styleUrl>#__managed_style_175A38A9FB332BDE40E2</styleUrl>
+		</Pair>
+		<Pair>
+			<key>highlight</key>
+			<styleUrl>#__managed_style_2ECD90080C332BDE40E2</styleUrl>
+		</Pair>
+	</StyleMap>
+	<Placemark id="0CB71842DC32C34FCCDC">
+		<name>bhankhara Df </name>
+		<LookAt>
+			<longitude>73.23288329025303</longitude>
+			<latitude>23.92934021215672</latitude>
+			<altitude>351.5436929053654</altitude>
+			<heading>22.18919554855782</heading>
+			<tilt>0</tilt>
+			<gx:fovy>30.00004101</gx:fovy>
+			<range>1627.012775921321</range>
+			<altitudeMode>absolute</altitudeMode>
+		</LookAt>
+		<styleUrl>#__managed_style_02B2DF3F10332BDE40E2</styleUrl>
+		<Polygon>
+			<outerBoundaryIs>
+				<LinearRing>
+					<coordinates>
+						73.23288020595453,23.92934920152165,0 73.2320424558106,23.9295414782706,0 73.23177030588151,23.9290796121952,0 73.23049283479376,23.92975711242018,0 73.2296710069635,23.93046123326063,0 73.2287325848189,23.92942606846368,0 73.23001098215263,23.92845402165482,0 73.23132082595696,23.92741616938989,0 73.23174863262777,23.92774125965506,0 73.23240516734252,23.92789815610602,0 73.23288020595453,23.92934920152165,0 
+					</coordinates>
+				</LinearRing>
+			</outerBoundaryIs>
+		</Polygon>
+	</Placemark>
+</Document>
+</kml>

data/Bhankhara_Df_11_he_5_2020-21.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "Bhankhara Df 11 he 5 2020-21",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "Name": "bhankhara Df " }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 73.232880205954501, 23.9293492015216 ], [ 73.2320424558106, 23.9295414782706 ], [ 73.231770305881497, 23.929079612195199 ], [ 73.230492834793793, 23.929757112420202 ], [ 73.2296710069635, 23.930461233260601 ], [ 73.2287325848189, 23.929426068463702 ], [ 73.230010982152606, 23.928454021654801 ], [ 73.231320825956999, 23.9274161693899 ], [ 73.231748632627799, 23.9277412596551 ], [ 73.232405167342506, 23.927898156106 ], [ 73.232880205954501, 23.9293492015216 ] ] ] } }
+]
+}

geojson.html

@@ -0,0 +1,94 @@
+<html>
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/@turf/[email protected]/turf.min.js"></script>
+    <link rel="stylesheet" href="style.css"> <!-- Link to the external style.css file -->
+   
+</head>
+
+<body>
+    <header>Interactive GeoJSON Map Viewer</header>
+
+    <div id="map"></div>
+
+    <div id="stats">
+        <h3>GeoJSON Statistics</h3>
+        <div class="stat-item">
+            <div class="stat-label"><i>📐</i> Area (sq meters):</div>
+            <div id="area_sqm" class="value">Loading...</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-label"><i>🌍</i> Area (hectares):</div>
+            <div id="area_hectares" class="value">Loading...</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-label"><i>📍</i> Centroid:</div>
+            <div id="centroid" class="value">Loading...</div>
+        </div>
+        <div class="stat-item">
+            <span class="stat-label"><i>Summary:</i></span>
+            <div class="value" id="summary">Loading...</div>
+        </div>
+    </div>
+
+    <footer>&copy; 2024 GeoJSON Map Viewer by Sustainability Lab IIT Gandhinagar</footer>
+    <script src="geostats.js"></script> <!-- Custom script for area and centroid calculations -->
+
+    <script type="text/javascript">
+        // Initialize the map
+        const map = L.map('map').setView([58.4, 43.0], 11);
+
+        // Add a base map layer
+        new L.TileLayer('http://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}').addTo(map);
+
+        // Function to load GeoJSON and calculate statistics
+        function loadGeoJSON(url) {
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    const geoJsonLayer = L.geoJSON(data);
+                    geoJsonLayer.addTo(map);
+
+                    // Fit map to GeoJSON bounds
+                    map.fitBounds(geoJsonLayer.getBounds());
+
+                    // Call functions from gestats.js
+                const areaStats = calculateTotalArea(data);
+                const centroid = calculateCentroid(data);
+                const geometryCounts = countGeometryTypes(data);
+                const featureNames = getFeatureNames(data);
+
+                // Display area, centroid, and geometry summary in HTML
+                document.getElementById('area_sqm').textContent = areaStats.areaSqMeters.toFixed(2);
+                document.getElementById('area_hectares').textContent = areaStats.areaHectares.toFixed(2);
+                document.getElementById('centroid').textContent = 
+                    `Lat: ${centroid.geometry.coordinates[1].toFixed(5)}, 
+                    Lng: ${centroid.geometry.coordinates[0].toFixed(5)}`;
+                document.getElementById('summary').innerHTML = `
+                    <strong>Polygons:</strong> ${geometryCounts.Polygon} <br>
+                    <strong>Points:</strong> ${geometryCounts.Point} <br>
+                    <strong>LineStrings:</strong> ${geometryCounts.LineString} <br>
+                    <strong>MultiPolygons:</strong> ${geometryCounts.MultiPolygon} <br>
+                    <strong>Feature Names:</strong> ${featureNames.length > 0 ? featureNames.join(', ') : 'N/A'}
+                `;
+            })
+                .catch(error => {
+                    console.error('Error loading GeoJSON:', error);
+                    alert('Failed to load GeoJSON file. Please check the URL.');
+                });
+        }
+
+        // Get the GeoJSON URL from the query parameter 'geojson_url'
+        const urlParams = new URLSearchParams(window.location.search);
+        const geojsonUrl = urlParams.get('geojson_url');
+
+        // Load GeoJSON if a URL is provided
+        if (geojsonUrl) {
+            loadGeoJSON(geojsonUrl);
+        } else {
+            alert('Please provide a valid GeoJSON URL in the "geojson_url" query parameter.');
+        }
+    </script>
+</body>
+</html>

geostats.js

@@ -0,0 +1,52 @@
+// Function to calculate total area in square meters for polygons and multipolygons
+function calculateTotalArea(data) {
+    let totalAreaSqMeters = 0;
+
+    data.features.forEach(feature => {
+        if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
+            totalAreaSqMeters += turf.area(feature);
+        }
+    });
+
+    return {
+        areaSqMeters: totalAreaSqMeters,
+        areaHectares: totalAreaSqMeters / 10000 // Convert to hectares
+    };
+}
+
+// Function to calculate the centroid of all polygons and multipolygons
+function calculateCentroid(data) {
+    const polygonsOnly = {
+        type: "FeatureCollection",
+        features: data.features.filter(f => f.geometry.type === "Polygon" || f.geometry.type === "MultiPolygon")
+    };
+
+    return turf.centroid(polygonsOnly);
+}
+
+// Function to count different geometry types
+function countGeometryTypes(data) {
+    const geometryCounts = { Polygon: 0, Point: 0, LineString: 0, MultiPolygon: 0 };
+
+    data.features.forEach(feature => {
+        const geomType = feature.geometry.type;
+        if (geometryCounts[geomType] !== undefined) {
+            geometryCounts[geomType]++;
+        }
+    });
+
+    return geometryCounts;
+}
+
+// Function to retrieve feature names if available
+function getFeatureNames(data) {
+    const featureNames = [];
+
+    data.features.forEach(feature => {
+        if (feature.properties && feature.properties.name) {
+            featureNames.push(feature.properties.name);
+        }
+    });
+
+    return featureNames;
+}

kml.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Dynamic KML Map</title>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+        <script src="./L.KML.js"></script> <!-- Make sure this file is in the repo -->
+    </head>
+    <body>
+        <div style="width: 100vw; height: 100vh" id="map"></div>
+        <script type="text/javascript">
+            // Helper function to get URL parameters
+            function getParameterByName(name, url = window.location.href) {
+                name = name.replace(/[\[\]]/g, '\\$&');
+                const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+                const results = regex.exec(url);
+                if (!results) return null;
+                if (!results[2]) return '';
+                return decodeURIComponent(results[2].replace(/\+/g, ' '));
+            }
+
+            // Get the KML URL from the URL parameter
+            const kmlUrl = getParameterByName('kml_url');
+
+            if (kmlUrl) {
+                // Initialize map
+                const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 });
+                //const osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+                //const osm = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
+                const osm = new L.TileLayer('http://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}');
+                map.addLayer(osm);
+
+                // Load the KML file from the given URL
+                fetch(kmlUrl)
+                    .then(res => res.text())
+                    .then(kmltext => {
+                        const parser = new DOMParser();
+                        const kml = parser.parseFromString(kmltext, 'text/xml');
+                        const track = new L.KML(kml);
+                        map.addLayer(track);
+
+                        // Adjust map to show the KML
+                        const bounds = track.getBounds();
+                        map.fitBounds(bounds);
+                    })
+                    .catch(error => {
+                        console.error('Error loading KML:', error);
+                        alert('Failed to load KML file. Please check the URL.');
+                    });
+            } else {
+                alert('No KML URL provided. Please use the "kml_url" parameter in the URL.');
+            }
+        </script>
+    </body>
+</html>

streamlit-app.py

@@ -0,0 +1,93 @@
+import streamlit as st
+import folium
+from streamlit_folium import st_folium
+import gdown
+import os
+import json
+import requests
+
+# Function to download from Google Drive
+def download_from_gdrive(gdrive_url, output_path="temp_file"):
+    # Extract the file ID from the URL
+    file_id = gdrive_url.split('/d/')[1].split('/')[0]
+    gdrive_download_url = f"https://drive.google.com/uc?id={file_id}"
+    gdown.download(gdrive_download_url, output_path, quiet=False)
+    return output_path
+
+# Title
+st.title("KML/GeoJSON Viewer with Satellite Basemap")
+
+# Get URL from Streamlit's query parameters
+query_params = st.experimental_get_query_params()
+file_url = query_params.get("file_url", [None])[0]
+
+if file_url:
+    # Check if it's a Google Drive link
+    if "drive.google.com" in file_url:
+        # Download the file locally
+        local_file_path = download_from_gdrive(file_url)
+        file_extension = local_file_path.split('.')[-1]
+    else:
+        # Standard HTTP URL for direct access
+        try:
+            response = requests.get(file_url)
+            response.raise_for_status()  # Ensure URL is valid
+            file_extension = file_url.split('.')[-1]
+
+            # Save the content to a local file
+            with open("temp_file." + file_extension, 'wb') as file:
+                file.write(response.content)
+            local_file_path = "temp_file." + file_extension
+        except requests.exceptions.RequestException as e:
+            st.error(f"Error loading file: {e}")
+            local_file_path = None
+
+    if local_file_path:
+        # Create map without default tiles
+        m = folium.Map(tiles=None)
+
+        # Add Google Maps basemap
+        folium.TileLayer(
+            tiles='https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}',
+            attr='Google Maps',
+            name='Google Maps',
+            overlay=True,
+            control=True
+        ).add_to(m)
+
+        # Add Google Satellite basemap
+        folium.TileLayer(
+            tiles='https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            attr='Google Satellite',
+            name='Google Satellite',
+            overlay=True,
+            control=True
+        ).add_to(m)
+
+        # Determine if file is KML or GeoJSON and add accordingly
+        if file_extension.lower() == 'kml':
+            folium.Kml(local_file_path).add_to(m)
+        elif file_extension.lower() == 'geojson':
+            with open(local_file_path, 'r') as file:
+                geojson_data = json.load(file)
+            folium.GeoJson(geojson_data, name="GeoJSON Data").add_to(m)
+        else:
+            st.error("Unsupported file format. Please provide a KML or GeoJSON file.")
+            local_file_path = None
+
+        # Center and zoom on the layer
+        if local_file_path:
+            bounds = m.get_bounds()  # Adjusting the view to include KML or GeoJSON bounds
+            m.fit_bounds(bounds)
+
+        # Add a layer control to switch between basemaps
+        folium.LayerControl().add_to(m)
+
+        # Display the map in Streamlit
+        st_folium(m, width=700, height=500)
+
+        # Clean up the downloaded file after use
+        os.remove(local_file_path)
+
+else:
+    st.warning("Please provide a KML or GeoJSON URL as a query parameter, e.g., `?file_url=<your_file_url>`")

style.css

@@ -0,0 +1,86 @@
+/* Custom styling for GeoJSON viewer */
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+    font-family: 'Arial', sans-serif;
+    background-color: #e8eef1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header {
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+    background-color: #008080;
+    color: #fff;
+    font-size: 1.8em;
+    font-weight: bold;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#map {
+    width: 95%;
+    height: 70vh;
+    margin-top: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+#stats {
+    width: 95%;
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+#stats h3 {
+    font-size: 1.6em;
+    color: #333;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+#stats .stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+#stats .stat-item:last-child {
+    border-bottom: none;
+}
+
+#stats .stat-label {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    color: #555;
+}
+
+#stats .stat-label i {
+    font-style: normal;
+    color: #008080;
+    margin-right: 8px;
+}
+
+.value {
+    color: #008080;
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+footer {
+    padding: 10px;
+    text-align: center;
+    color: #666;
+    font-size: 0.9em;
+}