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:
- new
doublefill option to alternate fill colors, - new
unitPlacementoption to display unit beside labels or scale, - ability to manage multiple unit systems with customisable functions.
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/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="Leaflet.GraphicScale.min.css" />
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/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);
Default: false.
- false/'nofill'
- 'fill'
With fill the scale alternates between filled and transparent sections.
- 'double'
With double the scale only contains filled sections but with alternate colors.
- 'hollow'
- 'line'
Default: false.
Default: false. Show smaller divisions on the left of the zero.
Default: 30. The minimum width of a scale unit.
Default: 240. The maximum width of the scale without subunits.
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).
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.
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.
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.