Update Tiles Section and Exercises (#147)

* - Improved introduction about OGC API - Tiles support on pygeoapi * - added geojson for Estonian dataset * - updated elastic example url * - added tiles tippecanoe exercise * - updated documentation for mvt elastic exercise * - updated collection name for tiles * - updated client examples of vector tiles * - added link to tiles micro website --------- Co-authored-by: doublebyte1 <[email protected]>
geopython · May 15, 2024 · dd1b65f · dd1b65f
1 parent c2e7e6d
commit dd1b65f
Show file tree

Hide file tree

Showing 12 changed files with 351 additions and 119 deletions.
diff --git a/workshop/content/docs/assets/images/leaflet-estonia.png b/workshop/content/docs/assets/images/leaflet-estonia.png
diff --git a/workshop/content/docs/assets/images/leaflet-estonia2.png b/workshop/content/docs/assets/images/leaflet-estonia2.png
diff --git a/workshop/content/docs/assets/images/qgis-vtiles1.png b/workshop/content/docs/assets/images/qgis-vtiles1.png
diff --git a/workshop/content/docs/assets/images/qgis-vtiles2-estonia.png b/workshop/content/docs/assets/images/qgis-vtiles2-estonia.png
diff --git a/workshop/content/docs/assets/images/vtiles-attributes.png b/workshop/content/docs/assets/images/vtiles-attributes.png
diff --git a/workshop/content/docs/assets/images/vtiles-estonia.png b/workshop/content/docs/assets/images/vtiles-estonia.png
diff --git a/workshop/content/docs/assets/images/vtiles-estonia2.png b/workshop/content/docs/assets/images/vtiles-estonia2.png
diff --git a/workshop/content/docs/publishing/ogcapi-tiles.md b/workshop/content/docs/publishing/ogcapi-tiles.md
diff --git a/workshop/exercises/data/bathingwater-estonia.geojson b/workshop/exercises/data/bathingwater-estonia.geojson
diff --git a/workshop/exercises/elastic/README.md b/workshop/exercises/elastic/README.md
@@ -1,3 +1,3 @@
 # pygeoapi with Elasticsearch (ES)
 
-For those interested in working with Elasticsearch, please see [the pygeoapi GitHub repository](https://github.com/geopython/pygeoapi/tree/master/docker/examples/elastic) for a full example Docker setup.
+For those interested in working with Elasticsearch, please see [the pygeoapi GitHub repository](https://github.com/geopython/pygeoapi-examples/tree/main/docker/elastic) for a full example Docker setup.
diff --git a/workshop/exercises/html/vector-tiles.html b/workshop/exercises/html/vector-tiles.html
@@ -2,33 +2,43 @@
 <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>
+
+<!-- load leaflet -->
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin="" />
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""></script>
+
+<!-- load VectorGrid extension -->
+<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
+
 <script>    
-map = L.map('map').setView({ lat: 17.425181, lng: 78.5493906 }, 11);
+map = L.map('map').setView({ lat: 58.37, lng: 26.72 }, 7);
 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";
+    if (val < 0) {return "#ffffff"}
+    else if (val < 400) {return "#ffbfbf"}
+    else if (val < 1500) {return "#ff8080"}
+    else if (val < 3000) {return  "#ff4040"}
+    else return "#ff0000";
  }
  var vectorTileStyling = {
-    greater_hyderabad_municipal_corporation_ward_Boundaries: function(properties) {
+    bathingwaterestonia: function(properties) {
+        console.log(properties)
         return ({
             fill: true,
-            fillColor: getColor(properties.objectid),
+            fillColor: getColor(properties.visitors),
             color: "#ffffff",
             fillOpacity: 1.0,
-            weight: 5,
-            //color: "#ffffff",
+            weight: 1,
             opacity: 1.0,
         });
     }
@@ -38,11 +48,8 @@
         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); 
+    var pbfURL='http://localhost:5000/collections/bathingwater-estonia/tiles/WebMercatorQuad/{z}/{x}/{y}?f=mvt';
+    var pbfLayer=L.vectorGrid.protobuf(pbfURL,mapVectorTileOptions).addTo(map); 
 </script>
 </body>
 </html>
diff --git a/workshop/exercises/pygeoapi.config.yml b/workshop/exercises/pygeoapi.config.yml
@@ -278,49 +278,49 @@ resources:
 #                     name: GTiff
 #                     mimetype: application/tiff
 ## END - EXERCISE 3 - Coverages
-
 ## START - EXERCISE 4 - Tiles
-#     hyderabad:
+#     bathingwater-estonia:
 #         type: collection
-#         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.
+#         title: Drinking water sources
+#         description: Data of drinking water sources used by water supply systems under the supervision of the Health Board from the Water Health Information System.
 #         keywords:
-#            - Boundaries
-#            - Administrative
-#            - Ward
+#           - Water
+#           - Water bodies
+#           - Drilled wells
+#           - Surface water
+#           - Groundwater
+#           - Environmental health
+#           - Health
+#           - Drinking water
 #         links:
 #             - type: text/html
 #               rel: canonical
 #               title: information
-#               href: https://livingatlas-dcdev.opendata.arcgis.com/datasets/a090c89d52f1498f96a82e97b8bfb83e_0/about
+#               href: https://avaandmed.eesti.ee/api/datasets/slug/joogiveeallikad
 #               hreflang: en-US
 #         extents:
 #             spatial:
-#                 bbox: [78.2379194985166180,17.2908061510471995,78.6217049083810764,17.5618443356918768]
+#                 bbox: [22.2290936066586440,57.6912449743385451,28.2024877654160555,59.6097269178904412]
 #                 crs: http://www.opengis.net/def/crs/OGC/1.3/CRS84
 #             temporal:
-#                 begin: 2011-11-11
+#                 begin: null
 #                 end: null  # or empty
 #         providers:
 #             - type: feature
 #               name: GeoJSON
-#               data: /data/greater_hyderabad_municipal_corporation_ward_Boundaries.geojson
-#               id_field: objectid
+#               data: /data/bathingwater-estonia.geojson
+#               id_field: id
 #             - type: tile
-#               name: MVT
-#               data: /data/tiles
+#               name: MVT-tippecanoe
+#               data: /data/tiles/  # local directory tree
 #               options:
-#                 metadata_format: tilejson # default | tilejson
 #                 zoom:
 #                     min: 0
 #                     max: 16
-#                 schemes:
-#                     - WorldCRS84Quad
 #               format:
 #                     name: pbf
 #                     mimetype: application/vnd.mapbox-vector-tile
-## END - EXERCISE 4 - Tiles
-
+# # END - EXERCISE 4 - Tiles
 ## START - EXERCISE 5 - Maps
 #     airports:
 #         type: collection