react-canada-map

react-canada-map | React Component for an Interactive Map of Canada with Typescript Support

The map of Canada is divided into provinces and territories, each of which can have custom styles and click interactions.

Example

Installation

Requires react 17 or higher. Compatible with JS and Typescript.

Run:

yarn add react-canada-map

or

npm install react-canada-map --save

Usage

Javascript Example:

import React from "react"
import CanadaMap from "react-canada-map"

function App() {
  const mapClickHandler = (province, event) => {
    console.log("province clicked: ", province)
  }

  const customizeProvince = () => {
    return {
      ON: {
        fillColor: "DarkRed",
        onHoverColor: "black",
      },
      NB: {
        fillColor: "#000000",
      },
      QC: {
        onHoverColor: "#FF69B4",
      },
    }
  }

  return (
    <CanadaMap
      customize={customizeProvince()}
      fillColor="ForestGreen"
      onHoverColor="Gold"
      onClick={mapClickHandler}
    ></CanadaMap>
  )
}

export default App

Typescript Example:

import React, { Component } from "react"
import CanadaMap, { Provinces } from "react-canada-map"

interface Props {}
interface State {}

class App extends Component<Props, State> {
  clickHandler = (prov: Provinces) => {
    if (prov === Provinces.AB) {
      console.log("You clicked on: ", prov)
    }
  }

  render() {
    const customization = {
      [Provinces.AB]: {
        fillColor: "red",
      },
    }
    return (
      <CanadaMap
        customize={customization}
        onClick={this.clickHandler}
      ></CanadaMap>
    )
  }
}

export default App

Props

prop	description	default-value
onClick	The generic click handler	null
width	The width for rendering, numeric, no px suffix	1113
height	The height for rendering, numeric, no px suffix	942
defaultFillColor	The default color map fill color	#D3D3D3
defaultHoverColor	The default color for a province on hovor	#ffffff
customize	customization options for a specific province	{}

The onClick function optionally takes the province abbreviation (see Types below) and the MouseEvent (type of React.MouseEvent) as arguments, allowing you to take custom actions depending on which province was clicked.

The customize object maps province abbreviations to an object in which you can specify the fillColor and onHoverColor strings to customize individual provinces / territories.

Types

In Javascript, province abbreviations are passed as strings.

In Typescript, the Provinces enum can be imported and used as shown in the Typescript example above. Additionally, the ProvinceCustomizations object can be imported, which declares the interface for the objects stored in 'customize'.

The possible province / territory abbreviations are:

• "BC"
• "AB"
• "SK"
• "MB"
• "ON"
• "QC"
• "NB"
• "NS"
• "PE"
• "NL"
• "YT"
• "NT"
• "NU"

License

MIT

Sources

The graphics are based on this open source SVG file. The package is based on react-usa-map.