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

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 getNgwLayerByResourceId getNgwLayerFeature getNgwLayerFeatures getNgwLayerItem getNgwLayerItems getNgwLayers getRuntimeParams getState getZoom hideLayer hideLayerLabel isBaseLayer 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 create get

Constructors

Properties

_initMapState: Record<string, any> = {}

From runtime params

_ngwLayers: NgwLayers = {}
_starterKits: StarterKit[]
connector: default
emitter: StrictEventEmitter<EventEmitter, NgwMapEvents, NgwMapEvents, "addEventListener" | "removeEventListener", "on" | "addListener" | "removeListener" | "once" | "emit"> = ...
getPaintFunctions: {
    [name: string]: GetPaintFunction;
} = WebMapMain.getPaintFunctions

Type declaration

id: number = ...
keys: Keys = WebMapMain.keys
mapAdapter: MapAdapter<Map, any, any>
mapState: Type<StateItem<any>>[] = ...
options: NgwMapOptions<Map, any> = ...
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

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

Type declaration

keys: Keys = ...

Methods

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

    Example

    ngwMap.addControl(new CustomControl(), 'bottom-left');
    ngwMap.addControl('ZOOM', 'top-right')

    Type Parameters

    Parameters

    • controlDef: any
    • 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>

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

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

    Type Parameters

    Parameters

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

  • Push new the GeoJSON features into given vector layer.

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

    Parameters

    Returns void

  • Add any (style, vector, webmap) NGW layer by resource definition.

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

    Parameters

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

  • Remove from vector layer all features. it is possible to remove only some objects if you specify a callback function.

    Example

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

    Parameters

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

          • feature: Feature<Geometry, GeoJsonProperties>

          Returns boolean

    Returns void

  • Create any toggler control button

    Example

    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

    • options: ToggleControlOptions

      Options for control layout customization and assigning a callback function

    Returns Promise<any>

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

    Example

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

    Parameters

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

  • Move map to layer. If the layer is NGW resource, extent will be received from the server

    Example

    const ngwLayer = ngwMap.addNgwLayer({ id: 'ngw_layer_name', resource: 4005 });
    ngwMap.fitLayer(ngwLayer);
    ngwMap.fitLayer('ngw_layer_name');

    Parameters

    Returns Promise<void>

  • Returns the map's geographical centerpoint.

    Returns

    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]

    Returns undefined | LngLatArray

  • Checking the status of any asynchronous operation

    Example

    var webMap = new WebMap(options);
    webMap.getEventStatus('create'); // false
    webMap.emitter.on('create', function () {
    webMap.getEventStatus('create'); // true
    })

    Parameters

    • event: keyof NgwMapEvents

      The name of the event whose status is checked

    Returns boolean

  • helper method to wait for events to load. By default, card creation is tracked

    Example

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

    // use async/await syntax
    async function () {
    await webMap.onLoad();
    doSomething();
    }

    Parameters

    • event: keyof NgwMapEvents = 'ngw-map:create'

      The name of the event whose status is checked

    Returns Promise<default>

  • 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.

    Example

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

    Parameters

    Returns void

  • Sets the GeoJSON data for given vector layer.

    Example

    const layer = webMap.addLayer('GEOJSON').then((layer) => {
    webMap.setLayerData(layer, geojson);
    });

    Parameters

    Returns void | Promise<void>

  • Change added layer visibility on the map by given status or inverse current status.

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

    Parameters

    Returns Promise<void>

  • 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.

    Example

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

    Parameters

    Returns void

Generated using TypeDoc