Skip to content

gabriel-russo/Leaflet.QgsMeasure

 
 

Repository files navigation

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

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.3%
  • HTML 43.1%
  • CSS 6.6%