Measure distance between points on a map
npm install @shenyong/mapbox-gl-rulerControl 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'));
`
`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
invisible?: boolean | undefined;
};
`
| event | description |
| --------- | ----------------- |
| ruler.on | ruler activated |
| ruler.off | ruler deactivated |
Methods are useful for programmatic control (when option invisible is true):
- activate(): void; - activate controlsdeactivate(): void;
- - deactivate controladdCoordinate(coordinate: [number, number]): void;` - add new coordinate
-