Interface MapContainerProps<M, L, C, O>

User credentials for authorization in NGW. Provides the ability to display protected resources

Url of NGW server like this https://demo.nextgis.com

Initial extent of the map, array of degrees in [west, south, east, north] order.

Remarks

Overrides the center and zoom parameters. LngLatBoundsArray

Example

// whole world
bounds: [0, -90, 180, 90]

Initial position of the map, array of two degrees [longitude, latitude]. LngLatArray

List of controls that will be initialized when creating a map instance. It can be defined as a string, then points to the corresponding entry in the controlAdapters.

Default Value

['ZOOM', 'ATTRIBUTION']

Example

{
  controls: [
    'ZOOM',
    new CustomControl()
  ]
}

Set options for those controls that are specified by name.

Example

{
  controls: ['ZOOM', 'button1', 'button2'],
  controlsOptions: {
    'ZOOM': { position: 'top-right' },
    'button1': { control: 'BUTTON', position: 'top-left' },
    'button2': { control: 'BUTTON' },
  }
}

Аutomatic creation of a map from the constructor

Default Value

false

Example

const webMap = new WebMap(options);
// create: false
webMap.create().then(() => doSomething());
// create: true
webMap.emitter.on('created', () => doSomething());

options to specify the initial position of the map

Get information from NGW webmap layers by click. TODO: find usage

Default Value

false

A pre-initialized instance of the map

The main initialization property of WebMap. Determines the way of interaction with the selected GIS framework. Available: Leaflet; Openlayers; MapboxGL

special settings for the selected map adapter

The maximum zoom level of the map (0-24).

The minimum zoom level of the map (0-24).

The callback function is calling before adding each layer

Shortcut to add OSM baselayer.

Id number of resource from QMS. If specified through an array, the first element will be the resource identifier, and the second will be the name for identification in the application.

Example

  const ngwMap = new NgwMap({qmsId: [465, 'qms-basemap']});
  ngwMap.hideLayer('qms-basemap');

List of NGW resources to be displayed on the map.

The resources list may include:

• number - resource id; // also for resource
• string - resource keyname; // also for resource
• object - configuration of the layer to be added with the one required parameter resource (the comment "also for resource" above refers to it)

Example

NgwMap.create({
  baseUrl: "https://demo.nextgis.com",
  target: "map",
  resources: [
    // Basemap resource
    1665,
    // Digital Elevation Model (DEM)-style
    4117,
    // Hillshade-style
    { resource: 4115, adapter: "TILE", opacity: 0.3 },
    // Elevation contours-style
    'contours-style',
    // Vector from Order boundary-style
    {
      resource: 4111,
      fit: true,
      adapter: "GEOJSON",
      adapterOptions: { paint: { color: "red", fill: false, weight: 4 } },
    },
  ],
});

A way to save the state of a map to external services

Example

import RuntimeParams from '@nextgis/url-runtime-params';
// this will allow to write in the url params of map center and zoomlevel when moving
new WebMap({
  mapAdapter: new MapAdapter(),
  runtimeParams: [new RuntimeParams]
})

One way to extend WebMap functionality with the help of kits.

The HTML element in which NgwMap will render the map, or the element's string id. The specified element must have no children.

Id number of webmap resource from NGW cloud. If specified through an array, the first element will be the webmapId from NGW, and the second will be the name for identification in the application.

Example

  const ngwMap = new NgwMap({webmapId: [3985, 'my-webmap']});
  ngwMap.hideLayer('my-webmap');

The initial zoom level of the map (0-24).