Class WebMap<M, L, C, E, O>

The core component for managing map adapters. It contains methods for adding and manipulation with map, layers and controls.

import { WebMap } from '@nextgis/webmap';
import MapAdapter from '@nextgis/ol-map-adapter';

const webMap = new WebMap({
mapAdapter: new MapAdapter(),
target: 'map',
});

Type Parameters

Hierarchy (view full)

Implements

Constructors

Properties

_initMapState: Record<string, any> = {}
_starterKits: StarterKit[]
emitter: StrictEventEmitter<EventEmitter<DefaultEventMap>, WebMapEvents> = ...
getPaintFunctions: {
    [name: string]: GetPaintFunction;
} = WebMapMain.getPaintFunctions
id: number = ...
keys: Keys = WebMapMain.keys
mapAdapter: MapAdapter<M, any, any>
mapState: StateItem<any>[] = []

From runtime params

mapStateItems: Type<StateItem<any>>[] = ...
options: O = ...
runtimeParams: RuntimeParams<Params, string>[] = []
controls: {
    [name: string]: ((webMap: WebMapControls, options?: any) => any);
} = ...
getPaintFunctions: {
    [name: string]: GetPaintFunction;
}
keys: Keys = ...

Methods

  • Create layer from GeoJson data. Set style and behavior for selection.

    Type Parameters

    Parameters

    Returns Promise<VectorLayerAdapter<any, any, any, Feature<Geometry, GeoJsonProperties>, GeoJsonProperties, Record<string, any> | {
        [name: string]: any;
    }>>

    // Add simple layer
    webMap.addGeoJsonLayer({ data: geojson, paint: { color: 'red' } });

    // Add styled by feature property layer with selection behavior
    webMap.addGeoJsonLayer({
    data: geojson,
    paint: function (feature) {
    return { color: feature.properties.color, opacity: 0.5 }
    },
    selectedPaint: function (feature) {
    return { color: feature.properties.selcolor, opacity: 1 }
    },
    selectable: true,
    multiselect: true
    });

    // Add marker layer styled with use [Icons](icons)
    webMap.addGeoJsonLayer({ data: geojson, paint: webMap.getIcon({ color: 'orange' })});

    // work with added layer
    const layer = webMap.addGeoJsonLayer({ data: geojson, id: 'my_layer_name'});
    // access layer by id
    webMap.showLayer('my_layer_name');
    // or access layer by instance
    webMap.showLayer(layer);
  • Push new the GeoJSON features into given vector layer.

    Parameters

    Returns void

    const layer = webMap.addLayer('GEOJSON', {data: geojson_features_5}).then((layer) => {
    console.log(layer.getLayers().length) // > 5;
    webMap.addLayerData(layer, geojson_features_3);
    console.log(layer.getLayers().length) // > 8;
    });
  • Remove from vector layer all features. it is possible to remove only some objects if you specify a callback function.

    Parameters

    • layerDef: LayerDef
    • Optionalcb: ((feature: Feature<Geometry, GeoJsonProperties>) => boolean)
        • (feature): boolean
        • Parameters

          • feature: Feature<Geometry, GeoJsonProperties>

          Returns boolean

    Returns void

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.clearLayerData(layer, (feture) => feture.id === 42);
    webMap.clearLayerData(layer);
    });
  • Checking the status of any asynchronous operation

    Parameters

    • event: keyof E

      The name of the event whose status is checked

    Returns boolean

    var webMap = new WebMap(options);
    webMap.getEventStatus('create'); // false
    webMap.emitter.on('create', function () {
    webMap.getEventStatus('create'); // true
    })
  • helper method to wait for events to load. By default, card creation is tracked

    Parameters

    • event: keyof WebMapEvents = 'create'

      The name of the event whose status is checked

    Returns Promise<WebMap<M, L, C, E, O>>

    var webMap = new WebMap(options);
    webMap.onLoad().then(function () {
    webMap.getEventStatus('create'); // true
    })

    // use async/await syntax
    async function () {
    await webMap.onLoad();
    doSomething();
    }
  • Mark the layer as selected. If the adapter is a vector layer and supports data selection, you can pass a callback function to specify which data will be selected.

    Parameters

    Returns void

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.selectLayer(layer, ({feature}) => feature.id === '42');
    });
  • Change added layer visibility on the map by given status or inverse current status.

    Parameters

    Returns Promise<void>

    webMap.addLayer('TILE', {id: 'my_layer', url: ''}).then((layer) => {
    webMap.toggleLayer(layer, true);
    webMap.toggleLayer('my_layer', false);
    webMap.toggleLayer('my_layer');
    webMap.isLayerVisible(layer); // true
    });
  • Unselect the given layer. If the adapter is a vector layer and supports data selection, you can pass a callback function to specify which data will be unselected.

    Parameters

    Returns void

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.unSelectLayer(layer, ({feature}) => feature.id === '42');
    });