NextGIS Frontend
    Preparing search index...

    Class NgwMap<M, L, C, O>

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

    Type Parameters

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    _initMapState _ngwLayers _starterKits connector emitter getPaintFunctions id keys mapAdapter mapState mapStateItems options runtimeParams controls getIcon getPaintFunctions keys

    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 get

    Constructors

    Properties

    Protected_initMapState

    _initMapState: Record<string, any> = {}

    Protected_ngwLayers

    _ngwLayers: NgwLayers = {}

    Protected Readonly_starterKits

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

    From runtime params

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

    Type declaration

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

    Methods

    Protected_addLayerProviders

    _emitLayerEvent

    Protected_emitStatusEvent

    Protected_onLoadSync

    • 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

      • 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

      • options: NgwLayerOptions

        set layer identification parameters and render method.

      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) => boolean

      Returns void

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

    • Parameters

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

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

    • 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<NgwMap<M, L, C, 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');
      });

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

    • Parameters

      • layerDef:
            | string
            | ResourceAdapter<
                any,
                any,
                GeoJsonAdapterOptions<
                    Feature<Geometry, GeoJsonProperties>,
                    any,
                    Record<string, any>,
                    Record<string, any>,
                >,
                Feature<Geometry, GeoJsonProperties>,
            >

      Returns Promise<void>

      use fitLayer instead

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods
    _addLayerProviders_emitLayerEvent_emitStatusEvent_onLoadSyncaddBaseLayeraddControladdFeatureLayeraddGeoJsonLayeraddImageLayeraddLayeraddLayerDataaddLayerFromAsyncAdapteraddNgwLayeraddTileJsonLayeraddTileLayerallLayerscancelPromisecancelPromisesclearLayerDatacreatecreateButtonControlcreateControlcreateToggleControldestroydisableSelectionenableSelectionfetchIdentifyGeoJsonfetchIdentifyItemfetchNgwLayerFeaturefetchNgwLayerFeaturesfetchNgwLayerItemfetchNgwLayerItemsfilterLayerfindLayerfitfitBoundsfitLayerfitResourcegetActiveBaseLayergetAttributionsgetBaseLayersgetBaseLayersIdsgetBoundsgetBoundsPolygongetCentergetContainergetControlgetControlContainergetCoordFromMapClickgetCursorgetEventStatusgetIdgetIdentifyGeoJsongetLayergetLayerAdaptergetLayerAdaptersgetLayerIdgetLayersgetLegendgetNgwLayerByResourceIdgetNgwLayerFeaturegetNgwLayerFeaturesgetNgwLayerItemgetNgwLayerItemsgetNgwLayersgetRuntimeParamsgetStategetStateAsStringgetZoomhideLayerhideLayerLabelisBaseLayerisLayerLabelVisibleisLayerVisiblelocatemapStateWithFunconLoadonMapLoadorderedLayerspropertiesFilterremoveControlremoveLayerremoveLayerFilterremoveLayersremoveOverlaysreserveOrderselectFromNgwRasterselectLayersetCentersetCursorsetLayerDatasetLayerOpacitysetLayerPaintsetLayerSelectedPaintsetRuntimeParamssetViewsetZoomshowLayershowLayerLabelstopGetCoordFromMapClicktoggleLayertoggleLayerLabelunSelectLayerunSelectLayersupdateLayerupdateLayerPaintupdateLayerSelectedPaintzoomInzoomOutzoomToLayerget