@kalisio/leaflet-graphicscale
Advanced tools
A more configurable graphic scale for Leaflet.js.
Forked from nerik/leaflet-graphicscale as no maintenance was intended.
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'|'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 getDisplayUnit(meters) function should return the unit label and value to be displayed, e.g.
const getDisplayUnit = (meters) => ({ unit: (meters<1000) ? 'm' : 'km', amount: (displayUnit === 'km') ? meters / 1000 : meters })
See http://leafletjs.com/reference.html#control
FAQs
A more configurable graphic scale for Leaflet.js
The npm package @kalisio/leaflet-graphicscale receives a total of 100 weekly downloads. As such, @kalisio/leaflet-graphicscale popularity was classified as not popular.
We found that @kalisio/leaflet-graphicscale demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.