TrackAsia GL JS Docs
TrackAsiaTrackAsia GL JS DocsAPI ReferenceMarkers and controls

Markers and controls

User interface elements that can be added to the map. The items in this section exist outside of the map's canvas element.

Marker

src/ui/marker.ts

Creates a marker component

Extends Evented.
new Marker(options: MarkerOptions?, legacyOptions: MarkerOptions?)

Parameters

options(MarkerOptions?)
NameDescription
options.element
HTMLElement?		DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.
options.anchor
PositionAnchor
default: 'center'
A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' .
options.offset
PointLike?		The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.
options.color
string
default: '#3FB1CE'
The color to use for the default marker if options.element is not provided. The default is light blue.
options.scale
number
default: 1
The scale to use for the default marker if options.element is not provided. The default scale corresponds to a height of 41px and a width of 27px .
options.draggable
boolean
default: false
A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
options.clickTolerance
number
default: 0
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map's clickTolerance.
options.rotation
number
default: 0
The rotation angle of the marker in degrees, relative to its respective rotationAlignment setting. A positive value will rotate the marker clockwise.
options.pitchAlignment
string
default: 'auto'
map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment .
options.rotationAlignment
string
default: 'auto'
map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport .
legacyOptions(MarkerOptions?)

Example

var marker = new trackasiagl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
// Set options
var marker = new trackasiagl.Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5])
.addTo(map);

Instance Members

Events

src/ui/popup.ts

A popup component.

Extends Evented.
new Popup(options: PopupOptions?)
options(PopupOptions?)
NameDescription
options.closeButton
boolean
default: true
If true , a close button will appear in the top right corner of the popup.
options.closeOnClick
boolean
default: true
If true , the popup will closed when the map is clicked.
options.closeOnMove
boolean
default: false
If true , the popup will closed when the map moves.
options.focusAfterOpen
boolean
default: true
If true , the popup will try to focus the first focusable element inside the popup.
options.anchor
PositionAnchor?		A string indicating the part of the Popup that should be positioned closest to the coordinate set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' .
options.offset
(number | PointLike | Object)?		A pixel offset applied to the popup's location specified as:
  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifying an offset for each anchor position Negative offsets indicate left and up.
options.className
string?		Space-separated CSS class names to add to popup container
options.maxWidth
string
default: '240px'
A string that sets the CSS property of the popup's maximum width, eg '300px' . To ensure the popup resizes to fit its content, set this property to 'none' . Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width 
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 trackasiagl.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("<h1>Hello World!</h1>")
.setMaxWidth("300px")
.addTo(map);

IControl

src/ui/control/control.ts

Interface for interactive controls added to the map. This is a specification for implementers to model: it is not an exported method or class.

Controls must implement onAdd and onRemove, and must own an element, which is often a div element. To use TrackAsia GL JS's default control styling, add the trackasiagl-ctrl class to your control's node.

Example

// Control implemented as ES6 class
class HelloWorldControl {
onAdd(map) {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'trackasiagl-ctrl';
this._container.textContent = 'Hello, world';
return this._container;
}
 
onRemove() {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
}
}
 
// Control implemented as ES5 prototypical class
function HelloWorldControl() { }
 
HelloWorldControl.prototype.onAdd = function(map) {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'trackasiagl-ctrl';
this._container.textContent = 'Hello, world';
return this._container;
};
 
HelloWorldControl.prototype.onRemove = function () {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
};

Instance Members

src/ui/control/navigation_control.ts

A NavigationControl control contains zoom buttons and a compass.

new NavigationControl(options: NavigationOptions?)
options(NavigationOptions?)
NameDescription
options.showCompass
boolean
default: true
If true the compass button is included.
options.showZoom
boolean
default: true
If true the zoom-in and zoom-out buttons are included.
options.visualizePitch
boolean
default: false
If true the pitch is visualized by rotating X-axis of compass. 
var nav = new trackasiagl.NavigationControl();
map.addControl(nav, 'top-left');

GeolocateControl

src/ui/control/geolocate_control.ts

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.

Extends Evented.
new GeolocateControl(options: GeolocateOptions?)

Parameters

options(GeolocateOptions?)
NameDescription
options.positionOptions
PositionOptions
default: {enableHighAccuracy:false,timeout:6000}
A Geolocation API PositionOptions object.
options.fitBoundsOptions
FitBoundsOptions
default: {maxZoom:15}
A Map#fitBounds options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.
options.trackUserLocation
boolean
default: false
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.
options.showAccuracyCircle
boolean
default: true
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 .
options.showUserLocation
boolean
default: true
By default a dot will be shown on the map at the user's location. Set to false to disable.

Example

map.addControl(new trackasiagl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));

Instance Members

Events

AttributionControl

src/ui/control/attribution_control.ts

An AttributionControl control presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).

new AttributionControl(options: AttributionOptions?)

Parameters

options(AttributionOptions?)(default {})
NameDescription
options.compact
boolean?		If true , the attribution control will always collapse when moving the map. If false , force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps less than 640 pixels wide. Attribution should not be collapsed if it can comfortably fit on the map. compact should only be used to modify default attribution when map size makes it impossible to fit default attribution and when the automatic compact resizing for default settings are not sufficient.
options.customAttribution
(string | Array<string>)?		String or strings to show in addition to any other attributions.

Example

var map = new trackasiagl.Map({attributionControl: false})
.addControl(new trackasiagl.AttributionControl({
compact: true
}));

ScaleControl

src/ui/control/scale_control.ts

A ScaleControl control displays the ratio of a distance on the map to the corresponding distance on the ground.

new ScaleControl(options: ScaleOptions?)

Parameters

options(ScaleOptions?)
NameDescription
options.maxWidth
number
default: '100'
The maximum length of the scale control in pixels.
options.unit
string
default: 'metric'
Unit of the distance ( 'imperial' , 'metric' or 'nautical' ).

Example

var scale = new trackasiagl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
 
scale.setUnit('metric');

Instance Members

FullscreenControl

src/ui/control/fullscreen_control.ts

A FullscreenControl control contains a button for toggling the map in and out of fullscreen mode. When requestFullscreen is not supported, fullscreen is handled via CSS properties. The map's cooperativeGestures option is temporarily disabled while the map is in fullscreen mode, and is restored when the map exist fullscreen mode.

Extends Evented.
new FullscreenControl(options: FullscreenOptions?)

Parameters

options(FullscreenOptions?)(default {})
NameDescription
options.container
HTMLElement?		container is the compatible DOM element which should be made full screen. By default, the map container element will be made full screen.

Example

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

Events

TerrainControl

src/ui/control/terrain_control.ts

A TerrainControl control contains a button for turning the terrain on and off.

new TerrainControl(options: TerrainSpecification?)

Parameters

options(TerrainSpecification?)
NameDescription
options.source
string?		The ID of the raster-dem source to use.
options.exaggeration
number?

Example

var map = new trackasiagl.Map({TerrainControl: false})
.addControl(new trackasiagl.TerrainControl({
source: "terrain"
}));