react-leaflet-gridcanvas

React leaflet component to display grid and some info in the grid.

Usage no npm install needed!

<script type="module">
  import reactLeafletGridcanvas from 'https://cdn.skypack.dev/react-leaflet-gridcanvas';
</script>

README

react-leaflet-gridcanvas

React leaflet component to display grid and some info in the grid.

Supports react-leaflet v1 and v2

You can see an example project on react-leaflet-components-examples repository

working demo page

Usage

install package

npm i react-leaflet-gridcanvas

import to project

import { GridCanvas } from 'react-leaflet-gridcanvas'

use it in the map

<GridCanvas />

default props

color = 'white'
centerText = 'zoom: #z' // #z will replace with zoom value
options = {
  noWrap: true,
  bounds: [[-90, -180], [90, 180]]
}

centerText can be function :

<GridCanvas centerText={
  ({x, y, z}) => {
    // do what ever you want
    return `x: ${x}, y: ${y}, z: ${z}`;
    // or
    // return 'x: #x, y: #y, z: #z'
  }
}/>