react-leaflet-linear-ruler

React wrapper of leaflet-linear-measurement for react-leaflet.

Linear ruler polylines for Leaflet maps. Extends L.Control.

Installation

Install via NPM

npm install react-leaflet-linear-ruler --save

Include linear-ruler.css stylesheet to your project.

<link rel="stylesheet" href="linear-ruler.css">

Usage example

import { Map, TileLayer } from 'react-leaflet';
import LinearRuler from 'react-leaflet-linear-ruler';

// defaults
const options = {
  position: 'topleft',
  unitSystem: 'imperial',
  color: '#FF0080',
  type: 'line',
  color: '#4D90FE',
  fillColor: '#fff',
  type: 'node',
  features: ['node', 'line', 'polygon', 'ruler', 'paint', 'drag', 'rotate', 'nodedrag', 'trash'],
  pallette: ['#FF0080', '#4D90FE', 'red', 'blue', 'green', 'orange', 'black'],
  dashArrayOptions: ['5, 5', '5, 10', '10, 5', '5, 1', '1, 5', '0.9', '15, 10, 5', '15, 10, 5, 10', '15, 10, 5, 10, 15', '5, 5, 1, 5'],
  fill: true,
  stroke: true,
  dashArray: [5, 5],
  weight: 2,
  opacity: 1,
  fillOpacity: 0.5,
  radius: 3,
  doubleClickSpeed: 300
};

<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <LinearRuler {...options} />
</Map>

License

MIT License