Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
leaflet-measure
Advanced tools
leaflet-measure - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| { | ||
| "name": "leaflet-measure", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "description": "Coordinate, linear, and area measure tool for Leaflet maps", | ||
@@ -5,0 +5,0 @@ "main": "src/leaflet-measure.js", |
120
README.md
| # leaflet-measure | ||
| Coordinate, linear, and area measure tool for Leaflet maps | ||
| Coordinate, linear, and area measure control for [Leaflet](http://leafletjs.com) maps. Extends [L.Control](http://leafletjs.com/reference.html#control). | ||
| [leaflet-measure Control Demo](http://ljagis.github.io/leaflet-measure) | ||
| <hr> | ||
| [Demo](http://ljagis.github.io/leaflet-measure) | ||
| [](http://ljagis.github.io/leaflet-measure) | ||
| <hr> | ||
| ## Install Options | ||
| - Clone.. `git clone https://github.com/ljagis/leaflet-measure.git` | ||
| - Install with [Bower](http://bower.io/).. `bower install leaflet-measure` | ||
| - Install with [npm](https://www.npmjs.com/).. `npm install leaflet-measure` | ||
| ## Use bundled `leaflet-measure.min.js` or `leaflet-measure.js` | ||
| Include the [Leaflet Source](http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js), `leaflet-measure.min.js`, and associated CSS stylesheets in your HTML page | ||
| ```html | ||
| <!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](https://www.npmjs.com/) | ||
| ```javascript | ||
| var L = require('leaflet'); | ||
| require('leaflet-measure'); | ||
| // Start creating maps | ||
| ``` | ||
| <hr> | ||
| ## 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](http://leafletjs.com/reference.html#control). | ||
| The measure control can be instantiated directly and added to a map: | ||
| ```javascript | ||
| var myMap = L.map('mapElementId', options); | ||
| var measureControl = new L.Control.Measure(options); | ||
| measureControl.addTo(myMap); | ||
| ``` | ||
| or instantiated via the factory: | ||
| ```javascript | ||
| var myMap = L.map('mapElementId', options); | ||
| var measureControl = L.control.measure(options); | ||
| measureControl.addTo(myMap); | ||
| ``` | ||
| or added to a map using map options: | ||
| ```javascript | ||
| var myMap = L.map('mapElementId', { | ||
| measureControl: true | ||
| }); | ||
| ``` | ||
| <hr> | ||
| ## Control options | ||
| ### position | ||
| `{ position: 'topright' }` | ||
| Standard Leaflet control [position options](http://leafletjs.com/reference.html#control-positions) | ||
| ### 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](http://leafletjs.com/reference.html#popup-options). | ||
| <hr> | ||
| ## 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 |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by127.26%
536049
- Number of package files
- increased by5.13%
41
- Number of lines in readme file
- increased by2320%
121
No dependency changes