<!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]

Compile from source (using browserify and sass)

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);

Options

fill: `false|'fill'|'double'|'hollow'|'line'`

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'

doubleLine: `false|true`

Default: false.

showSubunits: `false|true`

Default: false. Show smaller divisions on the left of the zero.

minUnitWidth: `(Number)`

Default: 30. The minimum width of a scale unit.

maxUnitsWidth: `(Number)`

Default: 240. The maximum width of the scale without subunits.

labelPlacement: `'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).

unitPlacement: `'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.

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(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.

position:

See http://leafletjs.com/reference.html#control

updateWhenIdle:

See http://leafletjs.com/reference.html#control-scale

Keywords

graphicscale

leaflet

scale

FAQs

What is @kalisio/leaflet-graphicscale?

Is @kalisio/leaflet-graphicscale popular?

Is @kalisio/leaflet-graphicscale well maintained?

Package last updated on 06 Feb 2024

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.

Install

@kalisio/leaflet-graphicscale

leaflet-graphicscale

Build

Getting started

Using minified files

Compile from source (using browserify and sass)

Options

fill: false|'fill'|'double'|'hollow'|'line'

doubleLine: false|true

showSubunits: false|true

minUnitWidth: (Number)

maxUnitsWidth: (Number)

labelPlacement: 'auto'|'top'|'bottom'

unitPlacement: 'label'|'scale'

getUnitConversionFactor (Function)

getDisplayUnit (Function)