Getting started

Live example

Let’s show you how to use the HDM Web Map SDK v6.0 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. Find information about access on Nexus Repository page

  3. Copy the File deepMap.js from ‘dist’ folder of package to your projects JavaScript lib folder

  4. Integrate the file to your index.html

Code

<html>
<head>
   <meta charset="UTF-8">
   <script type="text/javascript" src="lib/deepMap.js"></script>
</head>
<body>
    ...
</body>
</html>

Step 2: Configure map

  1. Create a DIV-Element with the ID “deepMap”

  2. Initiate a Deep Map™ with the map service URL, your project name (use “campushd_mbstyle” for demo), and the preferred language:

Code

<body>
    <div id="deepMap"></div>

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

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

Setup for NPM/Node-Based projects

Step 1: Install npm Package

npm init
npm login --userconfig ".npmrc" --scope "@deepmap" --registry "https://repo.deepmap.de/repository/npm"
npm i -S @deepmap/hdm-web-map-sdk

Find information about access on Nexus Repository page

Step 2: Integration

Follow instructions above in Step 2: Configure map or adapt it to the framework you use.