load tile layer from separate tile server

scripts/add_tippecanoe_layer_names.cjs

@@ -0,0 +1,33 @@
+// For the tiling proof of concept:
+// We want each feature in our geojson to become a layer in the mbtiles database, and for this we need to
+// inject the tippecanoe.layer property so that tippecanoe generates these layers. We'll set the value
+// of this prop to the feature id
+// Currently doing proof of concept for Brazil level 2 only!
+// In future we will probably include this processing in our tile server repo
+
+/* eslint-disable import/no-dynamic-require */
+const path = require("path");
+const fs = require("fs");
+
+const dir = `${__dirname}/../public/dengue/may24/resources/geojson/admin2/`;
+const inputFile = path.normalize(`${dir}gadm41_BRA_2_100pc.json`);
+const outputFile = path.normalize(`${dir}gadm41_BRA_2_100pc_for_tippecanoe.json`);
+console.log(`Transforming geojson at ${inputFile}`);
+
+const input = require(inputFile);
+const features = input.features;
+console.log(`found ${features.length} features`);
+features.forEach((feature) => {
+    const id = feature.properties.GID_2;
+    feature.tippecanoe = {
+        layer: id
+    };
+});
+
+const output = JSON.stringify(input);
+fs.writeFile(outputFile, output, (err) => {
+    if (err) {
+        throw err;
+    }
+    console.log(`Saved to ${outputFile}`);
+});

src/components/Choropleth.vue

@@ -42,7 +42,7 @@ import { useIndicatorColors } from "../composables/useIndicatorColors";
 import { useLeaflet } from "../composables/useLeaflet";
 import "leaflet/dist/leaflet.css";
 import { useTooltips } from "../composables/useTooltips";
-import { APP_BASE_ROUTE } from "../router/utils";
+import { APP_BASE_ROUTE, APP_BASE_URL } from "../router/utils";
 import { routerPush } from "../utils";
 import { backgroundLayer } from "./utils";
 import { useLoadingSpinner } from "../composables/useLoadingSpinner";

src/composables/useLeaflet.ts

@@ -18,6 +18,8 @@ import { useAppStore } from "../stores/appStore";
 import { countryAdmin1OutlineStyle, countryOutlineStyle, minZoom } from "../components/utils";
 import { useDataSummary } from "./useDataSummary";
 import { MapFeature } from "../types/resourceTypes";
+import { APP_BASE_URL } from "../router/utils";
+import 'leaflet/dist/leaflet.css';
 
 type TooltipOptionAndContent = { content: string; options?: TooltipOptions };
 
@@ -62,7 +64,7 @@ export const useLeaflet = (
 
     const { dataSummary } = useDataSummary(bounds);
 
-    const { countryBoundingBoxes, admin0GeojsonFeature, admin1Geojson, mapSettings } = storeToRefs(useAppStore());
+    const { countryBoundingBoxes, admin0GeojsonFeature, admin1Geojson, admin2Geojson, mapSettings } = storeToRefs(useAppStore());
 
     const getRegionBounds = (countryId?: string) => {
         if (Object.keys(countryBoundingBoxes.value).length === 0) return null;
@@ -143,13 +145,44 @@ export const useLeaflet = (
         };
 
         // TODO: fix up types again - shouldn't really need to use L
-        vectorGridLayer.value = vectorGrid.slicer(geoJsonDocument, {
+        /*vectorGridLayer.value = vectorGrid.slicer(geoJsonDocument, {
             //rendererFactory: L.canvas.tile, // or L.svg.tile
             interactive: true,
             vectorTileLayerStyles: {
                 sliced: style
             }
-        }).on("click",
+        })
+        .on("click",
+            clickEvent
+        ).on("mouseover", (e: LayerMouseEvent) => {
+            const content = getTooltip(e);
+            closeTooltip(); //close any existing tooltip
+            tooltip.value =  L.tooltip({ sticky: true, permanent: false})
+                .setContent(content)
+                .setLatLng(e.latlng)
+                .openOn(leafletMap);
+        }).on("mouseout", () => {
+            closeTooltip();
+        })
+        .addTo(leafletMap);*/
+        const testBounds = getRegionBounds("BRA"); // set bounds on region2 tile layer to only get the tile(s) we need
+        // This is a bit tedious but doesn't seem to be any way around it - need to provide styles as a dictionary where
+        // keys are layer names i.e. IDs of each feature. They call all have the same value - the function to calculate
+        // feature style!
+        const vectorTileLayerStyles = Object.fromEntries(admin2Geojson.value["BRA"].map((feature) => [feature.properties.GID_2, style]));
+
+        const vectorTileOptions = {
+            vectorTileLayerStyles,
+           // rendererFactory: L.canvas.tile, // or L.svg.tile
+            interactive: true,
+            maxNativeZoom: 10,
+            tms: true, // y values are inverted without this!
+            bounds: [testBounds.getSouthWest(), testBounds.getNorthEast()]
+        }
+        const testTileUrl = `http://localhost:5000/testtiles/{z}/{x}/{y}`;
+
+        const pbfLayer=  vectorGrid.protobuf(testTileUrl,vectorTileOptions);
+        pbfLayer.on("click",
             clickEvent
         ).on("mouseover", (e: LayerMouseEvent) => {
             const content = getTooltip(e);
@@ -162,6 +195,7 @@ export const useLeaflet = (
             closeTooltip();
         }).addTo(leafletMap);
 
+
         // adding country outline if we have a admin0GeojsonFeature
         if (admin0GeojsonFeature.value) {
             const latLngs = GeoJSON.coordsToLatLngs(admin0GeojsonFeature.value.geometry.coordinates, 2);