1.0.0 • Published 3 months ago

@kalisio/leaflet-graphicscale v1.0.0

Weekly downloads
-
License
public domain
Repository
github
Last release
3 months ago

leaflet-graphicscale

A more configurable graphic scale for Leaflet.js.

Image

Demo : https://kalisio.github.io/leaflet-graphicscale.

Forked from 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

To build distribution files locally you'll need to install sass globally then run: 

npm run build

Getting started

Using minified files

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

npm.io

  • 'fill'

With fill the scale alternates between filled and transparent sections.

npm.io

  • 'double'

With double the scale only contains filled sections but with alternate colors.

  • 'hollow'

npm.io

  • 'line'

npm.io

doubleLine: false|true

Default: false.

npm.io

showSubunits: false|true

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

npm.io

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

graphicscaleleafletscale
1.0.0

3 months ago

0.1.0

3 months ago