Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

leaflet-measure

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

leaflet-measure

Coordinate, linear, and area measure tool for Leaflet maps

0.2.1
Source
npm

Version published: 10 years ago

Weekly downloads: 3.8K; increased by0.18%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

leaflet-measure

Coordinate, linear, and area measure control for Leaflet maps. Extends L.Control.

Demo

Install Options

Clone.. git clone https://github.com/ljagis/leaflet-measure.git
Install with Bower.. bower install leaflet-measure
Install with npm.. npm install leaflet-measure

Use bundled `leaflet-measure.min.js` or `leaflet-measure.js`

Include the Leaflet Source, leaflet-measure.min.js, and associated CSS stylesheets in your HTML page

<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  <link rel="stylesheet" href="leaflet-measure.css">
</head>
<body>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="leaflet-measure.min.js"></script>
  <script>
    // Start creating maps
  </script>
</body>
</html>

Use with npm

var L = require('leaflet');
require('leaflet-measure');

// Start creating maps

Add control to a Leaflet map

leaflet-measure adds L.Control.Measure. This control may be used with the standard Leaflet control workflows described in the Leaflet docs.

The measure control can be instantiated directly and added to a map:

var myMap = L.map('mapElementId', options);
var measureControl = new L.Control.Measure(options);
measureControl.addTo(myMap);

or instantiated via the factory:

var myMap = L.map('mapElementId', options);
var measureControl = L.control.measure(options);
measureControl.addTo(myMap);

or added to a map using map options:

var myMap = L.map('mapElementId', {
  measureControl: true
});

Control options

position

{ position: 'topright' }

Standard Leaflet control position options

markerSize

{ markerSize: 4 }

Size of circle marker used as symbology for vertexes of measurement graphics. All other map feature styles (marker colors, area color and opacity, line widths, etc..) can be customized using CSS. Marker size is not available for styling in this way.

popupOptions

popupOptions: { className: 'leaflet-measure-resultpopup', autoPanPadding: [10, 10] }

Options applied to the popup of the resulting measure feature. Properties my be any standard Leaflet popup options.

Customizing map feature styles

Map features may be styled using CSS SVG style attributes. Features generated from leaflet-measure measurements are given the following class names:

layer-measurecollector: Transparent layer covering full map and catching click and drag events
layer-measurearea: Feature displaying area of an active measurement
layer-measureboundary: Feature displaying the linear path of an active measurement
layer-measurevertex: Feature added at each vertex (measurement click) of an active measurement
layer-measuredrag: Symbol following cursor while moving during an active measurement
layer-measure-resultarea: Feature added to the map as a permanent layer resulting from an area (3+ points) measurement
layer-measure-resultline: Feature added to the map as a permanent layer resulting from a linear (2 point) measurement
layer-measure-resultpoint: Featured added to the map as a permanent layer resulting from a point (single click) measurement

Keywords

FAQs

What is leaflet-measure?

Is leaflet-measure popular?

Is leaflet-measure well maintained?

Package last updated on 03 Mar 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install