npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet-measure-locale

v1.4.1

Published

Coordinate, linear, and area measure tool for Leaflet maps

Downloads

3

Readme

leaflet-measure

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

Demo

Demo

Install Options

  • Clone.. git clone https://github.com/bekerov/leaflet-measure.git

  • Install with Bower.. bower install leaflet-measure

  • Install with npm.. npm install leaflet-measure-locale

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-locale');

// 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

primaryLengthUnit | secondaryLengthUnit

{ primaryLengthUnit: 'feet', secondaryLengthUnit: 'miles' }

Units used to display length results. secondaryLengthUnit is optional.

Valid values are feet, meters, miles, and kilometers

primaryAreaUnit | secondaryAreaUnit

{ primaryAreaUnit: 'acres', secondaryAreaUnit: undefined }

Units used to display area results. secondaryAreaUnit is optional.

Valid values are acres, hectares, sqfeet, sqmeters, and sqmiles

activeColor

{ activeColor: '#ABE67E' }

Base color to use for map features rendered while actively performing a measurement. Value should be a color represented as a hexadecimal string.

completedColor

{ completedColor: #C8F2BE }

Base color to use for features generated from a completed measurement. Value should be a color represented as a hexadecimal string.

popupOptions

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

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

units

Custom units to make available to the measurement calculator. Packaged units are feet, meters, miles, and kilometers for length and acres, hectares, sqfeet, sqmeters, and sqmiles for areas. Additional unit definitions can be added to the packaged units using this option.

Define units as

{
  someNewUnit: {
    factor: 0.001, // Required. Factor to apply when converting to this unit. Length in meters or area in sq meters will be multiplied by this factor.
    display: 'My New Unit', // Required. How to display in results, like.. "300 Meters (0.3 My New Unit)".
    decimals: 2 // Number of decimals to round results when using this unit. `0` is the default value if not specified.
  },
  myOtherNewUnit: {
    factor: 1234,
    display: 'My Other Unit',
    decimals: 0
  }
}

localization

{ localization: 'ru' }

Desired locale to translate texts.

Valid values are en, es and ru. If not specified, defaults to en.

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