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 addControlopen in new window

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 addControlopen in new window

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: IControlopen in new window

AttributionControl

An AttributionControl control presents the map's attribution information.

Props

compact

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 AttributionControlopen in new window

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 FullscreenControlopen in new window

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 GeolocateControlopen in new window

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 GeolocateControlopen in new window

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 GeolocateControlopen in new window

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 GeolocateControlopen in new window

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 GeolocateControlopen in new window

Methods

.trigger()

Props

showCompass

showZoom

visualizePitch

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

ScaleControl

Props

maxWidth

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

unit

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