Link

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