Description
This example demonstrates how to set up your code to load a map configuration object and use it to initialize an interactive viewer.
Demo
Code
// Set Onemap server url.
om.setWgpServerUrl("https://demo.webgis.nl");
// Set the asset url (needed for loading translations).
// This url should be the directory where you put the Onemap library files.
om.setAssetBaseUrl("lib/");
// When you have a JWT token, set it here.
// om.setJwtToken('...jwt token...')
// Obtain map configuration object.
// For this, you need the workspace id and the map id.
const workspaceId = "demo-api";
const mapId = "demo-js-api";
om.fetchMapConfig(workspaceId, mapId).then(mapConfig => {
// Initialize the viewer with the loaded map config.
// You have to provide a DOM element that hosts the map.
// Note: this element has to have an explicit width and height!
const mapContainer = document.getElementById("map-container");
om.initViewer(mapConfig, mapContainer).then(api => {
// When the viewer is initialized, the promise resolves with an WgpApi instance
// that can be used to control the viewer.
// For example, make the viewer zoom to a certain location like this:
api.map.setCenter([175145, 442000], {
zoom: 13
});
});
});