Add vector slopes (#74)

* Update schema for layer-group type * Update with NASADEM * Improve support for substring layer targeting * Improve slope layer description * improve styling of layer opacity control * Update slope legend * Fix layer handling * Fix layer handling * Set fog values from style * Fix layer handling * Bump mapbox-gl * Update slope legend * Minor js optimization * Update layer names * Fix layer-group code * Remove layer opacity config * Read existing style fog * Add more fields in the inspect popup for context * Fix errors in handling existing fog * Add additional fields to inspect hover popups * Bump mapbox gl * Use ids for fog controls
publicmap · Jan 5, 2025 · 3c76775 · 3c76775
1 parent 98f2e02
commit 3c76775
Show file tree

Hide file tree

Showing 7 changed files with 2,716 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -7,5 +7,15 @@ Participatory GIS platform for Goa. Made with the latest map tools.
 - [Mapbox](https://www.mapbox.com/)
 - [Goa Town and Country Planning](https://tcp.goa.gov.in/)
 - [Goa Village Boundaries](https://projects.datameet.org/indian_village_boundaries/ga/)
-- [ISRO CartoDEM 2.5m/30m](https://bhuvan-app3.nrsc.gov.in/data/download/index.php)
-- [NASA Aster GDEM 30m](https://asterweb.jpl.nasa.gov/gdem.asp)
+
+### Terrain and Slope
+- [ISRO CartoDEM 2.5m resampled to30m](https://bhuvan-app3.nrsc.gov.in/data/download/index.php)
+- [NASA Global DEM 30m](https://asterweb.jpl.nasa.gov/gdem.asp)
+
+**Slope Classification**
+As per [Goa Town and Country Planning](https://tcp.goa.gov.in/),
+- <span style="display:inline-block;width:15px;height:15px;background:hsl(59, 96%, 59%);"></span> Greater than 10% or 1:10 = Restricted Development Slope 1 (RDS-1)
+- <span style="display:inline-block;width:15px;height:15px;background:hsl(40, 100%, 50%);"></span> Greater than 20% or 1:5 = Restricted Development Slope 2 (RDS-2)
+- <span style="display:inline-block;width:15px;height:15px;background:hsl(0, 99%, 65%);"></span> Greater than 25% or 1:4 = No Development Slope (NDS)
+- <span style="display:inline-block;width:15px;height:15px;background:hsl(270, 100%, 57%);"></span> Greater than 50% or 1:2 = No Development Slope (NDS)
+
diff --git a/assets/map-layer-slope-legend.jpg b/assets/map-layer-slope-legend.jpg
diff --git a/assets/map-layer-slope-legend.png b/assets/map-layer-slope-legend.png
diff --git a/assets/map-layer-slope-legend.svg b/assets/map-layer-slope-legend.svg
diff --git a/index.html b/index.html
@@ -41,8 +41,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <!-- Mapbox GL JS -->
-    <link href='https://api.mapbox.com/mapbox-gl-js/v3.9.0-beta.1/mapbox-gl.css' rel='stylesheet' />
-    <script src='https://api.mapbox.com/mapbox-gl-js/v3.9.0-beta.1/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.js'></script>
 
     <!-- Add Mapbox Geocoder CSS and JS -->
     <script
@@ -125,8 +125,6 @@ <h1 class="text-l"><a href="https://amche.in" class="text-white hover:underline"
             style: 'mapbox://styles/planemad/cm3gyibd3004x01qz08rohcsg',
             center: [73.9414, 15.4121],
             zoom: 9.99,
-            pitch: 69.6,
-            bearing: 56,
             hash: true,
             attributionControl: false
         });
@@ -236,19 +234,18 @@ <h1 class="text-l"><a href="https://amche.in" class="text-white hover:underline"
                             }
                         },
                         {
-                            title: 'Survey Boundaries',
+                            title: 'Survey Plot Boundaries',
                             description: 'Cadastral Boundaries',
                             headerImage: 'assets/map-layer-survey.png',
                             type: 'vector',
                             id: 'goa-cadastral',
                             url: 'https://indianopenmaps.fly.dev/not-so-open/cadastrals/goa/bhunaksha/{z}/{x}/{y}.pbf',
                             sourceLayer: 'Goa_Bhunaksha_Cadastrals',
-                            opacity: 0.7,
                             attribution: 'Source: <a href="https://bhunaksha.goa.gov.in/bhunaksha/">Goa Bhunaksha</a> - Collected by <a href="https://datameet.org">Datameet Community</a>',
                             style: {
-                                color: '#555',
-                                width: .2,
-                                fillOpacity: 0.03
+                                color: 'hsla(0, 0%, 33%, .8)',
+                                width: 1,
+                                fillOpacity: 0.2
                             },
                             initiallyChecked: true,
                             inspect: {
@@ -261,34 +258,41 @@ <h1 class="text-l"><a href="https://amche.in" class="text-white hover:underline"
                             }
                         },
                         {
-                            title: 'Hill Slopes',
-                            description: 'Select Slope Source:',
+                            id: 'slope-zones',
+                            title: 'Slope Zoning',
+                            description: 'Slope zone classification using terrain data',
+                            type: 'layer-group',
                             headerImage: 'assets/map-layer-slope.png',
-                            legendImage: 'assets/map-layer-slope-legend.jpg',
-                            layers: [
+                            legendImage: 'assets/map-layer-slope-legend.png',
+                            groups: [
                                 {
-                                    id: 'isro slope',
-                                    label: 'ISRO CartoDEM 2.5m (Bardez)',
-                                    sourceUrl: 'https://bhuvan-app3.nrsc.gov.in/data/',
+                                    id: 'cartodem-2-5-m',
+                                    title: 'ISRO CartoDEM 2.5m (Partial)',
+                                    attribution: 'https://bhuvan-app3.nrsc.gov.in/data/',
                                     location: 'Guirim'
                                 },
+                                {
+                                    id: 'nasadem-30-m',
+                                    title: 'NASA NASADEM 30m',
+                                    attribution: 'https://asterweb.jpl.nasa.gov/gdem.asp',
+                                    location: 'Goa'
+                                },
                                 {
                                     id: 'aster slope',
-                                    label: 'NASA Aster 30m (Goa Coast)',
-                                    sourceUrl: 'https://gdemdl.aster.jspacesystems.or.jp/index_en.html',
+                                    title: 'NASA Aster 30m (Goa Coast)',
+                                    attribution: 'https://gdemdl.aster.jspacesystems.or.jp/index_en.html',
                                     location: 'Panaji'
                                 }
                             ]
                         },
                         {
-                            title: 'Landuse Zones',
+                            title: 'Landuse Zoning Plans',
                             description: 'Regional Development Plans 2021',
                             headerImage: 'assets/map-layer-rdp.png',
                             legendImage: 'assets/map-layer-rdp-legend.jpg',
                             type: 'tms',
                             id: 'goa-rdp-map',
                             url: 'https://mapwarper.net/mosaics/tile/2054/{z}/{x}/{y}.png',
-                            opacity: 0.9,
                             attribution: 'RDP 2021 plans from Goa TCP https://tcp.goa.gov.in/',
                             initiallyChecked: true
                         },
@@ -300,7 +304,6 @@ <h1 class="text-l"><a href="https://amche.in" class="text-white hover:underline"
                             type: 'tms',
                             id: 'goa-soi-map',
                             url: 'https://indianopenmaps.fly.dev/soi/osm/{z}/{x}/{y}.webp',
-                            opacity: 0.9,
                             attribution: 'Open Series Toposheets from Survey of India https://onlinemaps.surveyofindia.gov.in/FreeMapSpecification.aspx',
                         },
                         {
@@ -311,7 +314,6 @@ <h1 class="text-l"><a href="https://amche.in" class="text-white hover:underline"
                             type: 'tms',
                             id: 'goa-czmp-map',
                             url: 'https://indianopenmaps.fly.dev/not-so-open/coastal/goa/regulation/ncscm/{z}/{x}/{y}.webp',
-                            opacity: 0.9,
                             attribution: 'Source: <a href="https://czmp.ncscm.res.in/">National Center For Sustainable Coastal Management</a> - Collected by <a href="https://datameet.org">Datameet Community</a>'
                         },
                         {