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
}
});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. | |
Methods
The following methods are available on MapController instances.
Map State
getSize(): { width: number; height: number; }getCenter(): { lat: number; lon: number; }getBounds(): { north: number; west: number; east: number; south: number; }getZoom(): numbergetBearing(): numbergetPitch(): numbergetFov(): numbertoggleFullscreen(): voidManaging Data
hasWeatherLayer(id: string): booleanaddWeatherLayer(id: string, overrides?: Record<string, any>, beforeId?: string): WebGLLayer | Array<WebGLLayer>removeWeatherLayer(id: string): voidhasSource(id: string): booleanhasLayer(id: string): booleangetSource(id: string): DataSourcegetLayer(id: string): WebGLLayeraddSource(id: string, config: SourceSpecification | DataSource): DataSourceaddLayer(id: string, config: LayerSpecification | WebGLLayer, beforeId?: string): WebGLLayermoveLayer(id: string, beforeId?: string): WebGLLayerremoveSource(id: string): voidremoveLayer(id: string): voidLayers
setPaintProperty(layerId: string, property: string, value: any)Querying Features
query(coord: { lat: number; lon: number; }): Record<string, any>Events
The following events are triggered by MapController instances.
loadunloadresizeclickdblclickmousedownmouseupmouseovermouseoutmousemovezoomzoom:startzoom:endmovemove:startmove:endload:startload:completesource:addlayer:addsource:removelayer:remove