Protected
_initFrom runtime params
Protected
_ngwProtected
Readonly
_starterReadonly
emitterReadonly
keysReadonly
mapReadonly
runtimeStatic
controlsOptional
options: anyStatic
getRetrieves an icon with the provided options.
Optional
opt: IconOptions = {}Options for the icon.
Icon paint object.
Static
getStatic
keysProtected
_addInternal
Optional
options: unknownProtected
_emitOptional
data: anyProtected
_onShortcut method to create base layer
Optional
options: O | LayerAdaptersOptions[K]Organized addition to the map design and controls elements,
calling control.onAdd(this.webMap.mapAdapter)
position relative to the map angles
Optional
options: MapControls[K]initialization parameters if the control is set as a string value
ngwMap.addControl(new CustomControl(), 'bottom-left');
ngwMap.addControl('ZOOM', 'top-right')
Shortcut for WebMapLayers.addGeoJsonLayer to create GeoJson adapter with generic types for working in typescript
Create layer from GeoJson data. Set style and behavior for selection.
Optional
adapter: LayerAdapterDefinition<K>// 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);
Shortcut for WebMapLayers.addLayer to create TileLayer adapter
Registration of map layer.
The name of layer adapter from MapAdapter.layerAdapters. May be custom object or class implemented by MainLayerAdapter.
Specific options for given adapter
Optional
order: numberwebMap.addLayer('TILE', options).then((layer) => webMap.showLayer(layer));
webMap.addLayer(CustomLayerAdapter, options);
Push new the GeoJSON features into given vector layer.
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;
});
Optional
order: numberAdd any (style, vector, webmap) NGW layer by resource definition.
set layer identification parameters and render method.
// 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' } }
});
Shortcut for WebMapLayers.addLayer to create TileLayer adapter
Rest
...args: PromiseGroup[]use cancelPromises instead
Remove from vector layer all features. it is possible to remove only some objects if you specify a callback function.
Optional
cb: ((feature) => boolean)const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
webMap.clearLayerData(layer, (feture) => feture.id === 42);
webMap.clearLayerData(layer);
});
Manual way to create a map (If MapOptions.create is false
).
const webMap = new WebMap(options);
webMap.create().then(() => doSomething());
Creating a universal map layout control element. Can be used with any map adapter.
Optional
options: CreateControlOptionsconst control = webMap.createControl({
onAdd() {
return document.createElement('div');
}
});
Create any toggler control button
Options for control layout customization and assigning a callback function
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');
Optional
requestOptions: NgwFeatureRequestOptions<FeatureProperties>Hide features from a vector layer using a callback function.
const layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
webMap.filterLayer(layer, ({feature}) => feature.id === '42');
});
Sets a map view that contains the given geographical bounds.
Array of coordinates, measured in degrees, in [west, south, east, north] order.
Optional
options: FitOptions// Whole world
webMap.fitBounds([0, -90, 180, 90]);
Move map to layer. If the layer is NGW resource, extent will be received from the server
Optional
options: FitOptionsconst ngwLayer = ngwMap.addNgwLayer({ id: 'ngw_layer_name', resource: 4005 });
ngwMap.fitLayer(ngwLayer);
ngwMap.fitLayer('ngw_layer_name');
Returns the map's geographical centerpoint.
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]
Get instance of registered control
Any registered control string name
Optional
options: MapControls[K]Custom control options
Checking the status of any asynchronous operation
The name of the event whose status is checked
var webMap = new WebMap(options);
webMap.getEventStatus('create'); // false
webMap.emitter.on('create', function () {
webMap.getEventStatus('create'); // true
})
use fetchIdentifyGeoJson instead
Helper method to return added layer object by any definition type.
Helper method to return added layer identificator by any definition type.
Optional
options: GetLegendOptionsuse fetchNgwLayerFeature instead
use fetchNgwLayerFeatures instead
use fetchNgwLayerItem instead
use fetchNgwLayerItems instead
Hide added layer on the map by it definition.
Check if given layer is baselayer
Check if the given layer on the map
Optional
events: LocationEventshelper method to wait for events to load. By default, card creation is tracked
The name of the event whose status is checked
var webMap = new WebMap(options);
webMap.onLoad().then(function () {
webMap.getEventStatus('create'); // true
})
// use async/await syntax
async function () {
await webMap.onLoad();
doSomething();
}
Optional
cb: ((mapAdapter) => void)Optional
options: FilterOptions<{ Instance of WEB-GIS framework control. What is returned by the create method
Remove specific layer from map and memory by its definition.
Remove all layer from map and memory.
Optional
allowCb: ((layer, adapter) => boolean)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.
Optional
findFeatureFun: DataLayerFilterconst layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
webMap.selectLayer(layer, ({feature}) => feature.id === '42');
});
Set the center of the current view.
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.setCenter([86.925278, 27.988056]);
Set the cursor icon to be displayed when hover icon on the map container.
Available cursor name from https://developer.mozilla.org/ru/docs/Web/CSS/cursor
Sets the GeoJSON data for given vector layer.
const layer = webMap.addLayer('GEOJSON').then((layer) => {
webMap.setLayerData(layer, geojson);
});
Set transparency for a given layer by number from 0 to 1
Sets the view of the map geographical center and zoom
Optional
zoom: numberThe zoom level to set (0-24).
// Mount Everest 27° 59′ 17″ N, 86° 55′ 31″ E
webMap.setView([86.925278, 27.988056], 12)
Show added layer on the map by it definition.
Change added layer visibility on the map by given status or inverse current status.
Optional
status: booleanwebMap.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
});
Optional
status: booleanUnselect 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.
Optional
findFeatureFun: DataLayerFilterconst layer = webMap.addLayer('GEOJSON', {data: geojson}).then((layer) => {
webMap.unSelectLayer(layer, ({feature}) => feature.id === '42');
});
use fitLayer instead
Static
getGenerated using TypeDoc
Base class containing the logic of interaction WebMap with NextGIS services.
Example