@concord-consortium/react-leaflet-canvas-layer

react-leaflet-canvas-layer

a canvas layer for react-leaflet.

install

yarn add react-leaflet-canvas-layer # yarn 
npm install react-leaflet-canvas-layer # npm 

Usage

import React from 'react';
import { render } from 'react-dom';
import { Map, TileLayer } from 'react-leaflet';
import CanvasLayer from 'react-leaflet-canvas-layer';

class App extends React.Component {
  drawMethod(info) {
    const ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
    ctx.fillStyle = 'rgba(255,116,0, 0.2)';
    var point = info.map.latLngToContainerPoint([-37, 175]);
    ctx.beginPath();
    ctx.arc(point.x, point.y, 200, 0, Math.PI * 2.0, true, true);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  render() {
    return (
      <div>
        <Map center={[-37, 175]} zoom={13}>
          <CanvasLayer
            drawMethod={this.drawMethod}
          />
          <TileLayer
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png"
          />
        </Map>
      </div>
    );
  }
}

render(<App />, document.getElementById('app'));

API

CanvasLayer component props:

• data: a custom dataset
• drawMethod: required a custom render function e.g. (view) => { /*draw something*/} view contains parameters :map, canvas, bounds, size, zoom, center, corner, data.

License

MIT.