NextGIS Frontend
    Preparing search index...

    Class WebMap<M, L, C, E, O>

    The core component for managing map adapters. It contains methods for adding and manipulation with map, layers and controls.

    import { WebMap } from '@nextgis/webmap';
    import MapAdapter from '@nextgis/ol-map-adapter';

    const webMap = new WebMap({
      mapAdapter: new MapAdapter(),
      target: 'map',
    });

    Type Parameters

    Hierarchy (View Summary)

    Implements

    Index

    Constructors

    constructor

    Properties

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

    Methods

    _addLayerProviders _emitLayerEvent _emitStatusEvent _onLoadSync addBaseLayer addControl addFeatureLayer addGeoJsonLayer addImageLayer addLayer addLayerData addLayerFromAsyncAdapter addTileJsonLayer addTileLayer allLayers clearLayerData create createButtonControl createControl createToggleControl destroy filterLayer findLayer fitBounds fitLayer getActiveBaseLayer getAttributions getBaseLayers getBaseLayersIds getBounds getBoundsPolygon getCenter getContainer getControl getControlContainer getCoordFromMapClick getCursor getEventStatus getId getLayer getLayerAdapter getLayerAdapters getLayerId getLayers getLegend getRuntimeParams getState getStateAsString getZoom hideLayer hideLayerLabel isBaseLayer isLayerLabelVisible isLayerVisible locate mapStateWithFunc onLoad onMapLoad orderedLayers propertiesFilter removeControl removeLayer removeLayerFilter removeLayers removeOverlays reserveOrder selectLayer setCenter setCursor setLayerData setLayerOpacity setLayerPaint setLayerSelectedPaint setRuntimeParams setView setZoom showLayer showLayerLabel stopGetCoordFromMapClick toggleLayer toggleLayerLabel unSelectLayer unSelectLayers updateLayer updateLayerPaint updateLayerSelectedPaint zoomIn zoomOut get

    Constructors

    Properties

    Protected_initMapState

    _initMapState: Record<string, any> = {}

    Protected Readonly_starterKits

    _starterKits: StarterKit[]
    emitter: StrictEventEmitter<EventEmitter<DefaultEventMap>, WebMapEvents> = ...
    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 } = ...
    getPaintFunctions: { [name: string]: GetPaintFunction }
    keys: Keys = ...

    Methods

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

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

    • Checking the status of any asynchronous operation

      Parameters

      • event: keyof E

        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 WebMapEvents = 'create'

        The name of the event whose status is checked

      Returns Promise<WebMap<M, L, C, E, O>>

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

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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods
    _addLayerProviders_emitLayerEvent_emitStatusEvent_onLoadSyncaddBaseLayeraddControladdFeatureLayeraddGeoJsonLayeraddImageLayeraddLayeraddLayerDataaddLayerFromAsyncAdapteraddTileJsonLayeraddTileLayerallLayersclearLayerDatacreatecreateButtonControlcreateControlcreateToggleControldestroyfilterLayerfindLayerfitBoundsfitLayergetActiveBaseLayergetAttributionsgetBaseLayersgetBaseLayersIdsgetBoundsgetBoundsPolygongetCentergetContainergetControlgetControlContainergetCoordFromMapClickgetCursorgetEventStatusgetIdgetLayergetLayerAdaptergetLayerAdaptersgetLayerIdgetLayersgetLegendgetRuntimeParamsgetStategetStateAsStringgetZoomhideLayerhideLayerLabelisBaseLayerisLayerLabelVisibleisLayerVisiblelocatemapStateWithFunconLoadonMapLoadorderedLayerspropertiesFilterremoveControlremoveLayerremoveLayerFilterremoveLayersremoveOverlaysreserveOrderselectLayersetCentersetCursorsetLayerDatasetLayerOpacitysetLayerPaintsetLayerSelectedPaintsetRuntimeParamssetViewsetZoomshowLayershowLayerLabelstopGetCoordFromMapClicktoggleLayertoggleLayerLabelunSelectLayerunSelectLayersupdateLayerupdateLayerPaintupdateLayerSelectedPaintzoomInzoomOutget