Add Support for Vector Tile Basemaps

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
+    "leaflet.vectorgrid": "^1.3.0",
     "lodash": "^4.17.21",
     "proj4": "^2.8.0",
     "proj4leaflet": "^1.0.2",

src/components/BCVectorBaseMap/BCVectorBaseMap.js

@@ -0,0 +1,74 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import GenericVectorBaseMap from '../GenericVectorBaseMap';
+import vectorTileStyling from '../../styles/3005.js';
+import L from 'leaflet';
+
+export default class BCVectorBaseMap extends PureComponent {
+    static propTypes = {
+        center: PropTypes.shape({
+            lat: PropTypes.number.isRequired,
+            lng: PropTypes.number.isRequired,
+        }).isRequired,
+        zoom: PropTypes.number.isRequired,
+        minZoom: PropTypes.number,
+        maxZoom: PropTypes.number,
+        mapRef: PropTypes.func,
+    };
+
+    static defaultProps = {
+        mapRef: () => null,
+    };
+
+    static tileset = {
+        url: process.env.REACT_APP_BC_VECTOR_BASE_MAP_TILES_URL,
+        projection: {
+            code: 'EPSG:3005',
+            proj4def: '+proj=aea +lat_1=50 +lat_2=58.5 +lat_0=45 +lon_0=-126 +x_0=1000000 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
+        },
+        tileMatrix: {
+            metersPerUnit: 1,
+            tileMatrixMinX: -20037508,
+            tileMatrixMaxX: 20037508,
+            tileWidth: 256,
+            tileMatrixMinY: -20037508,
+            tileMatrixMaxY: 20037508,
+            numResolutions: 14,
+        },
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    };
+
+    static initialViewport = {
+        center: {
+            lat: 55.0,
+            lng: -125,
+        },
+        zoom: 6,
+    };
+
+    render() {
+        const { children, ...rest } = this.props;
+        const wmsLayerOptions = {
+            service: "WMS",
+            layers: 'OMT-NA-TEXT-ZF-LG', //OpenMapTiles, North America, Text only, Zoom filtered, Layer group
+            format: 'image/png8',
+            transparent: true,
+            version: '1.1.0',
+            crs: L.CRS.EPSG3005,
+            tiled: true,
+            buffer: 2,
+            formatOptions: 'dpi:300;antialiasing:off',
+        };
+        return (
+            <GenericVectorBaseMap
+                tileset={BCVectorBaseMap.tileset}
+                vectorTileStyling={vectorTileStyling}
+                wmsUrl={process.env.REACT_APP_LABELS_WMS_URL}
+                wmsLayerOptions={wmsLayerOptions}
+                {...rest}
+            >
+                {children}
+            </GenericVectorBaseMap>
+        );
+    }
+}

src/components/BCVectorBaseMap/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "BCVectorBaseMap",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./BCVectorBaseMap.js"
+}

src/components/GenericVectorBaseMap/GenericVectorBaseMap.js

