|
<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"> |
|
|
|
</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>© 2024 GeoJSON Map Viewer by Sustainability Lab IIT Gandhinagar</footer> |
|
<script src="geostats.js"></script> |
|
|
|
<script type="text/javascript"> |
|
|
|
const map = L.map('map').setView([58.4, 43.0], 11); |
|
|
|
|
|
new L.TileLayer('http://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}').addTo(map); |
|
|
|
|
|
function loadGeoJSON(url) { |
|
fetch(url) |
|
.then(response => response.json()) |
|
.then(data => { |
|
const geoJsonLayer = L.geoJSON(data); |
|
geoJsonLayer.addTo(map); |
|
|
|
|
|
map.fitBounds(geoJsonLayer.getBounds()); |
|
|
|
|
|
const areaStats = calculateTotalArea(data); |
|
const centroid = calculateCentroid(data); |
|
const geometryCounts = countGeometryTypes(data); |
|
const featureNames = getFeatureNames(data); |
|
|
|
|
|
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.'); |
|
}); |
|
} |
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
const geojsonUrl = urlParams.get('geojson_url'); |
|
|
|
|
|
if (geojsonUrl) { |
|
loadGeoJSON(geojsonUrl); |
|
} else { |
|
alert('Please provide a valid GeoJSON URL in the "geojson_url" query parameter.'); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|
