## Marker
Creates a marker component
### Constructor
| Name | |
| --- | --- |
| Marker | new Marker(options: MarkerOptions, legacyOptions: MarkerOptions)
Parameters
1. options: MarkerOptions
2. legacyOptions: MarkerOptions |
### Methods
| Method | |
| --- | --- |
| addTo | addTo(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: default
Attaches the `Marker` to a `Map` object. |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: default |
| getElement | getElement()
Return Value: HTMLElement
Returns the `Marker` 's HTML element. |
| getLngLat | getLngLat()
Return Value: [LngLat](./geography-and-geometry#lnglat)
Get the marker's geographical location.
The longitude of the result may differ by a multiple of 360 degrees from the longitude previously
set by `setLngLat` because `Marker` wraps the anchor longitude across copies of the world to keep
the marker on screen. |
| getOffset | getOffset()
Return Value: Point
Get the marker's offset. |
| getPitchAlignment | getPitchAlignment()
Return Value: string
Returns the current `pitchAlignment` property of the marker. |
| getPopup | getPopup()
Return Value: default
Returns the Popup instance that is bound to the Marker . |
| getRotation | getRotation()
Return Value: number
Returns the current rotation angle of the marker (in degrees). |
| getRotationAlignment | getRotationAlignment()
Return Value: string
Returns the current `rotationAlignment` property of the marker. |
| isDraggable | isDraggable()
Return Value: boolean
Returns true if the marker can be dragged |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Adds a listener to a specified event type. |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| remove | remove()
Return Value: default
Removes the marker from a map |
| setDraggable | setDraggable(shouldBeDraggable: boolean)
Parameters
1. shouldBeDraggable: boolean
Return Value: default
Sets the `draggable` property and functionality of the marker |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: default
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| setLngLat | setLngLat(lnglat: [LngLatLike](./geography-and-geometry#interface-lnglatlike))
Parameters
1. lnglat: [LngLatLike](./geography-and-geometry#interface-lnglatlike)
Return Value: default
Set the marker's geographical position and move it. |
| setOffset | setOffset(offset: PointLike)
Parameters
1. offset: PointLike
Return Value: default
Sets the offset of the marker |
| setPitchAlignment | setPitchAlignment(alignment: string)
Parameters
1. alignment: string
Return Value: default
Sets the `pitchAlignment` property of the marker. |
| setPopup | setPopup(popup: default)
Parameters
1. popup: default
Return Value: default
Binds a Popup to the Marker . |
| setRotation | setRotation(rotation: number)
Parameters
1. rotation: number
Return Value: default
Sets the `rotation` property of the marker. |
| setRotationAlignment | setRotationAlignment(alignment: string)
Parameters
1. alignment: string
Return Value: default
Sets the `rotationAlignment` property of the marker. |
| togglePopup | togglePopup()
Return Value: default
Opens or closes the Popup instance that is bound to the Marker , depending on the current state of the Popup . |
## Example
```ts
var marker = new nextbillion.maps.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
```
## Popup
A popup component.
### Constructor
| Name | |
| --- | --- |
| Popup | new Popup(options: PopupOptions)
Parameters
1. options: PopupOptions |
### Methods
| Method | |
| --- | --- |
| addClassName | addClassName(className: string)
Parameters
1. className: string
Return Value: void
Adds a CSS class to the popup container element. |
| addTo | addTo(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: default
Adds the popup to a map. |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: default |
| getElement | getElement()
Return Value: HTMLElement
Returns the `Popup` 's HTML element. |
| getLngLat | getLngLat()
Return Value: [LngLat](./geography-and-geometry#lnglat)
Returns the geographical location of the popup's anchor.
The longitude of the result may differ by a multiple of 360 degrees from the longitude previously
set by `setLngLat` because `Popup` wraps the anchor longitude across copies of the world to keep
the popup on screen. |
| getMaxWidth | getMaxWidth()
Return Value: string
Returns the popup's maximum width. |
| isOpen | isOpen()
Return Value: boolean |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Adds a listener to a specified event type. |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: default
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| remove | remove()
Return Value: default
Removes the popup from the map it has been added to. |
| removeClassName | removeClassName(className: string)
Parameters
1. className: string
Return Value: void
Removes a CSS class from the popup container element. |
| setDOMContent | setDOMContent(htmlNode: Node)
Parameters
1. htmlNode: Node
Return Value: default
Sets the popup's content to the element provided as a DOM node. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: default
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| setHTML | setHTML(html: string)
Parameters
1. html: string
Return Value: default
Sets the popup's content to the HTML provided as a string.
This method does not perform HTML filtering or sanitization, and must be
used only with trusted content. Consider Popup#setText if
the content is an untrusted text string. |
| setLngLat | setLngLat(lnglat: [LngLatLike](./geography-and-geometry#interface-lnglatlike))
Parameters
1. lnglat: [LngLatLike](./geography-and-geometry#interface-lnglatlike)
Return Value: default
Sets the geographical location of the popup's anchor, and moves the popup to it. Replaces trackPointer() behavior. |
| setMaxWidth | setMaxWidth(maxWidth: string)
Parameters
1. maxWidth: string
Return Value: default
Sets the popup's maximum width. This is setting the CSS property `max-width` .
Available values can be found here: [https://developer.mozilla.org/en-US/docs/Web/CSS/max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) |
| setOffset | setOffset(offset: Offset)
Parameters
1. offset: Offset
Return Value: default
Sets the popup's offset. |
| setText | setText(text: string)
Parameters
1. text: string
Return Value: default
Sets the popup's content to a string of text.
This function creates a [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) node in the DOM,
so it cannot insert raw HTML. Use this method for security against XSS
if the popup content is user-provided. |
| toggleClassName | toggleClassName(className: string)
Parameters
1. className: string
Return Value: boolean
Add or remove the given CSS class on the popup container, depending on whether the container currently has that class. |
| trackPointer | trackPointer()
Return Value: default
Tracks the popup anchor to the cursor position on screens with a pointer device (it will be hidden on touchscreens). Replaces the `setLngLat` behavior.
For most use cases, set `closeOnClick` and `closeButton` to `false` . |
## Example
```ts
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
'top': [0, 0],
'top-left': [0,0],
'top-right': [0,0],
'bottom': [0, -markerHeight],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'left': [markerRadius, (markerHeight - markerRadius) * -1],
'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};
var popup = new nextbillion.maps.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("Hello World!
")
.setMaxWidth("300px")
.addTo(map);
```
## NavigationControl
A `NavigationControl` control contains zoom buttons and a compass.
### Constructor
| Name | |
| --- | --- |
| NavigationControl | new NavigationControl(options: NavigationOptions)
Parameters
1. options: NavigationOptions |
### Methods
| Method | |
| --- | --- |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: HTMLElement
Register a control on the map and give it a chance to register event listeners
and resources. This method is called by Map#addControl
internally. |
| onRemove | onRemove()
Return Value: void
Unregister a control on the map and give it a chance to detach event listeners
and resources. This method is called by Map#removeControl
internally. |
## Example
```ts
var nav = new nextbillion.maps.NavigationControl();
map.addControl(nav, 'top-left');
```
## GeolocateControl
A `GeolocateControl` control provides a button that uses the browser's geolocation
API to locate the user on the map.
Not all browsers support geolocation,
and some users may disable the feature. Geolocation support for modern
browsers including Chrome requires sites to be served over HTTPS. If
geolocation support is not available, the GeolocateControl will show
as disabled.
The zoom level applied will depend on the accuracy of the geolocation provided by the device.
The GeolocateControl has two modes. If `trackUserLocation` is `false` (default) the control acts as a button, which when pressed will set the map's camera to target the user location. If the user moves, the map won't update. This is most suited for the desktop. If `trackUserLocation` is `true` the control acts as a toggle button that when active the user's location is actively monitored for changes. In this mode the GeolocateControl has three interaction states:
\* active - the map's camera automatically updates as the user's location changes, keeping the location dot in the center. Initial state and upon clicking the `GeolocateControl` button.
\* passive - the user's location dot automatically updates, but the map's camera does not. Occurs upon the user initiating a map movement.
\* disabled - occurs if Geolocation is not available, disabled or denied.
These interaction states can't be controlled programmatically, rather they are set based on user interactions.
### Constructor
| Name | |
| --- | --- |
| GeolocateControl | new GeolocateControl(options: GeolocateOptions)
Parameters
1. options: GeolocateOptions |
### Methods
| Method | |
| --- | --- |
| fire | fire(event: string \| Event, properties: any)
Parameters
1. event: string \| Event
2. properties: any
Return Value: [GeolocateControl](#geolocatecontrol) |
| listens | listens(type: string)
Parameters
1. type: string
Return Value: any
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. |
| off | off(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeolocateControl](#geolocatecontrol)
Removes a previously registered event listener. |
| on | on(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeolocateControl](#geolocatecontrol)
Adds a listener to a specified event type. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: HTMLElement
Register a control on the map and give it a chance to register event listeners
and resources. This method is called by Map#addControl
internally. |
| onRemove | onRemove()
Return Value: void
Unregister a control on the map and give it a chance to detach event listeners
and resources. This method is called by Map#removeControl
internally. |
| once | once(type: string, listener: Listener)
Parameters
1. type: string
2. listener: Listener
Return Value: [GeolocateControl](#geolocatecontrol)
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered. |
| setEventedParent | setEventedParent(parent: [Evented](./events#evented), data: any)
Parameters
1. parent: [Evented](./events#evented)
2. data: any
Return Value: [GeolocateControl](#geolocatecontrol)
Bubble all events fired by this instance of Evented to this parent instance of Evented. |
| trigger | trigger()
Return Value: boolean
Programmatically request and move the map to the user's location. |
## Example
```ts
map.addControl(new nextbillion.maps.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
```
## AttributionControl
An `AttributionControl` control presents the map's attribution information.
### Constructor
| Name | |
| --- | --- |
| AttributionControl | new AttributionControl(options: AttributionOptions)
Parameters
1. options: AttributionOptions |
### Methods
| Method | |
| --- | --- |
| getDefaultPosition | getDefaultPosition()
Return Value: ControlPosition
Optionally provide a default position for this control. If this method
is implemented and Map#addControl is called without the `position`
parameter, the value returned by getDefaultPosition will be used as the
control's position. |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: HTMLElement
Register a control on the map and give it a chance to register event listeners
and resources. This method is called by Map#addControl
internally. |
| onRemove | onRemove()
Return Value: void
Unregister a control on the map and give it a chance to detach event listeners
and resources. This method is called by Map#removeControl
internally. |
## Example
```ts
var map = new nextbillion.maps.Map({attributionControl: false})
.addControl(new nextbillion.maps.AttributionControl({
compact: true
}));
```
## FullscreenControl
A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode.
### Constructor
| Name | |
| --- | --- |
| FullscreenControl | new FullscreenControl(options: FullscreenOptions)
Parameters
1. options: FullscreenOptions |
### Methods
| Method | |
| --- | --- |
| onAdd | onAdd(map: [Map](./map#map))
Parameters
1. map: [Map](./map#map)
Return Value: HTMLElement
Register a control on the map and give it a chance to register event listeners
and resources. This method is called by Map#addControl
internally. |
| onRemove | onRemove()
Return Value: void
Unregister a control on the map and give it a chance to detach event listeners
and resources. This method is called by Map#removeControl
internally. |
## Example
```ts
map.addControl(new nextbillion.maps.FullscreenControl({container: document.querySelector('body')}));
```