Leaflet control to measure segment distances on the map like Qgis Ruler.
npm install leaflet-qgsmeasureLeaflet control to measure segment distances on the map like Qgis Ruler.
Requires Leaflet 1.0.0+ branches
Requires Leaflet.Draw
``shell`
npm install leaflet-qgsmeasure
Check out the demo
As map option:
`js`
const map = L.map('map', { measureControl: true });
Or like any control:
`js`
const options = {}; // See docs to see options
L.Control.qgsmeasure(options)
.addTo(map);
`js`
// Default plugin options object, change wathever you want
options = {
position: 'topleft',
shapeOptions: {
color: "#d07f03",
stroke: true,
weight: 4,
opacity: 0.7,
},
icon: new L.DivIcon({
iconSize: new L.Point(9, 9),
className: 'leaflet-div-icon leaflet-editing-icon',
}),
text: {
title: 'Measure distances', // Plugin Button Text
segments_title: 'Segments (meters)', // Segments box title
segments_from: "From ", // Segment start label
segments_to: "to ", // Segment end label
segments_total: 'Total: ', // Total distance label
segments_meters: "m", // Meters label
},
};
| Method Name | Description |
|-------------|---------------------------------------------------|
| enabled | Gets a true/false of whether the ruler is enabled |
| getSegments | Returns a list with all segments in map |
| toggle | Toggles the ruler on or off |
* qgsmeasure:measurestart - Event fired when the measure handler are added to mapqgsmeasure:newsegment
* - Event fired when a new segment/vertex is added`
js`
// Event data example: Event fired after inserting 2 -> 3 segment
{
segment: {
from: 2,
to: 3,
distance: 420.2680458268559
},
segments: [ // List with every segment on map
{
from: 1,
to: 2,
distance: 729.5775168261067
},
{
from: 2,
to: 3,
distance: 420.2680458268559
},
],
type: "qgsmeasure:newsegment",
// target ...,
// sourceTarget...,
}
* - Event fired when the user starts a new measureqgsmeasure: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.qgsmeasure(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.
See CHANGELOG.md.
* Gabriel Russo
* Gilles Bassière
* Alexandra Janin
* Makina Corpus