leaflet-arearuler v0.0.1

Leaflet.AreaRuler

A simple tool to measure area on map.

Requires Leaflet 1.0.0+ branches

Requires Leaflet.Draw

Install

npm install leaflet-arearuler

Demo

Check out the demo

Usage

As map option:

const map = L.map('map', { areaRulerControl: true });

Or like any control:

const options = {}; // See docs to see options
L.Control.arearuler(options)
  .addTo(map);

Docs

Options:

// Default plugin options object, change wathever you want
options = {
  position: 'topleft',
  unity: 'ha', // m, ha, alq, km
  shapeOptions: {
    color: "#d07f03",
    stroke: true,
    weight: 4,
    opacity: 0.7,
    fill: true,
  },
  icon: new L.DivIcon({
    iconSize: new L.Point(9, 9),
    className: 'leaflet-div-icon leaflet-editing-icon',
  }),
  text: {
    title: 'Measure area',
  },
};

Methods

Events:

• arearuler:measurestart - Event fired when the measure handler are added to map
• arearuler:newarea - Event fired when a new segment/vertex is added

  // Event data example: unity = ha
  {
    converted: {
      area: 11.48,
      unity: "ha"
    },
    original: {
      area: 114848.85315528093,
      unity: "m"
    },
    type: "arearuler:newarea",
  // target ...,
  // sourceTarget...,
  }

• arearuler:newmeasure - Event fired when the user starts a new measure
• arearuler:measurestop - Event fired when the measure handler are removed from map

Custom html button

If you are developing a web application and you want to use your own html button outside the map container, you can use the following code:

const options = {
  button: document.getElementById('my-button'), // Your html button HTML reference
}

const control = L.Control.arearuler(options)
  .addTo(map);

After that, you have to make your own segments output box using the events described above.

You can see the example here

Development

npm install --save-dev     # install dependencies
npm run dev  # Compile and save at dist/ after any change

Open index.html in your browser and start editing.

Authors

• Gabriel Russo