NextGIS Frontend
    Preparing search index...

    Class default

    Displaying the NgwMap using the LeafletMapAdapter

    // Base initialization
    // [live demo](http://code.nextgis.com/ngw-leaflet-examples-ngw-webmap)
    import { NgwMap } from '@nextgis/ngw-leaflet';

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

    Hierarchy (View Summary)

    Index
    constructor
    _initMapState _ngwLayers _starterKits connector emitter getPaintFunctions id keys mapAdapter mapState mapStateItems options runtimeParams controls getIcon getPaintFunctions keys
    _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

    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<Map>
    mapState: StateItem<any>[] = []

    From runtime params

    mapStateItems: Type<StateItem<any>>[] = ...
    options: NgwMapOptions = ...
    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 = ...

    Protected_addLayerProviders

    _emitLayerEvent

    Protected_emitStatusEvent

    Protected_onLoadSync

    • 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<
          | ResourceAdapter<
              any,
              any,
              GeoJsonAdapterOptions<
                  Feature<Geometry, GeoJsonProperties>,
                  any,
                  Record<string, any>,
                  Record<string, any>,
              >,
              Feature<Geometry, GeoJsonProperties>,
          >
          | undefined,
      >

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

    • 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 } = {}

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

    • 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 LngLatArray | undefined

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

    • Sets the view of the map geographical center and zoom

      Parameters

      • lngLatOr: LngLatArray
      • Optionalzoom: number

        The zoom level to set (0-24).

      Returns void

      // Mount Everest 27° 59′ 17″ N, 86° 55′ 31″ E
      webMap.setView([86.925278, 27.988056], 12)

    • Sets the view of the map geographical center and zoom

      Parameters

      Returns void

      // Mount Everest 27° 59′ 17″ N, 86° 55′ 31″ E
      webMap.setView([86.925278, 27.988056], 12)

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