Map Controller
A map controller acts as an adapter to a third-party mapping library and provides a consistent interface between the functionality of MapsGL and the underlying implementation of a third-party mapping library. All MapsGL-related data, such as data sources, weather layers, custom layers, and animation timeline information, is managed by the map controller.
Supported Mapping Libraries
MapsGL current supports integration with the following third-party mapping libraries:
Key | Library + Version | Controller |
---|---|---|
mapbox | Mapbox GL (opens in a new tab), version 2.0.0+ | MapboxMapController |
maplibre | MapLibre (opens in a new tab), version 2.0.0+ | MaplibreMapController |
Google Maps (opens in a new tab), version 3.50.9+ | GoogleMapController | |
leaflet | Leaflet (opens in a new tab), version 1.6.0+ | LeafletMapController |
Read more about setting up and using a map controller with third-party mapping libraries.
Example
The following example creates a Mapbox Map
instance and initializes a MapsGL MapController
with the map:
// Create the map instance using third-party mapping library
mapboxgl.accessToken = 'MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: document.getElementById('map'),
style: 'mapbox://styles/mapbox/light-v11',
center: [-74.5, 40],
zoom: 3
});
map.addControl(new mapboxgl.NavigationControl(), 'bottom-left');
// Create an Account instance with our AerisWeather account access keys
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
// Create a MapController instance and provide the above `map` and `account`
// instances and desired configuration options
const controller = new aerisweather.mapsgl.MapboxMapController(map, {
account: account,
animation: {
repeat: true
},
units: {
temperature: 'F' | 'C',
speed: 'mph' | 'km/h' | 'm/s' | 'kts',
pressure: 'mb' | 'inHg' | 'hPa' | 'Pa',
distance: 'mi' | 'km' | 'ft' | 'm',
height: 'ft' | 'm',
precipitation: 'in' | 'mm' | 'cm' | 'm' | 'ft',
snowfall: 'in' | 'mm' | 'cm' | 'm' | 'ft',
direction: '°',
time: 'hr' | 'min' | 'sec' | 'ms',
rate: 'in/hr' | 'mm/hr' | 'mm/sec' | 'dBZ',
concentration: 'ppm' | 'ug/m3',
ratio: '%'
}
});
Configuration
The following configuration options are supported when instantiating MapController
instances.
Option | Description | Default |
---|---|---|
account | Type: Account (required)An Account instance configured with your AerisWeather client id and secret keys for the application. |
|
animation | Type: Record<string, any> (optional)An object containing configuration options for the map controller's timeline. Review the timeline reference documentation for more information about the available options. |
|
units | Type: Record<string, string> (optional)An object containing configuration options for the units used for various measurements and displayed data values on the map. This also controls the units displayed in legends for any active layers in the legend control.See the list of possible unit values below. |
|
Map units
The following units are supported for the map controller's units
configuration:
Type | Unit Options | Description | Default |
---|---|---|---|
temperature | F , C | required | F |
speed | mph , km/h , m/s , kts | required | mph |
pressure | mb , inHg , hPa , Pa | required | inHg |
distance | mi , km , ft , m | required | mi |
height | ft , m | required | ft |
precipitation | in , mm , cm , m , ft | required | in |
snowfall | in , mm , cm , m , ft | required | in |
direction | ° | required | ° |
time | hr , min , sec , ms | required | hr |
rate | in/hr , mm/hr , mm/sec , dBZ | required | in/hr |
concentration | ppm , ug/m^3 | required | ug/m^3 |
ratio | % | required | % |
Properties
The following properties are available on MapController
instances and subclasses:
Option | Description | Default |
---|---|---|
account | Type: Account ()The Xweather account credentials used for weather service data. |
|
map | Type: (varies) ()The underlying map instance whose type will vary depending on the mapping library being used. |
|
container | Type: `` ()The DOM element that contains the map. |
|
context | Type: Context ()The context used for managing the map's WebGL context. |
|
timeline | Type: Timeline ()The timeline used for managing animation and time series data. |
|
sources | Type: Array<DataSource> ()Returns an array of active data sources that have been added to the map. |
|
sourceIds | Type: Array<string> ()Returns an array of identifiers for the active data sources that have been added to the map. |
|
layers | Type: Array<WebGLLayer> ()Returns an array of active layers that have been added to the map. |
|
layerIds | Type: Array<string> ()Returns an array of identifiers for the active layers that have been added to the map. |
|
controls | Type: { legend: LegendControl; dataInspector: DataInspectorControl; } ()Returns the set of controls that have been added to the map. |
|
weatherProvider | Type: WeatherLayerProvider ()Weather service provider for managing weather layer configurations and data. |
|
weatherLayerIds | Type: Array<string> ()Returns an array of weather layer identifiers that have been added to the map. |
|
isReady | Type: boolean ()Returns whether the map controller has been initialized and is ready for use. If false , then the map controller is still in the process of loading and/or initializing and you will need to add an event listener for the load event before performing actions with the map or controller. |
|
libraryInfo | Type: Record<string, any> ()Returns metadata and version information about the mapping library being used. |
|
Methods
The following methods are available on MapController
instances.
Map State
getSize(): { width: number; height: number; }
setSize(size: { width: number; height: number; })
getCenter(): { lat: number; lon: number; }
setCenter({ lat: number; lon: number; })
getBounds(): { north: number; west: number; east: number; south: number; }
getZoom(): number
setZoom(zoom: number)
getBearing(): number
getPitch(): number
getFov(): number
getUnits(): MapUnits
setUnits(units: Partial<MapUnits>)
toggleFullscreen(): void
Managing Data
hasWeatherLayer(id: string): boolean
getWeatherLayer(id: string): WebGLLayer | Array<WebGLLayer> | undefined
addWeatherLayer(id: string, overrides?: Record<string, any>, beforeId?: string): WebGLLayer | Array<WebGLLayer> | undefined
removeWeatherLayer(id: string): void
hasSource(id: string): boolean
hasLayer(id: string): boolean
getSource(id: string): DataSource
getLayer(id: string): WebGLLayer
addSource(id: string, config: SourceSpecification | DataSource): DataSource
addLayer(id: string, config: LayerSpecification | WebGLLayer, beforeId?: string): WebGLLayer
moveLayer(id: string, beforeId?: string): WebGLLayer
removeSource(id: string): void
removeLayer(id: string): void
Layers
setPaintProperty(layerId: string, property: string, value: any)
Querying Features
query(coord: { lat: number; lon: number; }): Record<string, any>
Other
dispose(): void
Events
The following events are triggered by MapController
instances.
load
unload
resize
click
dblclick
mousedown
mouseup
mouseover
mouseout
mousemove
zoom
zoom:start
zoom:end
move
move:start
move:end
load:start
load:complete
source:add
layer:add
source:remove
layer:remove