@mapbox-controls/ruler

<< all controls

📏 @mapbox-controls/ruler

Control to measure distance between points on a map.

npm i @mapbox-controls/ruler

import RulerControl from '@mapbox-controls/ruler';
import '@mapbox-controls/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

export type ControlOptions = {
    units?: import("@turf/helpers").Units;
    labelFormat?: (n: number) => string;
    lineLayout?: import("mapbox-gl").LineLayerSpecification["layout"];
    linePaint?: import("mapbox-gl").LineLayerSpecification["paint"];
    markerLayout?: import("mapbox-gl").CircleLayerSpecification["layout"];
    markerPaint?: import("mapbox-gl").CircleLayerSpecification["paint"];
    labelLayout?: import("mapbox-gl").SymbolLayerSpecification["layout"];
    labelPaint?: import("mapbox-gl").SymbolLayerSpecification["paint"];
    invisible?: boolean;
};

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

Changelog

3.0.0

• ⚠️ Use new mapbox types instead of DefinitelyTyped
• Update @turf package
• Update @mapbox package
• Increase icon size for 1px for pixel perfect centering inside buttons