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)


Parameters


  1. 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


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, data: any)


Parameters


  1. parent: 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)


Parameters


  1. lnglat: 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

1
var marker = new nextbillion.maps.Marker()
2
  .setLngLat([30.5, 50.5])
3
  .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)


Parameters


  1. 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


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, data: any)


Parameters


  1. parent: 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)


Parameters


  1. lnglat: 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
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 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

1
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
2
var popupOffsets = {
3
 'top': [0, 0],
4
 'top-left': [0,0],
5
 'top-right': [0,0],
6
 'bottom': [0, -markerHeight],
7
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
8
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
9
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
10
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
11
 };
12
var popup = new nextbillion.maps.Popup({offset: popupOffsets, className: 'my-class'})
13
  .setLngLat(e.lngLat)
14
  .setHTML("<h1>Hello World!</h1>")
15
  .setMaxWidth("300px")
16
  .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)


Parameters


  1. 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

1
var nav = new nextbillion.maps.NavigationControl();
2
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


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


Removes a previously registered event listener.
on

on(type: string, listener: Listener)


Parameters


  1. type: string
  2. listener: Listener

Return Value: GeolocateControl


Adds a listener to a specified event type.
onAdd

onAdd(map: Map)


Parameters


  1. 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


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, data: any)


Parameters


  1. parent: Evented
  2. data: any

Return Value: 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

1
map.addControl(new nextbillion.maps.GeolocateControl({
2
    positionOptions: {
3
        enableHighAccuracy: true
4
    },
5
    trackUserLocation: true
6
}));

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)


Parameters


  1. 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

1
var map = new nextbillion.maps.Map({attributionControl: false})
2
    .addControl(new nextbillion.maps.AttributionControl({
3
        compact: true
4
    }));

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)


Parameters


  1. 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

1
map.addControl(new nextbillion.maps.FullscreenControl({container: document.querySelector('body')}));

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

logo

UNITED STATES

NEXTBILLION.AI, INC.
21 E State Street,
Suite 200,
Columbus, OH 43215

SINGAPORE

#32-01, 80 Raffles Place, UOB Plaza,
Singapore, 048624

ยฉ 2024 NextBillion.ai all rights reserved.

Privacy PolicyTerms of ServiceSLASupport Services Agreement