Leaflet.QgsMeasure

Leaflet control to measure segment distances on the map like Qgis Ruler.

Requires Leaflet 1.0.0+ branches

Requires Leaflet.Draw

Install

npm install leaflet-qgsmeasure

Demo

Check out the demo

Usage

As map option:

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

Or like any control:

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

Docs

Options:

// 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
  },
};

Methods

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

Events:

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

  // 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...,
  }

• qgsmeasure:newmeasure - Event fired when the user starts a new measure
• qgsmeasure: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.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

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.

Changelog

See CHANGELOG.md.

Authors

• Gabriel Russo

Forked from (Credits)

• Gilles Bassière
• Alexandra Janin
• Makina Corpus