Merge pull request #122 from doublebyte1/dev

Improved OGC API - Tiles module
geopython · Dec 6, 2023 · 6576436 · 6576436
2 parents ab67c45 + 22b9520
commit 6576436
Show file tree

Hide file tree

Showing 9 changed files with 393 additions and 115 deletions.
diff --git a/workshop/content/docs/assets/images/leaflet-hyderabad.png b/workshop/content/docs/assets/images/leaflet-hyderabad.png
diff --git a/workshop/content/docs/assets/images/qgis-vtiles2-hyderabad.png b/workshop/content/docs/assets/images/qgis-vtiles2-hyderabad.png
diff --git a/workshop/content/docs/assets/images/qgis-vtiles4-hyderabad.png b/workshop/content/docs/assets/images/qgis-vtiles4-hyderabad.png
diff --git a/workshop/content/docs/assets/images/vtiles-es.png b/workshop/content/docs/assets/images/vtiles-es.png
diff --git a/workshop/content/docs/assets/images/vtiles-hyderabad.png b/workshop/content/docs/assets/images/vtiles-hyderabad.png
diff --git a/workshop/content/docs/publishing/ogcapi-tiles.md b/workshop/content/docs/publishing/ogcapi-tiles.md
diff --git a/.../exercises/data/greater_hyderabad_municipal_corporation_ward_Boundaries.geojson b/.../exercises/data/greater_hyderabad_municipal_corporation_ward_Boundaries.geojson
diff --git a/workshop/exercises/html/vector-tiles.html b/workshop/exercises/html/vector-tiles.html
@@ -1,23 +1,48 @@
-    <html>
-    <head><title>OGC API - Tiles exercise</title></head>
-    <body>
-    <div id="map" style="width:100vw;height:100vh;"></div>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
-    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
-    <script>
-    map = L.map('map').setView({ lat: 43.79, lng: 11.25 }, 12);
-    map.addLayer(
-        new L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
-        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        subdomains: 'abcd',
-        minZoom: 1,
-        maxZoom: 16,
-        ext: 'jpg'
-        }));
-    map.addLayer(new L.vectorGrid.protobuf(
-        'http://localhost:5000/collections/Cycle/tiles/WorldCRS84Quad/{z}/{x}/{y}?f=mvt', 
-        { rendererFactory: L.canvas.tile }));
-    </script>
-    </body>
-    </html>
+<html>
+<head><title>OGC API - Tiles exercise</title></head>
+<body>
+<div id="map" style="width:100vw;height:100vh;"></div>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
+<script>    
+map = L.map('map').setView({ lat: 17.425181, lng: 78.5493906 }, 11);
+map.addLayer(
+    new L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
+    minZoom: 1,
+    maxZoom: 16,
+    }));
+ function getColor(val){
+    if (val < 40) {return "#f2e6c7"}
+    else if (val < 80) {return "#8fa37e"}
+    else if (val < 100) {return "#f0d17d"}
+    else if (val < 120) {return  "#d7ded1"}
+    else return "#c2d0d9";
+ }
+ var vectorTileStyling = {
+    greater_hyderabad_municipal_corporation_ward_Boundaries: function(properties) {
+        return ({
+            fill: true,
+            fillColor: getColor(properties.objectid),
+            color: "#ffffff",
+            fillOpacity: 1.0,
+            weight: 5,
+            //color: "#ffffff",
+            opacity: 1.0,
+        });
+    }
+} 
+    var mapVectorTileOptions = {
+        rendererFactory: L.canvas.tile,
+        interactive: true,
+        vectorTileLayerStyles: vectorTileStyling,
+        };
+    var pbfURL='http://localhost:5000/collections/Hyderabad/tiles/WorldCRS84Quad/{z}/{x}/{y}?f=mvt';
+    var pbfLayer=L.vectorGrid.protobuf(pbfURL,mapVectorTileOptions).on('click',function(e) {
+        console.log(e.layer);
+    L.DomEvent.stop(e);
+    }).addTo(map); 
+</script>
+</body>
+</html>
diff --git a/workshop/exercises/pygeoapi.config.yml b/workshop/exercises/pygeoapi.config.yml
@@ -315,38 +315,38 @@ resources:
 #                  mimetype: application/tiff
 ## END - EXERCISE 3 - Coverages
 
-## START - EXERCISE 4 - Tiles
-    # Cycle:
+# START - EXERCISE 4 - Tiles
+    # Hyderabad:
     #     type: collection
-    #     title: Cycle Circulation Area in Florence
-    #     description: Cycle lanes and other cycle paths in the city of Florence.
+    #     title: Greater Hyderabad Municipal Corporation ward boundaries
+    #     description: The city ward boundaries represent the administrative and electoral boundary areas of the city. It plays a great role in planning of the city, for each council of the municipal corporation.
     #     keywords:
-    #         - cycle
+    #        - Boundaries
+    #        - Administrative
+    #        - Ward
     #     links:
     #         - type: text/html
     #           rel: canonical
     #           title: information
-    #           href: http://opendata.comune.firenze.it/?q=metarepo/datasetinfo&id=52d8d3ab-eae5-400e-8561-d974f8612de0
+    #           href: https://livingatlas-dcdev.opendata.arcgis.com/datasets/a090c89d52f1498f96a82e97b8bfb83e_0/about
     #           hreflang: en-US
     #     extents:
     #         spatial:
-    #             bbox: [-180,-90,180,90]
+    #             bbox: [78.2379194985166180,17.2908061510471995,78.6217049083810764,17.5618443356918768]
     #             crs: http://www.opengis.net/def/crs/OGC/1.3/CRS84
     #         temporal:
     #             begin: 2011-11-11
     #             end: null  # or empty
     #     providers:
     #         - type: feature
     #           name: GeoJSON
-    #           data: /data/cycle-lanes-firenze.geojson
-    #           id_field: accicid
+    #           data: /data/greater_hyderabad_municipal_corporation_ward_Boundaries.geojson
+    #           id_field: objectid
     #         - type: tile
     #           name: MVT
     #           data: /data/tiles
-    #           #data: tests/data/tiles/DATASET
     #           options:
     #             metadata_format: tilejson # default | tilejson
-    #             bounds: [[11.1861935050234251,43.7512761718001855],[11.3125196304517655,43.8129406631082645]]
     #             zoom:
     #                 min: 0
     #                 max: 16
@@ -355,7 +355,7 @@ resources:
     #           format:
     #                 name: pbf
     #                 mimetype: application/vnd.mapbox-vector-tile
-## END - EXERCISE 4 - Tiles
+# END - EXERCISE 4 - Tiles
 
 ## START - EXERCISE 5 - Maps
     # wms-facade-demo: