A simple tool to measure area on map
npm install leaflet-arearulerA simple tool to measure area on map.
Requires Leaflet 1.0.0+ branches
Requires Leaflet.Draw
``shell`
npm install leaflet-arearuler
Check out the demo
As map option:
`js`
const map = L.map('map', { areaRulerControl: true });
Or like any control:
`js`
const options = {}; // See docs to see options
L.Control.arearuler(options)
.addTo(map);
`js`
// 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',
},
};
| Method Name | Description |
|-------------|---------------------------------------------------|
| enabled | Gets a true/false of whether the ruler is enabled |
| setOptions | Update options after instantiate |
| toggle | Toggles the ruler on or off |
* arearuler:measurestart - Event fired when the measure handler are added to maparearuler:newarea
* - Event fired when a new segment/vertex is added`
js`
// Event data example: unity = ha
{
converted: {
area: 11.48,
unity: "ha"
},
original: {
area: 114848.85315528093,
unity: "m"
},
type: "arearuler:newarea",
// target ...,
// sourceTarget...,
}
* - Event fired when the user starts a new measurearearuler:measurestop
* - Event fired when the measure handler are removed from map
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:
`javascript
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
`shell`
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.
* Gabriel Russo