@@ -0,0 +1,160 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { MapContainer, useMap } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.vectorgrid';
+import L from 'leaflet';
+import 'proj4';
+import 'proj4leaflet';
+import { projCRSOptions } from '../../utils/crs';
+
+const LabelsLayer = ({ wmsUrl, wmsOptions }) => {
+    const map = useMap();
+
+    useEffect(() => {
+        const wmsLayer = L.tileLayer.wms(wmsUrl, wmsOptions).addTo(map);
+        return () => {
+            map.removeLayer(wmsLayer);
+        };
+    }, [map]);
+
+    return null;
+};
+
+const VectorGridLayer = ({ tilesUrl, vectorTileStyling, zoom, center, crs, wmsUrl, wmsOptions }) => {
+
+    const map = useMap();
+
+
+    useEffect(() => {
+        const vectorTileOptions = {
+            rendererFactory: L.canvas.tile,
+            interactive: false,
+            tolerance: function (zoom) {
+                if (zoom < 10) return 4;
+                if (zoom < 14) return 2;
+                return 1;
+            },
+            getFeatureId: (feature) => feature.properties.id,
+            /* Not included in vector style below:
+              - omt_place,
+              - omt_aeroway,
+              - omt_aerodrome_label,
+              - omt_building,
+              - omt_poi,
+              - omt_mountain_peak,
+              - omt_transportation_name,
+              - omt_water_name.
+            */
+            vectorTileLayerStyles: {
+                omt_park: vectorTileStyling.park,
+                omt_landcover: vectorTileStyling.landcover,
+                omt_water: vectorTileStyling.water,
+                omt_boundary: vectorTileStyling.boundary,
+                omt_landuse: vectorTileStyling.landuse,
+                omt_waterway: vectorTileStyling.waterway,
+                omt_aeroway: vectorTileStyling.aeroway,
+                omt_transportation: vectorTileStyling.transportation,
+
+            }
+        };
+
+        try {
+            const vectorGrid = L.vectorGrid.protobuf(tilesUrl, vectorTileOptions).addTo(map);
+            return () => {
+                map.removeLayer(vectorGrid);
+            };
+        } catch (error) {
+            console.error('Error setting up vector grid:', error);
+        }
+    }, [map]);
+
+    return null;
+};
+
+VectorGridLayer.propTypes = {
+    tilesUrl: PropTypes.string.isRequired,
+    vectorTileStyling: PropTypes.object.isRequired,
+    zoom: PropTypes.number.isRequired,
+    center: PropTypes.shape({
+        lat: PropTypes.number.isRequired,
+        lng: PropTypes.number.isRequired
+    }).isRequired,
+    crs: PropTypes.instanceOf(L.CRS).isRequired,
+    wmsUrl: PropTypes.string.isRequired,
+    wmsOptions: PropTypes.object.isRequired,
+};
+
+const GenericVectorBaseMap = ({
+    tileset: { url, projection, tileMatrix },
+    center,
+    zoom,
+    mapRef,
+    vectorTileStyling,
+    wmsUrl,
+    wmsLayerOptions,
+    children,
+    ...rest
+}) => {
+    const crs = new L.Proj.CRS(
+        projection.code,
+        projection.proj4def,
+        { ...projCRSOptions(tileMatrix), ...projection.options }
+    );
+
+    return (
+        <MapContainer
+            style={{ backgroundColor: '#EEEEEE' }} // alternative?:'#e7e5cf'
+            crs={crs}
+            minZoom={0}
+            maxZoom={tileMatrix.numResolutions}
+            center={center}
+            zoom={zoom}
+            ref={mapRef}
+            {...rest}
+        >
+            <VectorGridLayer
+                tilesUrl={url}
+                vectorTileStyling={vectorTileStyling}
+                zoom={zoom}
+                center={center}
+                crs={crs}
+                wmsUrl={wmsUrl}
+                wmsOptions={wmsLayerOptions}
+                {...rest}
+            />
+            <LabelsLayer wmsUrl={wmsUrl} wmsOptions={wmsLayerOptions} {...rest} />
+            {children}
+        </MapContainer>
+    );
+};
+
+GenericVectorBaseMap.propTypes = {
+    tileset: PropTypes.shape({
+        url: PropTypes.string.isRequired,
+        projection: PropTypes.shape({
+            code: PropTypes.string.isRequired,
+            proj4def: PropTypes.string.isRequired,
+            options: PropTypes.object,
+        }).isRequired,
+        tileMatrix: PropTypes.object.isRequired,
+    }).isRequired,
+    center: PropTypes.shape({
+        lat: PropTypes.number.isRequired,
+        lng: PropTypes.number.isRequired,
+    }).isRequired,
+    zoom: PropTypes.number.isRequired,
+    mapRef: PropTypes.func,
+    vectorTileStyling: PropTypes.object.isRequired,
+    wmsUrl: PropTypes.string.isRequired,
+    wmsLayerOptions: PropTypes.shape({
+        layers: PropTypes.string,
+        format: PropTypes.string,
+        transparent: PropTypes.bool,
+        version: PropTypes.string,
+        crs: PropTypes.instanceOf(L.CRS)
+    }).isRequired,
+    children: PropTypes.node,
+};
+
+export default GenericVectorBaseMap;

src/components/GenericVectorBaseMap/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "GenericVectorBaseMap",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./GenericVectorBaseMap.js"
+}

src/index.js

@@ -1,5 +1,7 @@
 export { default as GenericBaseMap } from './components/GenericBaseMap';
+export { default as GenericVectorBaseMap } from './components/GenericVectorBaseMap';
 export { default as BCBaseMap } from './components/BCBaseMap';
+export { default as BCVectorBaseMap } from './components/BCVectorBaseMap';
 export { default as YNWTBaseMap } from './components/YNWTBaseMap';
 export { default as SetView } from './components/SetView';
 export { default as StaticControl } from './components/StaticControl';