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¶

Download the latest HDM Web Map SDK here
Copy the File deepMap.js from ‘dist’ folder of package to your projects JavaScript lib folder
Integrate the file to your index.html

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

Step 2: Configure map¶

Create a DIV-Element with the ID “deepMap”
Initiate a Deep Map™ with the map service URL, your project name (use “campushd_mbstyle” for demo), and the preferred language:

<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

Step 2: Integration¶

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