@kalisio/leaflet-graphicscale
Advanced tools
A more configurable graphic scale for Leaflet.js.
Demo : https://kalisio.github.io/leaflet-graphicscale.
Forked from nerik/leaflet-graphicscale as no maintenance was intended. Additional features have been developed:
double fill option to alternate fill colors,unitPlacement option to display unit beside labels or scale,To build distribution files locally you'll need to install sass globally then run:
npm run build
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<link rel="stylesheet" href="Leaflet.GraphicScale.min.css" />
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="Leaflet.GraphicScale.min.js"></script>
<script>
var map = L.map('map');
L.tileLayer('...').addTo(map);
var graphicScale = L.control.graphicScale([options]).addTo(map);
</script>
</body>
</html>
See below for [options]
npm install -S @kalisio/leaflet-graphicscale
SASS :
@import './node_modules/leaflet-graphicscale/src/Leaflet.GraphicScale.scss';
JS :
require('leaflet-graphicscale');
var graphicScale = L.control.graphicScale().addTo(map);
false|'fill'|'double'|'hollow'|'line'Default: false.
With fill the scale alternates between filled and transparent sections.
With double the scale only contains filled sections but with alternate colors.
false|trueDefault: false.
false|trueDefault: false. Show smaller divisions on the left of the zero.
(Number)Default: 30. The minimum width of a scale unit.
(Number)Default: 240. The maximum width of the scale without subunits.
'auto'|'top'|'bottom'Default: auto. Display the distance label on top/on the bottom of the scale bar. If set to auto, labels will be placed on top when the scale control is on the bottom of the map, and on the bottom when the scale control is on the top of the map (position parameter).
'label'|'scale'Default: label. Display the unit labels beside the labels on the left/right side of the scale bar. If set to scale, labels will be placed on the left/right-side of the scale bar.
(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.
(Function)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 = (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.
See http://leafletjs.com/reference.html#control
FAQs
A more configurable graphic scale for Leaflet.js
We found that @kalisio/leaflet-graphicscale demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.