@kalisio/leaflet-graphicscale - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

demo/demo.js

@@ -17,3 +17,4 @@ (function() {
         fill: 'hollow',
-        unitPlacement: 'scale'
+        unitPlacement: 'scale',
+        unitSystem: 'metric'
     };
@@ -37,4 +38,39 @@ var graphicScale;
     }
+    function getUnitConversionFactor (meters) {
+        if (options.unitSystem === 'metric') {
+            return 1;
+        } else if (options.unitSystem === 'imperial') {
+            const miles = meters * 0.00062137;
+            return (miles>=30) ? 0.00062137 : 3.28084;
+        } else if (options.unitSystem === 'nautical') {
+            const nm = meters * 0.000539957;
+            return (nm>=25) ? 0.000539957 : 0.0539957;
+        }
+    }
+    function getDisplayUnit (value, factor) {
+        if (options.unitSystem === 'metric') {
+            const displayUnit = (value<1000) ? 'm' : 'km';
+            return {
+                unit: displayUnit,
+                amount: (displayUnit === 'km') ? value / 1000 : value
+            };
+        } else if (options.unitSystem === 'imperial') {
+            const displayUnit = (factor === 3.28084) ? 'ft' : 'mi';
+            return {
+                unit: displayUnit,
+                amount: value
+            };
+        } else if (options.unitSystem === 'nautical') {
+            const displayUnit = (factor === 0.0539957) ? 'nm°' : 'nm';
+            return {
+                unit: displayUnit,
+                amount: value
+            };
+        }
+    }
     function createControl() {
-        graphicScale = L.control.graphicScale(options).addTo(map);
+        graphicScale = L.control.graphicScale(Object.assign({
+            getUnitConversionFactor,
+            getDisplayUnit,
+        }, options)).addTo(map);
         var doubleLineOptions = '<h1>Leaflet Graphic Scale</h1><b>doubleLine</b>: <span class="choice">true</span>-<span class="choice">false</span>';
@@ -46,2 +82,4 @@ createOptions(doubleLineOptions, 'doubleLine');
         createOptions(unitPlacementOptions, 'unitPlacement');
+        var unitSystemOptions = '<b>unitSystem</b>: <span class="choice">metric</span>-<span class="choice">imperial</span>-<span class="choice">nautical</span>';
+        createOptions(unitSystemOptions, 'unitSystem');
         var fillOptions = '<b>fill</b>: <span class="choice">hollow</span>-<span class="choice">line</span>-<span class="choice">fill</span>-<span class="choice">double</span>-<span class="choice">nofill</span><br/><br/>';
@@ -48,0 +86,0 @@ createOptions(fillOptions, 'fill');

dist/Leaflet.GraphicScale.min.js

@@ -1,1 +0,1 @@
-L.Control.GraphicScale=L.Control.extend({options:{position:"bottomleft",updateWhenIdle:false,minUnitWidth:30,maxUnitsWidth:240,fill:false,showSubunits:false,doubleLine:false,labelPlacement:"auto",unitPlacement:"label"},onAdd:function(map){this._map=map;this._possibleUnitsNum=[3,5,2,4];this._possibleUnitsNumLen=this._possibleUnitsNum.length;this._possibleDivisions=[1,.5,.25,.2];this._possibleDivisionsLen=this._possibleDivisions.length;this._possibleDivisionsSub={1:{num:2,division:.5},.5:{num:5,division:.1},.25:{num:5,division:.05},.2:{num:2,division:.1}};this._scaleInner=this._buildScale();this._scale=this._addScale(this._scaleInner);this._setStyle(this.options);map.on(this.options.updateWhenIdle?"moveend":"move",this._update,this);map.whenReady(this._update,this);return this._scale},onRemove:function(map){map.off(this.options.updateWhenIdle?"moveend":"move",this._update,this)},_addScale:function(scaleInner){var scale=L.DomUtil.create("div");scale.className="leaflet-control-graphicscale";scale.appendChild(scaleInner);return scale},_setStyle:function(options){var classNames=["leaflet-control-graphicscale-inner"];if(options.fill&&options.fill!=="nofill"){classNames.push("filled");classNames.push("filled-"+options.fill)}if(options.showSubunits){classNames.push("showsubunits")}if(options.doubleLine){classNames.push("double")}classNames.push("labelPlacement-"+options.labelPlacement);this._scaleInner.className=classNames.join(" ")},_buildScale:function(){var root=document.createElement("div");root.className="leaflet-control-graphicscale-inner";var subunits=L.DomUtil.create("div","subunits",root);var units=L.DomUtil.create("div","units",root);this._units=[];this._unitsLbls=[];this._subunits=[];for(var i=0;i<5;i++){var unit=this._buildDivision(i%2===0);units.appendChild(unit);this._units.push(unit);var unitLbl=this._buildDivisionLbl();unit.appendChild(unitLbl);this._unitsLbls.push(unitLbl);var subunit=this._buildDivision(i%2===1);subunits.appendChild(subunit);this._subunits.unshift(subunit)}this._unitLbl=L.DomUtil.create("div","label unitLabel");this._zeroLbl=L.DomUtil.create("div","label zeroLabel");this._zeroLbl.innerHTML="0";this._units[0].appendChild(this._zeroLbl);this._subunitsLbl=L.DomUtil.create("div","label subunitsLabel");this._subunitsLbl.innerHTML="?";this._subunits[4].appendChild(this._subunitsLbl);return root},_buildDivision:function(fill){var item=L.DomUtil.create("div","division");var l1=L.DomUtil.create("div","line");item.appendChild(l1);var l2=L.DomUtil.create("div","line2");item.appendChild(l2);if(this.options.fill==="double"){if(fill){l1.appendChild(L.DomUtil.create("div","fill"));l2.appendChild(L.DomUtil.create("div","secondary-fill"))}else{l1.appendChild(L.DomUtil.create("div","secondary-fill"));l2.appendChild(L.DomUtil.create("div","fill"))}}else{if(fill)l1.appendChild(L.DomUtil.create("div","fill"));if(!fill)l2.appendChild(L.DomUtil.create("div","fill"))}return item},_buildDivisionLbl:function(){var itemLbl=L.DomUtil.create("div","label divisionLabel");return itemLbl},_update:function(){var bounds=this._map.getBounds(),centerLat=bounds.getCenter().lat,halfWorldMeters=6378137*Math.PI*Math.cos(centerLat*Math.PI/180),dist=halfWorldMeters*(bounds.getNorthEast().lng-bounds.getSouthWest().lng)/180,size=this._map.getSize();if(size.x>0){this._updateScale(dist,this.options)}},_updateScale:function(maxMeters,options){var scale=this._getBestScale(maxMeters,options.minUnitWidth,options.maxUnitsWidth);this._render(scale)},_getBestScale:function(maxMeters,minUnitWidthPx,maxUnitsWidthPx){var possibleUnits=this._getPossibleUnits(maxMeters,minUnitWidthPx,this._map.getSize().x);var possibleScales=this._getPossibleScales(possibleUnits,maxUnitsWidthPx);possibleScales.sort(function(scaleA,scaleB){return scaleB.score-scaleA.score});var scale=possibleScales[0];scale.subunits=this._getSubunits(scale);return scale},_getSubunits:function(scale){var subdivision=this._possibleDivisionsSub[scale.unit.unitDivision];var subunit={};subunit.subunitDivision=subdivision.division;subunit.subunitMeters=subdivision.division*(scale.unit.unitMeters/scale.unit.unitDivision);subunit.subunitPx=subdivision.division*(scale.unit.unitPx/scale.unit.unitDivision);var subunits={subunit:subunit,numSubunits:subdivision.num,total:subdivision.num*subunit.subunitMeters};return subunits},_getPossibleScales:function(possibleUnits,maxUnitsWidthPx){var scales=[];var minTotalWidthPx=Number.POSITIVE_INFINITY;var fallbackScale;for(var i=0;i<this._possibleUnitsNumLen;i++){var numUnits=this._possibleUnitsNum[i];var numUnitsScore=(this._possibleUnitsNumLen-i)*.5;for(var j=0;j<possibleUnits.length;j++){var unit=possibleUnits[j];var totalWidthPx=unit.unitPx*numUnits;var scale={unit:unit,totalWidthPx:totalWidthPx,numUnits:numUnits,score:0};var totalWidthPxScore=1-(maxUnitsWidthPx-totalWidthPx)/maxUnitsWidthPx;totalWidthPxScore*=3;var score=unit.unitScore+numUnitsScore+totalWidthPxScore;if(unit.unitDivision===.25&&numUnits===3||unit.unitDivision===.5&&numUnits===3||unit.unitDivision===.25&&numUnits===5){score-=2}scale.score=score;if(totalWidthPx<maxUnitsWidthPx){scales.push(scale)}if(totalWidthPx<minTotalWidthPx){minTotalWidthPx=totalWidthPx;fallbackScale=scale}}}if(!scales.length)scales.push(fallbackScale);return scales},_getPossibleUnits:function(maxMeters,minUnitWidthPx,mapWidthPx){var exp=(Math.floor(maxMeters)+"").length;var unitMetersPow;var units=[];for(var i=exp;i>0;i--){unitMetersPow=Math.pow(10,i);for(var j=0;j<this._possibleDivisionsLen;j++){var unitMeters=unitMetersPow*this._possibleDivisions[j];var unitPx=mapWidthPx*(unitMeters/maxMeters);if(unitPx<minUnitWidthPx){return units}units.push({unitMeters:unitMeters,unitPx:unitPx,unitDivision:this._possibleDivisions[j],unitScore:this._possibleDivisionsLen-j})}}return units},_render:function(scale){this._renderPart(scale.unit.unitPx,scale.unit.unitMeters,scale.numUnits,this._units,this._unitsLbls);this._renderPart(scale.subunits.subunit.subunitPx,scale.subunits.subunit.subunitMeters,scale.subunits.numSubunits,this._subunits);var subunitsDisplayUnit=this._getDisplayUnit(scale.subunits.total);if(this.options.unitPlacement==="label"){this._subunitsLbl.innerHTML=""+subunitsDisplayUnit.amount+subunitsDisplayUnit.unit}else{this._subunitsLbl.innerHTML=""+subunitsDisplayUnit.amount}if(this.options.unitPlacement==="scale"){var unitsDisplayUnit=this._getDisplayUnit(scale.unit.unitMeters);this._unitLbl.innerHTML=unitsDisplayUnit.unit;if(this._unitLblParent!==this._units[scale.numUnits-1]){if(this._unitLblParent)this._unitLblParent.removeChild(this._unitLbl);this._unitLblParent=this._units[scale.numUnits-1];this._unitLblParent.appendChild(this._unitLbl)}}},_renderPart:function(px,meters,num,divisions,divisionsLbls){var displayUnit=this._getDisplayUnit(meters);for(var i=0;i<this._units.length;i++){var division=divisions[i];if(i<num){division.style.width=px+"px";division.className="division"}else{division.style.width=0;division.className="division hidden"}if(!divisionsLbls)continue;var lbl=divisionsLbls[i];var lblClassNames=["label","divisionLabel"];if(i<num){var lblText=(i+1)*displayUnit.amount;if(i===num-1){if(this.options.unitPlacement==="label"){lblText+=displayUnit.unit}lblClassNames.push("labelLast")}else{lblClassNames.push("labelSub")}lbl.innerHTML=lblText}lbl.className=lblClassNames.join(" ")}},_getDisplayUnit:function(meters){if(this.options.getDisplayUnit)return this.options.getDisplayUnit(meters);var displayUnit=meters<1e3?"m":"km";return{unit:displayUnit,amount:displayUnit==="km"?meters/1e3:meters}}});L.Map.mergeOptions({graphicScaleControl:false});L.Map.addInitHook(function(){if(this.options.graphicScaleControl){this.graphicScaleControl=new L.Control.GraphicScale;this.addControl(this.graphicScaleControl)}});L.control.graphicScale=function(options){return new L.Control.GraphicScale(options)};
+L.Control.GraphicScale=L.Control.extend({options:{position:"bottomleft",updateWhenIdle:false,minUnitWidth:30,maxUnitsWidth:240,fill:false,showSubunits:false,doubleLine:false,labelPlacement:"auto",unitPlacement:"label"},onAdd:function(map){this._map=map;this._possibleUnitsNum=[3,5,2,4];this._possibleUnitsNumLen=this._possibleUnitsNum.length;this._possibleDivisions=[1,.5,.25,.2];this._possibleDivisionsLen=this._possibleDivisions.length;this._possibleDivisionsSub={1:{num:2,division:.5},.5:{num:5,division:.1},.25:{num:5,division:.05},.2:{num:2,division:.1}};this._scaleInner=this._buildScale();this._scale=this._addScale(this._scaleInner);this._setStyle(this.options);map.on(this.options.updateWhenIdle?"moveend":"move",this._update,this);map.whenReady(this._update,this);return this._scale},onRemove:function(map){map.off(this.options.updateWhenIdle?"moveend":"move",this._update,this)},_addScale:function(scaleInner){var scale=L.DomUtil.create("div");scale.className="leaflet-control-graphicscale";scale.appendChild(scaleInner);return scale},_setStyle:function(options){var classNames=["leaflet-control-graphicscale-inner"];if(options.fill&&options.fill!=="nofill"){classNames.push("filled");classNames.push("filled-"+options.fill)}if(options.showSubunits){classNames.push("showsubunits")}if(options.doubleLine){classNames.push("double")}classNames.push("labelPlacement-"+options.labelPlacement);this._scaleInner.className=classNames.join(" ")},_buildScale:function(){var root=document.createElement("div");root.className="leaflet-control-graphicscale-inner";var subunits=L.DomUtil.create("div","subunits",root);var units=L.DomUtil.create("div","units",root);this._units=[];this._unitsLbls=[];this._subunits=[];for(var i=0;i<5;i++){var unit=this._buildDivision(i%2===0);units.appendChild(unit);this._units.push(unit);var unitLbl=this._buildDivisionLbl();unit.appendChild(unitLbl);this._unitsLbls.push(unitLbl);var subunit=this._buildDivision(i%2===1);subunits.appendChild(subunit);this._subunits.unshift(subunit)}this._unitLbl=L.DomUtil.create("div","label unitLabel");this._zeroLbl=L.DomUtil.create("div","label zeroLabel");this._zeroLbl.innerHTML="0";this._units[0].appendChild(this._zeroLbl);this._subunitsLbl=L.DomUtil.create("div","label subunitsLabel");this._subunitsLbl.innerHTML="?";this._subunits[4].appendChild(this._subunitsLbl);return root},_buildDivision:function(fill){var item=L.DomUtil.create("div","division");var l1=L.DomUtil.create("div","line");item.appendChild(l1);var l2=L.DomUtil.create("div","line2");item.appendChild(l2);if(this.options.fill==="double"){if(fill){l1.appendChild(L.DomUtil.create("div","fill"));l2.appendChild(L.DomUtil.create("div","secondary-fill"))}else{l1.appendChild(L.DomUtil.create("div","secondary-fill"));l2.appendChild(L.DomUtil.create("div","fill"))}}else{if(fill)l1.appendChild(L.DomUtil.create("div","fill"));if(!fill)l2.appendChild(L.DomUtil.create("div","fill"))}return item},_buildDivisionLbl:function(){var itemLbl=L.DomUtil.create("div","label divisionLabel");return itemLbl},_update:function(){var bounds=this._map.getBounds(),centerLat=bounds.getCenter().lat,halfWorldMeters=6378137*Math.PI*Math.cos(centerLat*Math.PI/180),dist=halfWorldMeters*(bounds.getNorthEast().lng-bounds.getSouthWest().lng)/180,size=this._map.getSize();if(size.x>0){this._updateScale(dist,this.options)}},_updateScale:function(maxMeters,options){var scale=this._getBestScale(maxMeters,options.minUnitWidth,options.maxUnitsWidth);this._render(scale)},_getBestScale:function(maxMeters,minUnitWidthPx,maxUnitsWidthPx){var possibleUnits=this._getPossibleUnits(maxMeters,minUnitWidthPx,this._map.getSize().x);var possibleScales=this._getPossibleScales(possibleUnits,maxUnitsWidthPx);possibleScales.sort(function(scaleA,scaleB){return scaleB.score-scaleA.score});var scale=possibleScales[0];scale.subunits=this._getSubunits(scale);return scale},_getSubunits:function(scale){var subdivision=this._possibleDivisionsSub[scale.unit.unitDivision];var subunit={};subunit.subunitDivision=subdivision.division;subunit.subunitMeters=subdivision.division*(scale.unit.unitMeters/scale.unit.unitDivision);subunit.subunitFactor=scale.unit.unitFactor,subunit.subunitPx=subdivision.division*(scale.unit.unitPx/scale.unit.unitDivision);var subunits={subunit:subunit,numSubunits:subdivision.num,total:subdivision.num*subunit.subunitMeters};return subunits},_getPossibleScales:function(possibleUnits,maxUnitsWidthPx){var scales=[];var minTotalWidthPx=Number.POSITIVE_INFINITY;var fallbackScale;for(var i=0;i<this._possibleUnitsNumLen;i++){var numUnits=this._possibleUnitsNum[i];var numUnitsScore=(this._possibleUnitsNumLen-i)*.5;for(var j=0;j<possibleUnits.length;j++){var unit=possibleUnits[j];var totalWidthPx=unit.unitPx*numUnits;var scale={unit:unit,totalWidthPx:totalWidthPx,numUnits:numUnits,score:0};var totalWidthPxScore=1-(maxUnitsWidthPx-totalWidthPx)/maxUnitsWidthPx;totalWidthPxScore*=3;var score=unit.unitScore+numUnitsScore+totalWidthPxScore;if(unit.unitDivision===.25&&numUnits===3||unit.unitDivision===.5&&numUnits===3||unit.unitDivision===.25&&numUnits===5){score-=2}scale.score=score;if(totalWidthPx<maxUnitsWidthPx){scales.push(scale)}if(totalWidthPx<minTotalWidthPx){minTotalWidthPx=totalWidthPx;fallbackScale=scale}}}if(!scales.length)scales.push(fallbackScale);return scales},_getPossibleUnits:function(maxMeters,minUnitWidthPx,mapWidthPx){var factor=this._getUnitConversionFactor(maxMeters);maxMeters*=factor;var exp=(Math.floor(maxMeters)+"").length;var unitMetersPow;var units=[];for(var i=exp;i>0;i--){unitMetersPow=Math.pow(10,i);for(var j=0;j<this._possibleDivisionsLen;j++){var unitMeters=unitMetersPow*this._possibleDivisions[j];var unitPx=mapWidthPx*(unitMeters/maxMeters);if(unitPx<minUnitWidthPx){return units}units.push({unitMeters:unitMeters,unitFactor:factor,unitPx:unitPx,unitDivision:this._possibleDivisions[j],unitScore:this._possibleDivisionsLen-j})}}return units},_render:function(scale){this._renderPart(scale.unit.unitPx,scale.unit.unitMeters,scale.unit.unitFactor,scale.numUnits,this._units,this._unitsLbls);this._renderPart(scale.subunits.subunit.subunitPx,scale.subunits.subunit.subunitMeters,scale.subunits.subunit.subunitFactor,scale.subunits.numSubunits,this._subunits);var subunitsDisplayUnit=this._getDisplayUnit(scale.subunits.total,scale.subunits.subunit.subunitFactor);if(this.options.unitPlacement==="label"){this._subunitsLbl.innerHTML=""+Math.round(subunitsDisplayUnit.amount)+subunitsDisplayUnit.unit}else{this._subunitsLbl.innerHTML=""+Math.round(subunitsDisplayUnit.amount)}if(this.options.unitPlacement==="scale"){var unitsDisplayUnit=this._getDisplayUnit(scale.unit.unitMeters,scale.unit.unitFactor);this._unitLbl.innerHTML=unitsDisplayUnit.unit;if(this._unitLblParent!==this._units[scale.numUnits-1]){if(this._unitLblParent)this._unitLblParent.removeChild(this._unitLbl);this._unitLblParent=this._units[scale.numUnits-1];this._unitLblParent.appendChild(this._unitLbl)}}},_renderPart:function(px,meters,factor,num,divisions,divisionsLbls){var displayUnit=this._getDisplayUnit(meters,factor);for(var i=0;i<this._units.length;i++){var division=divisions[i];if(i<num){division.style.width=px+"px";division.className="division"}else{division.style.width=0;division.className="division hidden"}if(!divisionsLbls)continue;var lbl=divisionsLbls[i];var lblClassNames=["label","divisionLabel"];if(i<num){var lblText=Math.round((i+1)*displayUnit.amount);if(i===num-1){if(this.options.unitPlacement==="label"){lblText+=displayUnit.unit}lblClassNames.push("labelLast")}else{lblClassNames.push("labelSub")}lbl.innerHTML=lblText}lbl.className=lblClassNames.join(" ")}},_getUnitConversionFactor:function(meters){if(this.options.getDisplayUnit)return this.options.getUnitConversionFactor(meters);return 1},_getDisplayUnit:function(value,factor){if(this.options.getDisplayUnit)return this.options.getDisplayUnit(value,factor);var displayUnit=value<1e3?"m":"km";return{unit:displayUnit,amount:displayUnit==="km"?value/1e3:value}}});L.Map.mergeOptions({graphicScaleControl:false});L.Map.addInitHook(function(){if(this.options.graphicScaleControl){this.graphicScaleControl=new L.Control.GraphicScale;this.addControl(this.graphicScaleControl)}});L.control.graphicScale=function(options){return new L.Control.GraphicScale(options)};

package.json

 {
   "name": "@kalisio/leaflet-graphicscale",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "A more configurable graphic scale for Leaflet.js",
   "main": "./src/Leaflet.GraphicScale.js",
   "scripts": {
+    "demo": "shx cp dist/* demo",
     "build:js": "uglifyjs src/Leaflet.GraphicScale.js > dist/Leaflet.GraphicScale.min.js",
     "build:css": "sass --style compressed src/Leaflet.GraphicScale.scss > dist/Leaflet.GraphicScale.min.css",
-    "build": "npm run build:css && npm run build:js",
+    "build": "npm run build:css && npm run build:js && npm run demo",
     "dev": "onchange 'src/**/*.*' -- npm run build",
@@ -40,2 +41,3 @@ "publish": "git push origin HEAD --tags && git push origin",
     "onchange": "^7.1.0",
+    "shx": "^0.3.4",
     "uglify-js": "^3.17.0"
@@ -42,0 +44,0 @@ },

README.md

@@ -7,4 +7,9 @@ # leaflet-graphicscale
 
-Forked from [nerik/leaflet-graphicscale](https://github.com/nerik/leaflet-graphicscale) as no maintenance was intended.
+Demo : https://kalisio.github.io/leaflet-graphicscale.
 
+Forked from [nerik/leaflet-graphicscale](https://github.com/nerik/leaflet-graphicscale) as no maintenance was intended. Additional features have been developed:
+* new `double` fill option to alternate fill colors,
+* new `unitPlacement` option to display unit beside labels or scale,
+* ability to manage multiple unit systems with customisable functions.
+
 ## Build
@@ -63,3 +68,3 @@
 
-### fill: ```false|'fill'|'hollow'|'line'```
+### fill: ```false|'fill'|'double'|'hollow'|'line'```
 
@@ -121,9 +126,20 @@ Default: `false`.
 
+### getUnitConversionFactor ```(Function)```
+
+Default: none. The `getUnitConversionFactor(meters)` function should return the conversion factor between meters and target unit to be displayed, e.g. to manage imperial system and switch between miles/feet
+```
+const getUnitConversionFactor = (meters) => (meters * 0.00062137 >= 25) ? 0.00062137 : 3.28084
+```
+
+> Take a look at the demo to see it in action with three different unit systems: metric, imperial, nautical.
+
 ### getDisplayUnit ```(Function)```
 
-Default: none. The `getDisplayUnit(meters)` function should return the unit label and value to be displayed, e.g.
+Default: none. The `getDisplayUnit(value, factor)` function should return the unit label and value to be displayed, e.g. to manage imperial system and switch between miles/feet
 ```
-const getDisplayUnit = (meters) => ({ unit: (meters<1000) ? 'm' : 'km', amount: (displayUnit === 'km') ? meters / 1000 : meters })
+const getDisplayUnit = (value, factor) => ({ unit: (factor === 3.28084) ? 'ft' : 'mi', amount: value })
 ```
 
+> Take a look at the demo to see it in action with three different unit systems: metric, imperial, nautical.
+
 ### position:
@@ -130,0 +146,0 @@

src/Leaflet.GraphicScale.js

@@ -209,2 +209,3 @@ L.Control.GraphicScale = L.Control.extend({
         subunit.subunitMeters = subdivision.division * (scale.unit.unitMeters / scale.unit.unitDivision);
+        subunit.subunitFactor = scale.unit.unitFactor,
         subunit.subunitPx = subdivision.division * (scale.unit.unitPx / scale.unit.unitDivision);
@@ -283,2 +284,4 @@
     _getPossibleUnits: function(maxMeters, minUnitWidthPx, mapWidthPx) {
+        var factor = this._getUnitConversionFactor(maxMeters);
+        maxMeters *= factor
         var exp = (Math.floor(maxMeters) + '').length;
@@ -302,2 +305,3 @@
                     unitMeters: unitMeters,
+                    unitFactor: factor,
                     unitPx: unitPx,
@@ -314,14 +318,14 @@ unitDivision: this._possibleDivisions[j],
     _render: function(scale) {
-        this._renderPart(scale.unit.unitPx, scale.unit.unitMeters, scale.numUnits, this._units, this._unitsLbls);
-        this._renderPart(scale.subunits.subunit.subunitPx, scale.subunits.subunit.subunitMeters, scale.subunits.numSubunits, this._subunits);
+        this._renderPart(scale.unit.unitPx, scale.unit.unitMeters, scale.unit.unitFactor, scale.numUnits, this._units, this._unitsLbls);
+        this._renderPart(scale.subunits.subunit.subunitPx, scale.subunits.subunit.subunitMeters, scale.subunits.subunit.subunitFactor, scale.subunits.numSubunits, this._subunits);
 
-        var subunitsDisplayUnit = this._getDisplayUnit(scale.subunits.total);
+        var subunitsDisplayUnit = this._getDisplayUnit(scale.subunits.total, scale.subunits.subunit.subunitFactor);
         if (this.options.unitPlacement === 'label') {
-            this._subunitsLbl.innerHTML = ''+ subunitsDisplayUnit.amount + subunitsDisplayUnit.unit;
+            this._subunitsLbl.innerHTML = ''+ Math.round(subunitsDisplayUnit.amount) + subunitsDisplayUnit.unit;
         } else {
-            this._subunitsLbl.innerHTML = ''+ subunitsDisplayUnit.amount;
+            this._subunitsLbl.innerHTML = ''+ Math.round(subunitsDisplayUnit.amount);
         }
 
         if (this.options.unitPlacement === 'scale') {
-            var unitsDisplayUnit = this._getDisplayUnit(scale.unit.unitMeters);
+            var unitsDisplayUnit = this._getDisplayUnit(scale.unit.unitMeters, scale.unit.unitFactor);
             this._unitLbl.innerHTML = unitsDisplayUnit.unit;
@@ -337,5 +341,5 @@ // Detach from previous latest division then reattach
 
-    _renderPart: function(px, meters, num, divisions, divisionsLbls) {
+    _renderPart: function(px, meters, factor, num, divisions, divisionsLbls) {
 
-        var displayUnit = this._getDisplayUnit(meters);
+        var displayUnit = this._getDisplayUnit(meters, factor);
 
@@ -359,3 +363,3 @@ for (var i = 0; i < this._units.length; i++) {
             if (i < num) {
-                var lblText = ( (i+1)*displayUnit.amount );
+                var lblText = ( Math.round((i+1)*displayUnit.amount) );
 
@@ -374,13 +378,18 @@ if (i === num-1) {
             lbl.className = lblClassNames.join(' ');
-
         }
     },
 
-    _getDisplayUnit: function(meters) {
+    _getUnitConversionFactor: function(meters) {
         // User-defined ?
-        if (this.options.getDisplayUnit) return this.options.getDisplayUnit(meters);
-        var displayUnit = (meters<1000) ? 'm' : 'km';
+        if (this.options.getDisplayUnit) return this.options.getUnitConversionFactor(meters);
+        return 1;
+    },
+
+    _getDisplayUnit: function(value, factor) {
+        // User-defined ?
+        if (this.options.getDisplayUnit) return this.options.getDisplayUnit(value, factor);
+        var displayUnit = (value<1000) ? 'm' : 'km';
         return {
             unit: displayUnit,
-            amount: (displayUnit === 'km') ? meters / 1000 : meters
+            amount: (displayUnit === 'km') ? value / 1000 : value
         };
@@ -387,0 +396,0 @@ }

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

526687

increased by3.01%

Number of package files

21

increased by16.67%

Lines of code

545

increased by21.11%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

150

increased by11.94%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes