Getting started | UNL Map JS Docs

Quickstart

CDN

Module bundler

Include the JavaScript and CSS files in the <head> of your HTML file.

<script src='https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js'></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<link href='https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new UnlSdk.Map({
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
gridControl: true,
indoorMapsControl: true,
tilesSelectorControl: true,
draftShapesControl: true,
container: "map",
center: [0, 0],
zoom: 1,
minZoom: 2,
});
</script>

If you are using 'SANDBOX' credentials pass the 'env' like this:

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new UnlSdk.Map({
...
env: UnlSdk.Environment.SANDBOX,
...
});
</script>

If the env value is not provided it will default to 'PROD'.

Typescript

Typescript definition files are included as part of this package.