Class NgwMap<M, L, C, O>

Base class containing the logic of interaction WebMap with NextGIS services.

Example

import { NgwMap } from '@nextgis/ngw-map';
import MapAdapter from '@nextgis/leaflet-map-adapter';
// styles are not included in the leaflet-map-adapter
import 'leaflet/dist/leaflet.css';

const ngwMap = new NgwMap({
mapAdapter: new MapAdapter(),
target: 'map',
qmsId: 448,
baseUrl: 'https://demo.nextgis.com',
webmapId: 3985
});

Type Parameters

Hierarchy

Constructors

Properties

Methods

_addLayerProviders _emitLayerEvent _emitStatusEvent _onLoadSync addBaseLayer addControl addFeatureLayer addGeoJsonLayer addImageLayer addLayer addLayerData addLayerFromAsyncAdapter addNgwLayer addTileJsonLayer addTileLayer allLayers cancelPromise cancelPromises clearLayerData create createButtonControl createControl createToggleControl destroy disableSelection enableSelection fetchIdentifyGeoJson fetchIdentifyItem fetchNgwLayerFeature fetchNgwLayerFeatures fetchNgwLayerItem fetchNgwLayerItems filterLayer findLayer fit fitBounds fitLayer getActiveBaseLayer getAttributions getBaseLayers getBaseLayersIds getBounds getBoundsPolygon getCenter getContainer getControl getControlContainer getCoordFromMapClick getCursor getEventStatus getId getIdentifyGeoJson getLayer getLayerAdapter getLayerAdapters getLayerId getLayers getLegend getNgwLayerByResourceId getNgwLayerFeature getNgwLayerFeatures getNgwLayerItem getNgwLayerItems getNgwLayers getRuntimeParams getState getZoom hideLayer hideLayerLabel isBaseLayer isLayerLabelVisible isLayerVisible locate onLoad onMapLoad orderedLayers propertiesFilter removeControl removeLayer removeLayerFilter removeLayers removeOverlays reserveOrder selectFromNgwRaster selectLayer setCenter setCursor setLayerData setLayerOpacity setLayerPaint setLayerSelectedPaint setRuntimeParams setView setZoom showLayer showLayerLabel stopGetCoordFromMapClick toggleLayer toggleLayerLabel unSelectLayer unSelectLayers updateLayer updateLayerPaint updateLayerSelectedPaint zoomIn zoomOut zoomToLayer get

Constructors

Properties

_initMapState: Record<string, any> = {}

From runtime params

_ngwLayers: NgwLayers = {}
_starterKits: StarterKit[]
connector: default
emitter: StrictEventEmitter<EventEmitter, NgwMapEvents> = ...
getPaintFunctions: {
    [name: string]: GetPaintFunction;
} = WebMapMain.getPaintFunctions

Type declaration

id: number = ...
keys: Keys = WebMapMain.keys
mapAdapter: MapAdapter<M, any, any>
mapState: Type<StateItem<any>>[] = ...
options: O = ...
runtimeParams: RuntimeParams[] = []
controls: {
    [name: string]: ((webMap, options?) => any);
} = ...

Type declaration

  • [name: string]: ((webMap, options?) => any)
      • (webMap, options?): any
      • Parameters

        Returns any

getIcon: ((opt?) => IconPaint) = getIcon

Type declaration

    • (opt?): IconPaint
    • Retrieves an icon with the provided options.

      Parameters

      Returns IconPaint

      Icon paint object.

      Function

getPaintFunctions: {
    [name: string]: GetPaintFunction;
}

Type declaration

keys: Keys = ...

Methods

  • Organized addition to the map design and controls elements, calling control.onAdd(this.webMap.mapAdapter)

    Type Parameters

    Parameters

    • controlDef: C | K
    • position: ControlPosition

      position relative to the map angles

    • Optional options: MapControls[K]

      initialization parameters if the control is set as a string value

    Returns Promise<any>

    Example

    ngwMap.addControl(new CustomControl(), 'bottom-left');
    ngwMap.addControl('ZOOM', 'top-right')
  • Create layer from GeoJson data. Set style and behavior for selection.

    Type Parameters

    Parameters

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

    Example

    // 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

    Example

    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;
    });
  • Add any (style, vector, webmap) NGW layer by resource definition.

    Parameters

    Returns Promise<undefined | ResourceAdapter<any, any, GeoJsonAdapterOptions<Feature<Geometry, GeoJsonProperties>, any, Record<string, any>, Record<string, any>>, Feature<Geometry, GeoJsonProperties>>>

    Example

    // Add raster layer resourceId is the style of 4004 layer
    ngwMap.addNgwLayer({ resource: 4005 });
    // Add vector data from layer GEOJSON source
    ngwMap.addNgwLayer({
    resource: 4038,
    adapter: 'GEOJSON',
    adapterOptions: { paint: { color: 'red' } }
    });
  • Remove from vector layer all features. it is possible to remove only some objects if you specify a callback function.

    Parameters

    • layerDef: LayerDef
    • Optional cb: ((feature) => boolean)
        • (feature): boolean
        • Parameters

          • feature: Feature<Geometry, GeoJsonProperties>

          Returns boolean

    Returns void

    Example

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.clearLayerData(layer, (feture) => feture.id === 42);
    webMap.clearLayerData(layer);
    });
  • Hide features from a vector layer using a callback function.

    Parameters

    Returns LayerDefinition<Feature<Geometry, GeoJsonProperties>, L>[]

    Example

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.filterLayer(layer, ({feature}) => feature.id === '42');
    });
  • Move map to layer. If the layer is NGW resource, extent will be received from the server

    Parameters

    Returns Promise<void>

    Example

    const ngwLayer = ngwMap.addNgwLayer({ id: 'ngw_layer_name', resource: 4005 });
    ngwMap.fitLayer(ngwLayer);
    ngwMap.fitLayer('ngw_layer_name');
  • Returns the map's geographical centerpoint.

    Returns undefined | LngLatArray

    lngLat Array of two numbers representing longitude and latitude of the center of the map view.

    Example

    // Mount Everest 27° 59′ 17″ N, 86° 55′ 31″ E
    webMap.getCenter(); // [86.925278, 27.988056]
  • Checking the status of any asynchronous operation

    Parameters

    • event: keyof NgwMapEvents

      The name of the event whose status is checked

    Returns boolean

    Example

    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 NgwMapEvents = 'ngw-map:create'

      The name of the event whose status is checked

    Returns Promise<NgwMap<M, L, C, O>>

    Example

    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

    Example

    const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
    webMap.selectLayer(layer, ({feature}) => feature.id === '42');
    });
  • Set the center of the current view.

    Parameters

    • lngLat: LngLatArray

      Array of two numbers representing longitude and latitude of the center of the map view.

    Returns NgwMap<M, L, C, O>

    Example

    // Mount Everest 27° 59′ 17″ N, 86° 55′ 31″ E
    webMap.setCenter([86.925278, 27.988056]);
  • Sets the GeoJSON data for given vector layer.

    Parameters

    Returns void | Promise<void>

    Example

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

    Parameters

    Returns Promise<void>

    Example

    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

    Example

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

Generated using TypeDoc