Parks and Recreation Program (PRP) Map

A React library for displaying vector features on interactive maps using OpenLayers.

Installation

npm install @bcgov/prp-map

Usage

Basic VectorFeatureMap

import { VectorFeatureMap } from '@bcgov/prp-map';

const MyMap = () => {
  const layers = [
    {
      id: "my-features",
      features: myFeatures,
      visible: true
    }
  ];

  return (
    <VectorFeatureMap 
      layers={layers}
      defaultZoom={10}
      center={[-123.1207, 49.2827]} // Vancouver coordinates
    />
  );
};

Using Custom Base Layers

You can provide your own base layers instead of using the default ones:

import { VectorFeatureMap, BaseLayerConfig } from '@bcgov/prp-map';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import MVT from 'ol/format/MVT';

const MyMapWithCustomBaseLayers = () => {
  const customBaseLayers: BaseLayerConfig[] = [
    new VectorTileLayer({
      source: new VectorTileSource({
        format: new MVT(),
        url: 'https://your-tile-server/{z}/{x}/{y}.mvt',
        wrapX: true,
      }),
    }),
  ];

  const layers = [
    {
      id: "my-features",
      features: myFeatures,
      visible: true
    }
  ];

  return (
    <VectorFeatureMap 
      layers={layers}
      baseLayers={customBaseLayers}
      defaultZoom={10}
    />
  );
};

API Reference

VectorFeatureMap Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | layers | VectorLayerConfig[] | Required | Array of vector layer configurations | | style | React.CSSProperties | undefined | Optional CSS styles for the map container | | children | ReactNode | undefined | Child components to render within the map context | | enableTracking | boolean | false | Enables/disables Matomo tracking | | defaultZoom | number | 4 | Initial zoom level for the map | | minZoom | number | 1 | Minimum zoom level for the map | | maxZoom | number | 18 | Maximum zoom level for the map | | center | [number, number] | undefined | Initial center coordinate for the map | | extent | [number, number, number, number] | undefined | Extent to fit the map to | | baseLayers | BaseLayerConfig[] | undefined | Custom base layers (falls back to defaults if not provided) |

VectorLayerConfig

| Property | Type | Description | |----------|------|-------------| | id | string | Unique identifier for the layer | | features | Feature[] | OpenLayers features to display | | layerInstance | Layer | Pre-constructed OpenLayers layer | | visible | boolean | Whether the layer is visible | | onLayerAdded | (extent: Coordinate) => void | Callback when layer is added to map |

BaseLayerConfig

A type alias for OpenLayers Layer - any OpenLayers layer can be used as a base layer.

Development

1. Run npm install to install dependencies
2. Run npm run dev to start the development server
3. Open your browser and navigate to http://localhost:3000 to view the example application

Creating new components

• Create a new folder in the src/components directory
• Add a new file for your component, e.g., MyComponent.tsx
• Export the component as a default export
• Add the export to the src/index.ts file to make it available as part of the library
• Add it to the example application by importing and using it in src/App.tsx
• Run npm run dev to see your changes in the example application

Publishing

1. Ensure you are a maintainer in the @bcgov NPM organization
2. Update the version in package.json
3. Run npm login to log in to your NPM account
4. Run npm run publish which will:
   • Build the library
   • Publish it to NPM