How to use @nextgis/webmap - 4 common examples
To help you get started, we’ve selected a few @nextgis/webmap examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
nextgis / nextgisweb_frontend / packages / ol-map-adapter / examples / main.js View on Github 
import { WebMap } from '@nextgis/webmap';
import { OlMapAdapter } from '@nextgis/ol-map-adapter';
import { NgwKit } from '@nextgis/ngw-kit';
import { QmsKit } from '@nextgis/qms-kit';
const ngwKit = new NgwKit({
'baseUrl': "http://geonote.nextgis.com",
'resourceId': 1,
// 'pixelRadius': 10,
// auth: {
// login: 'administrator',
// password: '',
// }
})
const webMap = new WebMap({
mapAdapter: new OlMapAdapter(),
starterKits: [new QmsKit(), ngwKit],
});
webMap.create({
target: 'map'
}).then(() => {
webMap.addControl('ZOOM', 'top-left');
webMap.addBaseLayer('sputnik', 'QMS', {
qmsid: 487
}).then((layer) => {
webMap.showLayer(layer.name);
});
});
// webMap.addBaseLayer('osm', 'OSM').then((layer) => {* 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(new MapAdapter(), {
* target: 'map',
* qmsId: 487,
* baseUrl: 'https://demo.nextgis.com',
* webmapId: 3985
* });
* ```
*/
export class NgwMap extends WebMap {
static utils = {
...WebMap.utils,
...NgwKit.utils,
fixUrlStr,
deepmerge
};
static decorators = { onMapLoad, ...WebMap.decorators };
static getIcon = getIcon;
readonly emitter: StrictEventEmitter = new EventEmitter();
options: NgwMapOptions & O = {} as NgwMapOptions & O;
connector!: NgwConnector;
protected _ngwLayers: NgwLayers = {};
private __selectFromNgwRaster?: (ev: MapClickEvent) => void;
private __selectFromNgwVector?: (ev: OnLayerClickOptions) => void;
this.filter(e => {
if (e.feature && e.feature.properties) {
return WebMap.utils.propertiesFilter(e.feature.properties, filters);
}
return true;
});
} else if (this.setData) {* const ngwMap = new NgwMap(new MapAdapter(), {
* target: 'map',
* qmsId: 487,
* baseUrl: 'https://demo.nextgis.com',
* webmapId: 3985
* });
* ```
*/
export class NgwMap extends WebMap {
static utils = {
...WebMap.utils,
...NgwKit.utils,
fixUrlStr,
deepmerge
};
static decorators = { onMapLoad, ...WebMap.decorators };
static getIcon = getIcon;
readonly emitter: StrictEventEmitter = new EventEmitter();
options: NgwMapOptions & O = {} as NgwMapOptions & O;
connector!: NgwConnector;
protected _ngwLayers: NgwLayers = {};
private __selectFromNgwRaster?: (ev: MapClickEvent) => void;
private __selectFromNgwVector?: (ev: OnLayerClickOptions) => void;
/**
* @param mapAdapter #noapi
* @param options
*/
constructor(mapAdapter: MapAdapter, options: NgwMapOptions & O) {
