<< all controls

📏 @shenyong/mapbox-gl-ruler

Control to measure distance between points on a map.

``
npm i @shenyong/mapbox-gl-ruler
`

`js
import RulerControl from '@shenyong/mapbox-gl-ruler';
import '@shenyong/mapbox-gl-ruler/src/index.css';

map.addControl(new RulerControl(), 'bottom-right');
map.on('ruler.on', () => console.log('Ruler activated'));
map.on('ruler.off', () => console.log('Ruler deactivated'));
`

Options

`ts
export type Units = import('@turf/helpers').Units;

export type RulerControlOptions = {
units?: import("@turf/helpers").Units | undefined;
labelFormat?: ((n: number) => string) | undefined;
symbolLayout?: mapboxgl.SymbolLayout | undefined;
symbolPaint?: mapboxgl.SymbolPaint | undefined;
lineLayout?: mapboxgl.LineLayout | undefined;
linePaint?: mapboxgl.LinePaint | undefined;
markerCSS?: Partial | undefined;
invisible?: boolean | undefined;
};
`

Events

| event | description |
| --------- | ----------------- |
| ruler.on | ruler activated |
| ruler.off | ruler deactivated |

Methods

Methods are useful for programmatic control (when option invisible is true):

- activate(): void; - activate controls
- deactivate(): void; - deactivate control
- addCoordinate(coordinate: [number, number]): void;` - add new coordinate