Deep Map SDK Web

A Map Application

Live example

Let's show you how to use the HDM Web Map SDK within your own web project. You're only a few simple steps away from displaying your own map in your web app!

Setup for plain JavaScript Projects

Step 1: Configure project

  1. Download the latest HDM Web Map SDK here
  2. Copy the File dist/deepMap.js to your projects JavaScript lib folder
  3. Integrate the file to your index.html and create a DIV-Element with the ID "deepMap"

        <meta charset="UTF-8">
        <script type="text/javascript" src="deepMap.js"></script>
        <div id="deepMap"></div>

Step 2: Configure map

  1. Initiate a Deep Map™ with Map-Service, your project name (use "campushd" for demo), and language:

    <script type="text/javascript">
        var config = {};
        config.mapServiceUrl = "";
        config.projectName = "campushd";
        config.lang = "de";
        map = DeepMapFactory.bootstrap(config);
        map.setMapViewControllerDidStart(function (map) {
            console.log("DeepMap initiated!");
        map.setMapViewControllerFailedStart(function (error) {
            console.log("error", error);

That's it. You've just created your first Deep Map™ web application!

Setup for module bundler projects (NPM style)

Step 1: Login to Deep Map NPM repository

npm login --registry "" --userconfig "./.npmrc" --scope "@deepmap"

Step 2: Install npm Package

npm install @deepmap/hdm-web-map-sdk@5.9.5 --save

Step 3: Initialize Map

A div with id "deepMap" should exist on the page (see above)

import {DeepMapFactory} from '@deepmap/hdm-web-map-sdk';

let config = {};
config.mapServiceUrl = "";
config.projectName = "campushd";
config.lang = "de"; = "deepMap";
const deepMap = DeepMapFactory.bootstrap(config);