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

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
});

Hierarchy (view full)

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 fitResource 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 getStateAsString getZoom hideLayer hideLayerLabel isBaseLayer isLayerLabelVisible isLayerVisible locate mapStateWithFunc 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 create get

Constructors

Properties

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

From runtime params

mapStateItems: Type<StateItem<any>>[] = ...
options: NgwMapOptions<Map, any> = ...
runtimeParams: RuntimeParams<Params, string>[] = []
controls: {
    [name: string]: ((webMap: WebMapControls, options?: any) => any);
} = ...
getIcon: ((opt??: IconOptions) => IconPaint) = getIcon

Type declaration

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

      Parameters

      Returns IconPaint

      Icon paint object.

getPaintFunctions: {
    [name: string]: GetPaintFunction;
}
keys: Keys = ...

Methods

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

    Type Parameters

    Parameters

    • controlDef: any
    • position: ControlPosition

      position relative to the map angles

    • Optionaloptions: MapControls[K]

      initialization parameters if the control is set as a string value

    Returns Promise<any>

    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, 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;
    });
  • 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>>>

    // 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
    • 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);
    });
  • Create any toggler control button

    Parameters

    • options: ToggleControlOptions

      Options for control layout customization and assigning a callback function

    Returns Promise<any>

    const toggleControl = ngwMap.createToggleControl({
    getStatus: () => webMap.isLayerVisible('any-layer-id'),
    onClick: (status) => ngwMap.toggleLayer('webmap', status),
    html: {
    on: 'ON',
    off: 'OFF'
    },
    title: 'Toggle layer visibility'
    });
    webMap.addControl(toggleControl, 'top-right');

    Toggle button control example

  • Parameters

    • identify: NgwIdentify
    • __namedParameters: {
          multiple?: boolean;
          signal?: AbortSignal;
      } = {}
      • Optionalmultiple?: boolean
      • Optionalsignal?: AbortSignal

    Returns Promise<undefined | Feature<Geometry, GeoJsonProperties>>

  • Hide features from a vector layer using a callback function.

    Parameters

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

    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>

    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.

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

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

    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');
    });
  • 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 this

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

    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>

    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');
    });