New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
leaflet-measure
Advanced tools
leaflet-measure - npm Package Compare versions
Comparing version 2.1.7 to 3.0.0
| { | ||
| "name": "leaflet-measure", | ||
| "version": "2.1.7", | ||
| "version": "3.0.0", | ||
| "description": "Coordinate, linear, and area measure tool for Leaflet maps", | ||
| "main": "src/leaflet-measure.js", | ||
| "scripts": { | ||
| "test": "grunt test", | ||
| "build": "grunt build" | ||
| }, | ||
| "repository": { | ||
@@ -26,34 +22,52 @@ "type": "git", | ||
| ], | ||
| "author": "Brandon Copeland <br@ndoncopeland.com>", | ||
| "author": "LJA Engineering, Inc - GIS <gisdev@ljaengineering.com>", | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "lint": "eslint --ext js src/", | ||
| "build": "webpack --config webpack.prod.js -p", | ||
| "start:dev": "webpack-dev-server --open --config webpack.dev.js", | ||
| "precommit": "lint-staged", | ||
| "prepublish": "yarn build", | ||
| "ghpages": "yarn build && gh-pages -d dist" | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "eslint" | ||
| ], | ||
| "*.{js,scss}": [ | ||
| "prettier --write", | ||
| "git add" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "brfs": "^1.4.3", | ||
| "color": "^0.8.0", | ||
| "geocrunch": "^0.1.1", | ||
| "humanize": "0.0.9", | ||
| "i18n-2": "^0.6.3", | ||
| "underscore": "^1.7.0" | ||
| "@turf/area": "^5.1.5", | ||
| "@turf/length": "^5.1.5", | ||
| "lodash": "^4.17.5" | ||
| }, | ||
| "devDependencies": { | ||
| "browserify": "^10.0.0", | ||
| "browserify-shim": "^3.8.12", | ||
| "grunt": "^0.4.5", | ||
| "grunt-browserify": "^3.3.0", | ||
| "grunt-contrib-clean": "^0.6.0", | ||
| "grunt-contrib-jshint": "^0.11.0", | ||
| "grunt-contrib-sass": "^0.9.2", | ||
| "grunt-contrib-uglify": "^0.7.0", | ||
| "grunt-jscs": "^1.2.0", | ||
| "grunt-release": "^0.11.0", | ||
| "leaflet": "^0.7.3", | ||
| "svg2png": "^1.1.0" | ||
| "babel-core": "^6.26.0", | ||
| "babel-loader": "^7.1.2", | ||
| "babel-preset-env": "^1.6.1", | ||
| "babel-runtime": "^6.26.0", | ||
| "copy-webpack-plugin": "^4.4.1", | ||
| "css-loader": "^0.28.9", | ||
| "eslint": "^4.17.0", | ||
| "eslint-plugin-import": "^2.8.0", | ||
| "extract-text-webpack-plugin": "^3.0.2", | ||
| "gh-pages": "^1.1.0", | ||
| "glob": "^7.1.2", | ||
| "html-loader": "^0.5.5", | ||
| "husky": "^0.14.3", | ||
| "i18n-webpack-plugin": "^1.0.0", | ||
| "lint-staged": "^6.1.0", | ||
| "node-sass": "^4.7.2", | ||
| "prettier": "^1.10.2", | ||
| "sass-loader": "^6.0.6", | ||
| "style-loader": "^0.20.1", | ||
| "webpack": "^3.10.0", | ||
| "webpack-dev-server": "^2.11.1" | ||
| }, | ||
| "browserify": { | ||
| "transform": [ | ||
| "brfs" | ||
| ] | ||
| }, | ||
| "browserify-shim": { | ||
| "leaflet": "global:L" | ||
| "peerDependencies": { | ||
| "leaflet": "^1.0.0" | ||
| } | ||
| } |
@@ -7,49 +7,15 @@ # leaflet-measure | ||
| ## [Demo](http://ljagis.github.io/leaflet-measure) | ||
| [](http://ljagis.github.io/leaflet-measure) | ||
| TODO. Screenshot | ||
| <hr> | ||
| ## Install Options | ||
| - Clone.. `git clone https://github.com/ljagis/leaflet-measure.git` | ||
| ## Usage | ||
| - Install with [Bower](http://bower.io/).. `bower install leaflet-measure` | ||
| TODO. Add usage | ||
| - 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 | ||
@@ -82,2 +48,3 @@ | ||
| ## Control options | ||
@@ -152,10 +119,2 @@ | ||
| ### localization | ||
| `{ localization: 'en' }` | ||
| Locale to translate displayed text. | ||
| Available locales include `en` (default), `ca`, `cn`, `da`, `de`, `de_CH`, `en_UK`, `es`, `fa`, `fil_PH`, `fr`, `it`, `nl`, `pl`, `pt_BR`, `pt_PT`, `ru` and `tr`. | ||
| ### decPoint | thousandsSep | ||
@@ -169,2 +128,3 @@ | ||
| ## Events | ||
@@ -198,2 +158,3 @@ | ||
| ## Customizing map feature styles | ||
@@ -216,1 +177,8 @@ | ||
| - **layer-measure-resultpoint**: Featured added to the map as a permanent layer resulting from a point (single click) measurement | ||
| <hr> | ||
| ## Internationalization | ||
| TODO. Internationalization |
| // calc.js | ||
| // measure calculations | ||
| var _ = require('underscore'); | ||
| var geocrunch = require('geocrunch'); | ||
| import length from '@turf/length'; | ||
| import area from '@turf/area'; | ||
| var pad = function (num) { | ||
| function pad(num) { | ||
| return num < 10 ? '0' + num.toString() : num.toString(); | ||
| }; | ||
| } | ||
| var ddToDms = function (coordinate, posSymbol, negSymbol) { | ||
| var dd = Math.abs(coordinate), | ||
| d = Math.floor(dd), | ||
| m = Math.floor((dd - d) * 60), | ||
| s = Math.round((dd - d - (m/60)) * 3600 * 100)/100, | ||
| directionSymbol = dd === coordinate ? posSymbol : negSymbol; | ||
| return pad(d) + '° ' + pad(m) + '\' ' + pad(s) + '" ' + directionSymbol; | ||
| }; | ||
| function ddToDms(coordinate, posSymbol, negSymbol) { | ||
| const dd = Math.abs(coordinate), | ||
| d = Math.floor(dd), | ||
| m = Math.floor((dd - d) * 60), | ||
| s = Math.round((dd - d - m / 60) * 3600 * 100) / 100, | ||
| directionSymbol = dd === coordinate ? posSymbol : negSymbol; | ||
| return pad(d) + '° ' + pad(m) + "' " + pad(s) + '" ' + directionSymbol; | ||
| } | ||
| var measure = function (latlngs) { | ||
| var last = _.last(latlngs); | ||
| var path = geocrunch.path(_.map(latlngs, function (latlng) { | ||
| return [latlng.lng, latlng.lat]; | ||
| })); | ||
| /* calc measurements for an array of points */ | ||
| export default function calc(latlngs) { | ||
| const last = latlngs[latlngs.length - 1]; | ||
| const path = latlngs.map(latlng => [latlng.lat, latlng.lng]); | ||
| var meters = path.distance({ | ||
| units: 'meters' | ||
| }); | ||
| var sqMeters = path.area({ | ||
| units: 'sqmeters' | ||
| }); | ||
| const polyline = L.polyline(path), | ||
| polygon = L.polygon(path); | ||
| const meters = length(polyline.toGeoJSON(), { units: 'kilometers' }) * 1000; | ||
| const sqMeters = area(polygon.toGeoJSON()); | ||
@@ -47,6 +44,2 @@ return { | ||
| }; | ||
| }; | ||
| module.exports = { | ||
| measure: measure // `measure(latLngArray)` - returns object with calced measurements for passed points | ||
| }; | ||
| } |
| // dom.js | ||
| // utility functions for managing DOM elements | ||
| var selectOne = function (selector, el) { | ||
| export function selectOne(selector, el) { | ||
| if (!el) { | ||
@@ -9,5 +9,5 @@ el = document; | ||
| return el.querySelector(selector); | ||
| }; | ||
| } | ||
| var selectAll = function (selector, el) { | ||
| export function selectAll(selector, el) { | ||
| if (!el) { | ||
@@ -17,5 +17,5 @@ el = document; | ||
| return Array.prototype.slice.call(el.querySelectorAll(selector)); | ||
| }; | ||
| } | ||
| var hide = function (el) { | ||
| export function hide(el) { | ||
| if (el) { | ||
@@ -25,5 +25,5 @@ el.setAttribute('style', 'display:none;'); | ||
| } | ||
| }; | ||
| } | ||
| var show = function (el) { | ||
| export function show(el) { | ||
| if (el) { | ||
@@ -33,9 +33,2 @@ el.removeAttribute('style'); | ||
| } | ||
| }; | ||
| module.exports = { | ||
| $: selectOne, // `$('.myclass', baseElement)` - returns selected element or undefined | ||
| $$: selectAll, // `$$('.myclass', baseElement)` - returns array of selected elements | ||
| hide: hide, // `hide(someElement)` - hide passed dom element | ||
| show: show // `show(someElement)` - show passed dom element | ||
| }; | ||
| } |
@@ -1,46 +0,30 @@ | ||
| // leaflet-measure.js | ||
| import '../scss/leaflet-measure.scss'; | ||
| var _ = require('underscore'); | ||
| var L = require('leaflet'); | ||
| var humanize = require('humanize'); | ||
| import template from 'lodash/template'; | ||
| var units = require('./units'); | ||
| var calc = require('./calc'); | ||
| var dom = require('./dom'); | ||
| var $ = dom.$; | ||
| import units from './units'; | ||
| import calc from './calc'; | ||
| import * as dom from './dom'; | ||
| import { selectOne as $ } from './dom'; | ||
| import Symbology from './symbology'; | ||
| import { numberFormat } from './utils'; | ||
| var Symbology = require('./mapsymbology'); | ||
| import { | ||
| controlTemplate, | ||
| resultsTemplate, | ||
| pointPopupTemplate, | ||
| linePopupTemplate, | ||
| areaPopupTemplate | ||
| } from './templates'; | ||
| var fs = require('fs'); | ||
| var controlTemplate = _.template(fs.readFileSync(__dirname + '/leaflet-measure-template.html', 'utf8')); | ||
| var resultsTemplate = _.template(fs.readFileSync(__dirname + '/leaflet-measure-template-results.html', 'utf8')); | ||
| var pointPopupTemplate = _.template(fs.readFileSync(__dirname + '/popuptemplates/point-popuptemplate.html', 'utf8')); | ||
| var linePopupTemplate = _.template(fs.readFileSync(__dirname + '/popuptemplates/line-popuptemplate.html', 'utf8')); | ||
| var areaPopupTemplate = _.template(fs.readFileSync(__dirname + '/popuptemplates/area-popuptemplate.html', 'utf8')); | ||
| const templateSettings = { | ||
| imports: { numberFormat }, | ||
| interpolate: /{{([\s\S]+?)}}/g // mustache | ||
| }; | ||
| const controlTemplateCompiled = template(controlTemplate, templateSettings); | ||
| const resultsTemplateCompiled = template(resultsTemplate, templateSettings); | ||
| const pointPopupTemplateCompiled = template(pointPopupTemplate, templateSettings); | ||
| const linePopupTemplateCompiled = template(linePopupTemplate, templateSettings); | ||
| const areaPopupTemplateCompiled = template(areaPopupTemplate, templateSettings); | ||
| var i18n = new (require('i18n-2'))({ | ||
| devMode: false, | ||
| locales: { | ||
| 'ca': require('./i18n/ca'), | ||
| 'cn': require('./i18n/cn'), | ||
| 'da': require('./i18n/da'), | ||
| 'de': require('./i18n/de'), | ||
| 'de_CH': require('./i18n/de_CH'), | ||
| 'en': require('./i18n/en'), | ||
| 'en_UK': require('./i18n/en_UK'), | ||
| 'es': require('./i18n/es'), | ||
| 'fa': require('./i18n/fa'), | ||
| 'fil_PH': require('./i18n/fil_PH'), | ||
| 'fr': require('./i18n/fr'), | ||
| 'it': require('./i18n/it'), | ||
| 'nl': require('./i18n/nl'), | ||
| 'pl': require('./i18n/pl'), | ||
| 'pt_BR': require('./i18n/pt_BR'), | ||
| 'pt_PT': require('./i18n/pt_PT'), | ||
| 'ru': require('./i18n/ru'), | ||
| 'sv': require('./i18n/sv'), | ||
| 'tr': require('./i18n/tr') | ||
| } | ||
| }); | ||
| L.Control.Measure = L.Control.extend({ | ||
@@ -54,6 +38,7 @@ _className: 'leaflet-control-measure', | ||
| primaryAreaUnit: 'acres', | ||
| activeColor: '#ABE67E', // base color for map features while actively measuring | ||
| completedColor: '#C8F2BE', // base color for permenant features generated from completed measure | ||
| captureZIndex: 10000, // z-index of the marker used to capture measure events | ||
| popupOptions: { // standard leaflet popup options http://leafletjs.com/reference.html#popup-options | ||
| activeColor: '#ABE67E', // base color for map features while actively measuring | ||
| completedColor: '#C8F2BE', // base color for permenant features generated from completed measure | ||
| captureZIndex: 10000, // z-index of the marker used to capture measure events | ||
| popupOptions: { | ||
| // standard leaflet popup options http://leafletjs.com/reference-1.3.0.html#popup-option | ||
| className: 'leaflet-measure-resultpopup', | ||
@@ -63,9 +48,9 @@ autoPanPadding: [10, 10] | ||
| }, | ||
| initialize: function (options) { | ||
| initialize: function(options) { | ||
| L.setOptions(this, options); | ||
| const { activeColor, completedColor } = this.options; | ||
| this._symbols = new Symbology({ activeColor, completedColor }); | ||
| this.options.units = L.extend({}, units, this.options.units); | ||
| this._symbols = new Symbology(_.pick(this.options, 'activeColor', 'completedColor')); | ||
| i18n.setLocale(this.options.localization); | ||
| }, | ||
| onAdd: function (map) { | ||
| onAdd: function(map) { | ||
| this._map = map; | ||
@@ -78,37 +63,31 @@ this._latlngs = []; | ||
| }, | ||
| onRemove: function (map) { | ||
| onRemove: function(map) { | ||
| map.off('click', this._collapse, this); | ||
| map.removeLayer(this._layer); | ||
| }, | ||
| _initLayout: function () { | ||
| var className = this._className, container = this._container = L.DomUtil.create('div', className); | ||
| var $toggle, $start, $cancel, $finish; | ||
| _initLayout: function() { | ||
| const className = this._className, | ||
| container = (this._container = L.DomUtil.create('div', `${className} leaflet-bar`)); | ||
| container.innerHTML = controlTemplate({ | ||
| container.innerHTML = controlTemplateCompiled({ | ||
| model: { | ||
| className: className | ||
| }, | ||
| i18n: i18n | ||
| } | ||
| }); | ||
| // copied from leaflet | ||
| // https://bitbucket.org/ljagis/js-mapbootstrap/src/4ab1e9e896c08bdbc8164d4053b2f945143f4f3a/app/components/measure/leaflet-measure-control.js?at=master#cl-30 | ||
| // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released | ||
| container.setAttribute('aria-haspopup', true); | ||
| if (!L.Browser.touch) { | ||
| L.DomEvent.disableClickPropagation(container); | ||
| L.DomEvent.disableScrollPropagation(container); | ||
| } else { | ||
| L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation); | ||
| } | ||
| L.DomEvent.disableClickPropagation(container); | ||
| L.DomEvent.disableScrollPropagation(container); | ||
| $toggle = this.$toggle = $('.js-toggle', container); // collapsed content | ||
| this.$interaction = $('.js-interaction', container); // expanded content | ||
| $start = $('.js-start', container); // start button | ||
| $cancel = $('.js-cancel', container); // cancel button | ||
| $finish = $('.js-finish', container); // finish button | ||
| this.$startPrompt = $('.js-startprompt', container); // full area with button to start measurment | ||
| const $toggle = (this.$toggle = $('.js-toggle', container)); // collapsed content | ||
| this.$interaction = $('.js-interaction', container); // expanded content | ||
| const $start = $('.js-start', container); // start button | ||
| const $cancel = $('.js-cancel', container); // cancel button | ||
| const $finish = $('.js-finish', container); // finish button | ||
| this.$startPrompt = $('.js-startprompt', container); // full area with button to start measurment | ||
| this.$measuringPrompt = $('.js-measuringprompt', container); // full area with all stuff for active measurement | ||
| this.$startHelp = $('.js-starthelp', container); // "Start creating a measurement by adding points" | ||
| this.$results = $('.js-results', container); // div with coordinate, linear, area results | ||
| this.$measureTasks = $('.js-measuretasks', container); // active measure buttons container | ||
| this.$startHelp = $('.js-starthelp', container); // "Start creating a measurement by adding points" | ||
| this.$results = $('.js-results', container); // div with coordinate, linear, area results | ||
| this.$measureTasks = $('.js-measuretasks', container); // active measure buttons container | ||
@@ -135,7 +114,7 @@ this._collapse(); | ||
| }, | ||
| _expand: function () { | ||
| _expand: function() { | ||
| dom.hide(this.$toggle); | ||
| dom.show(this.$interaction); | ||
| }, | ||
| _collapse: function () { | ||
| _collapse: function() { | ||
| if (!this._locked) { | ||
@@ -148,3 +127,3 @@ dom.hide(this.$interaction); | ||
| // measure not started, started/in progress but no points added, in progress and with points | ||
| _updateMeasureNotStarted: function () { | ||
| _updateMeasureNotStarted: function() { | ||
| dom.hide(this.$startHelp); | ||
@@ -156,3 +135,3 @@ dom.hide(this.$results); | ||
| }, | ||
| _updateMeasureStartedNoPoints: function () { | ||
| _updateMeasureStartedNoPoints: function() { | ||
| dom.hide(this.$results); | ||
@@ -164,3 +143,3 @@ dom.show(this.$startHelp); | ||
| }, | ||
| _updateMeasureStartedWithPoints: function () { | ||
| _updateMeasureStartedWithPoints: function() { | ||
| dom.hide(this.$startHelp); | ||
@@ -173,3 +152,3 @@ dom.show(this.$results); | ||
| // get state vars and interface ready for measure | ||
| _startMeasure: function () { | ||
| _startMeasure: function() { | ||
| this._locked = true; | ||
@@ -202,6 +181,4 @@ this._measureVertexes = L.featureGroup().addTo(this._layer); | ||
| // return to state with no measure in progress, undo `this._startMeasure` | ||
| _finishMeasure: function () { | ||
| var model = _.extend({}, this._resultsModel, { | ||
| points: this._latlngs | ||
| }); | ||
| _finishMeasure: function() { | ||
| const model = L.extend({}, this._resultsModel, { points: this._latlngs }); | ||
@@ -225,5 +202,3 @@ this._locked = false; | ||
| this._layer | ||
| .removeLayer(this._measureVertexes) | ||
| .removeLayer(this._captureMarker); | ||
| this._layer.removeLayer(this._measureVertexes).removeLayer(this._captureMarker); | ||
| this._measureVertexes = null; | ||
@@ -237,3 +212,3 @@ | ||
| // clear all running measure data | ||
| _clearMeasure: function () { | ||
| _clearMeasure: function() { | ||
| this._latlngs = []; | ||
@@ -256,57 +231,96 @@ this._resultsModel = null; | ||
| // centers the event capture marker | ||
| _centerCaptureMarker: function () { | ||
| _centerCaptureMarker: function() { | ||
| this._captureMarker.setLatLng(this._map.getCenter()); | ||
| }, | ||
| // set icon on the capture marker | ||
| _setCaptureMarkerIcon: function () { | ||
| this._captureMarker.setIcon(L.divIcon({ | ||
| iconSize: this._map.getSize().multiplyBy(2) | ||
| })); | ||
| _setCaptureMarkerIcon: function() { | ||
| this._captureMarker.setIcon( | ||
| L.divIcon({ | ||
| iconSize: this._map.getSize().multiplyBy(2) | ||
| }) | ||
| ); | ||
| }, | ||
| // format measurements to nice display string based on units in options | ||
| // `{ lengthDisplay: '100 Feet (0.02 Miles)', areaDisplay: ... }` | ||
| _getMeasurementDisplayStrings: function (measurement) { | ||
| var unitDefinitions = this.options.units; | ||
| _getMeasurementDisplayStrings: function(measurement) { | ||
| const unitDefinitions = this.options.units; | ||
| return { | ||
| lengthDisplay: buildDisplay(measurement.length, this.options.primaryLengthUnit, this.options.secondaryLengthUnit, this.options.decPoint, this.options.thousandsSep), | ||
| areaDisplay: buildDisplay(measurement.area, this.options.primaryAreaUnit, this.options.secondaryAreaUnit, this.options.decPoint, this.options.thousandsSep) | ||
| lengthDisplay: buildDisplay( | ||
| measurement.length, | ||
| this.options.primaryLengthUnit, | ||
| this.options.secondaryLengthUnit, | ||
| this.options.decPoint, | ||
| this.options.thousandsSep | ||
| ), | ||
| areaDisplay: buildDisplay( | ||
| measurement.area, | ||
| this.options.primaryAreaUnit, | ||
| this.options.secondaryAreaUnit, | ||
| this.options.decPoint, | ||
| this.options.thousandsSep | ||
| ) | ||
| }; | ||
| function buildDisplay (val, primaryUnit, secondaryUnit, decPoint, thousandsSep) { | ||
| var display; | ||
| function buildDisplay(val, primaryUnit, secondaryUnit, decPoint, thousandsSep) { | ||
| if (primaryUnit && unitDefinitions[primaryUnit]) { | ||
| display = formatMeasure(val, unitDefinitions[primaryUnit], decPoint, thousandsSep); | ||
| let display = formatMeasure(val, unitDefinitions[primaryUnit], decPoint, thousandsSep); | ||
| if (secondaryUnit && unitDefinitions[secondaryUnit]) { | ||
| display = display + ' (' + formatMeasure(val, unitDefinitions[secondaryUnit], decPoint, thousandsSep) + ')'; | ||
| const formatted = formatMeasure( | ||
| val, | ||
| unitDefinitions[secondaryUnit], | ||
| decPoint, | ||
| thousandsSep | ||
| ); | ||
| display = `${display} (${formatted})`; | ||
| } | ||
| } else { | ||
| display = formatMeasure(val, null, decPoint, thousandsSep); | ||
| return display; | ||
| } | ||
| return display; | ||
| return formatMeasure(val, null, decPoint, thousandsSep); | ||
| } | ||
| function formatMeasure (val, unit, decPoint, thousandsSep) { | ||
| return unit && unit.factor && unit.display ? | ||
| humanize.numberFormat(val * unit.factor, unit.decimals || 0, decPoint || i18n.__('decPoint'), thousandsSep || i18n.__('thousandsSep')) + ' ' + i18n.__([unit.display]) || unit.display : | ||
| humanize.numberFormat(val, 0, decPoint || i18n.__('decPoint'), thousandsSep || i18n.__('thousandsSep')); | ||
| function formatMeasure(val, unit, decPoint, thousandsSep) { | ||
| const unitDisplays = { | ||
| acres: __('acres'), | ||
| feet: __('feet'), | ||
| kilometers: __('kilometers'), | ||
| hectares: __('hectares'), | ||
| meters: __('meters'), | ||
| miles: __('miles'), | ||
| sqfeet: __('sqfeet'), | ||
| sqmeters: __('sqmeters'), | ||
| sqmiles: __('sqmiles') | ||
| }; | ||
| const u = L.extend({ factor: 1, decimals: 0 }, unit); | ||
| const formattedNumber = numberFormat( | ||
| val * u.factor, | ||
| u.decimals, | ||
| decPoint || __('decPoint'), | ||
| thousandsSep || __('thousandsSep') | ||
| ); | ||
| const label = unitDisplays[u.display] || u.display; | ||
| return [formattedNumber, label].join(' '); | ||
| } | ||
| }, | ||
| // update results area of dom with calced measure from `this._latlngs` | ||
| _updateResults: function () { | ||
| var calced = calc.measure(this._latlngs); | ||
| var resultsModel = this._resultsModel = _.extend({}, calced, this._getMeasurementDisplayStrings(calced), { | ||
| pointCount: this._latlngs.length | ||
| }); | ||
| this.$results.innerHTML = resultsTemplate({ | ||
| model: resultsModel, | ||
| humanize: humanize, | ||
| i18n: i18n | ||
| }); | ||
| _updateResults: function() { | ||
| const calced = calc(this._latlngs); | ||
| const model = (this._resultsModel = L.extend( | ||
| {}, | ||
| calced, | ||
| this._getMeasurementDisplayStrings(calced), | ||
| { | ||
| pointCount: this._latlngs.length | ||
| } | ||
| )); | ||
| this.$results.innerHTML = resultsTemplateCompiled({ model }); | ||
| }, | ||
| // mouse move handler while measure in progress | ||
| // adds floating measure marker under cursor | ||
| _handleMeasureMove: function (evt) { | ||
| _handleMeasureMove: function(evt) { | ||
| if (!this._measureDrag) { | ||
| this._measureDrag = L.circleMarker(evt.latlng, this._symbols.getSymbol('measureDrag')).addTo(this._layer); | ||
| this._measureDrag = L.circleMarker(evt.latlng, this._symbols.getSymbol('measureDrag')).addTo( | ||
| this._layer | ||
| ); | ||
| } else { | ||
@@ -319,4 +333,5 @@ this._measureDrag.setLatLng(evt.latlng); | ||
| // do final calc and finish out current measure, clear dom and internal state, add permanent map features | ||
| _handleMeasureDoubleClick: function () { | ||
| var latlngs = this._latlngs, calced, resultFeature, popupContainer, popupContent, zoomLink, deleteLink; | ||
| _handleMeasureDoubleClick: function() { | ||
| const latlngs = this._latlngs; | ||
| let resultFeature, popupContent; | ||
@@ -330,55 +345,59 @@ this._finishMeasure(); | ||
| if (latlngs.length > 2) { | ||
| latlngs.push(_.first(latlngs)); // close path to get full perimeter measurement for areas | ||
| latlngs.push(latlngs[0]); // close path to get full perimeter measurement for areas | ||
| } | ||
| calced = calc.measure(latlngs); | ||
| const calced = calc(latlngs); | ||
| if (latlngs.length === 1) { | ||
| resultFeature = L.circleMarker(latlngs[0], this._symbols.getSymbol('resultPoint')); | ||
| popupContent = pointPopupTemplate({ | ||
| model: calced, | ||
| humanize: humanize, | ||
| i18n: i18n | ||
| popupContent = pointPopupTemplateCompiled({ | ||
| model: calced | ||
| }); | ||
| } else if (latlngs.length === 2) { | ||
| resultFeature = L.polyline(latlngs, this._symbols.getSymbol('resultLine')); | ||
| popupContent = linePopupTemplate({ | ||
| model: _.extend({}, calced, this._getMeasurementDisplayStrings(calced)), | ||
| humanize: humanize, | ||
| i18n: i18n | ||
| popupContent = linePopupTemplateCompiled({ | ||
| model: L.extend({}, calced, this._getMeasurementDisplayStrings(calced)) | ||
| }); | ||
| } else { | ||
| resultFeature = L.polygon(latlngs, this._symbols.getSymbol('resultArea')); | ||
| popupContent = areaPopupTemplate({ | ||
| model: _.extend({}, calced, this._getMeasurementDisplayStrings(calced)), | ||
| humanize: humanize, | ||
| i18n: i18n | ||
| popupContent = areaPopupTemplateCompiled({ | ||
| model: L.extend({}, calced, this._getMeasurementDisplayStrings(calced)) | ||
| }); | ||
| } | ||
| popupContainer = L.DomUtil.create('div', ''); | ||
| const popupContainer = L.DomUtil.create('div', ''); | ||
| popupContainer.innerHTML = popupContent; | ||
| zoomLink = $('.js-zoomto', popupContainer); | ||
| const zoomLink = $('.js-zoomto', popupContainer); | ||
| if (zoomLink) { | ||
| L.DomEvent.on(zoomLink, 'click', L.DomEvent.stop); | ||
| L.DomEvent.on(zoomLink, 'click', function () { | ||
| if (resultFeature.getBounds) { | ||
| this._map.fitBounds(resultFeature.getBounds(), { | ||
| padding: [20, 20], | ||
| maxZoom: 17 | ||
| }); | ||
| } else if (resultFeature.getLatLng) { | ||
| this._map.panTo(resultFeature.getLatLng()); | ||
| } | ||
| }, this); | ||
| L.DomEvent.on( | ||
| zoomLink, | ||
| 'click', | ||
| function() { | ||
| if (resultFeature.getBounds) { | ||
| this._map.fitBounds(resultFeature.getBounds(), { | ||
| padding: [20, 20], | ||
| maxZoom: 17 | ||
| }); | ||
| } else if (resultFeature.getLatLng) { | ||
| this._map.panTo(resultFeature.getLatLng()); | ||
| } | ||
| }, | ||
| this | ||
| ); | ||
| } | ||
| deleteLink = $('.js-deletemarkup', popupContainer); | ||
| const deleteLink = $('.js-deletemarkup', popupContainer); | ||
| if (deleteLink) { | ||
| L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop); | ||
| L.DomEvent.on(deleteLink, 'click', function () { | ||
| // TODO. maybe remove any event handlers on zoom and delete buttons? | ||
| this._layer.removeLayer(resultFeature); | ||
| }, this); | ||
| L.DomEvent.on( | ||
| deleteLink, | ||
| 'click', | ||
| function() { | ||
| // TODO. maybe remove any event handlers on zoom and delete buttons? | ||
| this._layer.removeLayer(resultFeature); | ||
| }, | ||
| this | ||
| ); | ||
| } | ||
@@ -396,8 +415,9 @@ | ||
| // add new clicked point, update measure layers and results ui | ||
| _handleMeasureClick: function (evt) { | ||
| var latlng = this._map.mouseEventToLatLng(evt.originalEvent), // get actual latlng instead of the marker's latlng from originalEvent | ||
| lastClick = _.last(this._latlngs), | ||
| _handleMeasureClick: function(evt) { | ||
| const latlng = this._map.mouseEventToLatLng(evt.originalEvent), // get actual latlng instead of the marker's latlng from originalEvent | ||
| lastClick = this._latlngs[this._latlngs.length - 1], | ||
| vertexSymbol = this._symbols.getSymbol('measureVertex'); | ||
| if (!lastClick || !latlng.equals(lastClick)) { // skip if same point as last click, happens on `dblclick` | ||
| if (!lastClick || !latlng.equals(lastClick)) { | ||
| // skip if same point as last click, happens on `dblclick` | ||
| this._latlngs.push(latlng); | ||
@@ -407,3 +427,3 @@ this._addMeasureArea(this._latlngs); | ||
| this._measureVertexes.eachLayer(function (layer) { | ||
| this._measureVertexes.eachLayer(function(layer) { | ||
| layer.setStyle(vertexSymbol); | ||
@@ -429,3 +449,3 @@ // reset all vertexes to non-active class - only last vertex is active | ||
| // remove floating cursor vertex from map | ||
| _handleMapMouseOut: function () { | ||
| _handleMapMouseOut: function() { | ||
| if (this._measureDrag) { | ||
@@ -437,6 +457,8 @@ this._layer.removeLayer(this._measureDrag); | ||
| // add various measure graphics to map - vertex, area, boundary | ||
| _addNewVertex: function (latlng) { | ||
| L.circleMarker(latlng, this._symbols.getSymbol('measureVertexActive')).addTo(this._measureVertexes); | ||
| _addNewVertex: function(latlng) { | ||
| L.circleMarker(latlng, this._symbols.getSymbol('measureVertexActive')).addTo( | ||
| this._measureVertexes | ||
| ); | ||
| }, | ||
| _addMeasureArea: function (latlngs) { | ||
| _addMeasureArea: function(latlngs) { | ||
| if (latlngs.length < 3) { | ||
@@ -450,3 +472,5 @@ if (this._measureArea) { | ||
| if (!this._measureArea) { | ||
| this._measureArea = L.polygon(latlngs, this._symbols.getSymbol('measureArea')).addTo(this._layer); | ||
| this._measureArea = L.polygon(latlngs, this._symbols.getSymbol('measureArea')).addTo( | ||
| this._layer | ||
| ); | ||
| } else { | ||
@@ -456,3 +480,3 @@ this._measureArea.setLatLngs(latlngs); | ||
| }, | ||
| _addMeasureBoundary: function (latlngs) { | ||
| _addMeasureBoundary: function(latlngs) { | ||
| if (latlngs.length < 2) { | ||
@@ -466,3 +490,5 @@ if (this._measureBoundary) { | ||
| if (!this._measureBoundary) { | ||
| this._measureBoundary = L.polyline(latlngs, this._symbols.getSymbol('measureBoundary')).addTo(this._layer); | ||
| this._measureBoundary = L.polyline(latlngs, this._symbols.getSymbol('measureBoundary')).addTo( | ||
| this._layer | ||
| ); | ||
| } else { | ||
@@ -478,10 +504,10 @@ this._measureBoundary.setLatLngs(latlngs); | ||
| L.Map.addInitHook(function () { | ||
| L.Map.addInitHook(function() { | ||
| if (this.options.measureControl) { | ||
| this.measureControl = (new L.Control.Measure()).addTo(this); | ||
| this.measureControl = new L.Control.Measure().addTo(this); | ||
| } | ||
| }); | ||
| L.control.measure = function (options) { | ||
| L.control.measure = function(options) { | ||
| return new L.Control.Measure(options); | ||
| }; |
@@ -5,3 +5,3 @@ // units.js | ||
| module.exports = { | ||
| export default { | ||
| acres: { | ||
@@ -52,2 +52,2 @@ factor: 0.00024711, | ||
| } | ||
| }; | ||
| }; |
Sorry, the diff of this file is not supported yet
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 3 instances in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by180.34%
2051787
- Dependency count
- decreased by-33.33%
4
- Number of low quality alerts
- decreased by-50%
1
- Number of low supply chain risk alerts
- decreased by-80%
2
- Number of medium supply chain risk alerts
- decreased by-75%
1
Worsened metrics
- Dev dependency count
- increased by75%
21
- Number of package files
- decreased by-1.56%
63
- Lines of code
- decreased by-84.32%
1337
- Number of medium maintenance alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-15.64%
178
Dependency changes
+ Added@turf/area@^5.1.5
+ Added@turf/length@^5.1.5
+ Addedlodash@^4.17.5
+ Added@turf/area@5.1.5(transitive)
+ Added@turf/distance@5.1.5(transitive)
+ Added@turf/helpers@5.1.5(transitive)
+ Added@turf/invariant@5.2.0(transitive)
+ Added@turf/length@5.1.5(transitive)
+ Added@turf/meta@5.2.0(transitive)
+ Addedleaflet@1.9.4(transitive)
+ Addedlodash@4.17.21(transitive)
- Removedbrfs@^1.4.3
- Removedcolor@^0.8.0
- Removedgeocrunch@^0.1.1
- Removedhumanize@0.0.9
- Removedi18n-2@^0.6.3
- Removedunderscore@^1.7.0
- Removedacorn@7.4.1(transitive)
- Removedbrfs@1.6.1(transitive)
- Removedbuffer-equal@0.0.1(transitive)
- Removedbuffer-from@1.1.2(transitive)
- Removedcolor@0.8.0(transitive)
- Removedcolor-convert@0.5.3(transitive)
- Removedcolor-name@1.1.4(transitive)
- Removedcolor-string@0.3.0(transitive)
- Removedconcat-stream@1.6.2(transitive)
- Removedconvert-source-map@1.9.0(transitive)
- Removedcore-util-is@1.0.3(transitive)
- Removeddeep-is@0.1.4(transitive)
- Removedduplexer2@0.1.4(transitive)
- Removedescodegen@1.9.12.1.0(transitive)
- Removedesprima@3.1.34.0.1(transitive)
- Removedestraverse@4.3.05.3.0(transitive)
- Removedesutils@2.0.3(transitive)
- Removedfalafel@2.2.5(transitive)
- Removedfast-levenshtein@2.0.6(transitive)
- Removedfunction-bind@1.1.2(transitive)
- Removedgeocrunch@0.1.1(transitive)
- Removedhas@1.0.4(transitive)
- Removedhasown@2.0.2(transitive)
- Removedhumanize@0.0.9(transitive)
- Removedi18n-2@0.6.3(transitive)
- Removedinherits@2.0.4(transitive)
- Removedis-core-module@2.16.1(transitive)
- Removedisarray@1.0.02.0.5(transitive)
- Removedlevn@0.3.0(transitive)
- Removedmagic-string@0.22.5(transitive)
- Removedmerge-source-map@1.0.4(transitive)
- Removedminimist@1.2.8(transitive)
- Removedobject-inspect@1.4.1(transitive)
- Removedoptionator@0.8.3(transitive)
- Removedpath-parse@1.0.7(transitive)
- Removedprelude-ls@1.1.2(transitive)
- Removedprocess-nextick-args@2.0.1(transitive)
- Removedquote-stream@1.0.2(transitive)
- Removedreadable-stream@2.3.8(transitive)
- Removedresolve@1.22.10(transitive)
- Removedsafe-buffer@5.1.2(transitive)
- Removedshallow-copy@0.0.1(transitive)
- Removedsource-map@0.5.70.6.1(transitive)
- Removedsprintf@0.1.5(transitive)
- Removedstatic-eval@2.1.1(transitive)
- Removedstatic-module@2.2.5(transitive)
- Removedstring_decoder@1.1.1(transitive)
- Removedsupports-preserve-symlinks-flag@1.0.0(transitive)
- Removedthrough2@2.0.5(transitive)
- Removedtype-check@0.3.2(transitive)
- Removedtypedarray@0.0.6(transitive)
- Removedunderscore@1.13.71.5.2(transitive)
- Removedutil-deprecate@1.0.2(transitive)
- Removedvlq@0.2.3(transitive)
- Removedword-wrap@1.2.5(transitive)
- Removedxtend@4.0.2(transitive)