Map control components

Common Props

position

• Type: String
• Default: 'top-right'
• Description: position on the map to which the control will be added. Valid values are 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'
• See: position in addControl

Common Props

position

• Type: String
• Default: 'top-right'
• Description: position on the map to which the control will be added. Valid values are 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'
• See: position in addControl

IControl

a versatile control box for your content

Props

none

Slots

default

Your content as text, HTML or Template, will be wrapped in div with mapboxgl-ctrl mapboxgl-ctrl-group classes

See: IControl

AttributionControl

An AttributionControl control presents the map's attribution information.

Props

compact

• Type: Boolean
• Default: true
• Non-Synced
• Description: If true force a compact attribution
• See: options.compact in AttributionControl

customAttribution

• Type: string, Array<string>?
• Default: true
• Non-Synced
• Description: String or strings to show in addition to any other attributions.
• See: options.customAttribution in AttributionControl

FullscreenControl

Creates a button on the map to toggle fulscreen mode.

Props

container

• Type: HTMLElement
• Non-Synced
• Description: DOM element which should be made full screen. By default, the map container element will be made full screen.
• See: options.container in FullscreenControl

GeolocateControl

Provides a button that uses the browser's geolocation API to locate the user on the map.

Props

positionOptions

• Type: Object
• Default: { enableHighAccuracy: false, timeout: 6000}
• Non-Synced
• Description: A Geolocation API PositionOptions object.
• See: options.positionOptions in GeolocateControl

fitBoundsOptions

• Type: Object
• Default: { maxZoom:15 }
• Non-Synced
• Description: A fitBounds options object to use when the map is panned and zoomed to the user's location.
• See: options.fitBoundsOptions in GeolocateControl

trackUserLocation

• Type: Boolean
• Default: false
• Non-Synced
• Description: If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.to the user's location.
• See: options.trackUserLocation in GeolocateControl

showAccuracyCircle

• Type: Boolean
• Default: true
• Non-Synced
• Description: By default, if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false .
• See: options.showUserLocation in GeolocateControl

showUserLocation

• Type: Boolean
• Default: true
• Non-Synced
• Description: By default a dot will be shown on the map at the user's location. Set to false to disable.
• See: options.showUserLocation in GeolocateControl

Methods

.trigger()

• Description: Trigger a geolocation
• Returns: boolean
• See: trigger GeolocateControl method

NavigationControl

Props

showCompass

• Type: Boolean
• Default: true
• Non-Synced
• Description: If true the compass button is included.
• See: options.showCompass in NavigationControl

showZoom

• Type: Boolean
• Default: true
• Non-Synced
• Description: If true the zoom-in and zoom-out buttons are included.
• See: options.showZoom in NavigationControl

visualizePitch

• Type: Boolean
• Default: false
• Non-Synced
• Description: If true the pitch is visualized by rotating X-axis of compass.
• See: options.visualizePitch in NavigationControl

ScaleControl

Props

maxWidth

• Type: Number
• Default: 100
• Non-Synced
• Description: The maximum length of the scale control in pixels.
• See: options.maxWidth in ScaleControl

unit

• Type: String, "imperial" | "metric" | "nautical"
• Default: metric
• Non-Synced
• Description: Unit of the distance
• See: options.unit in ScaleControl