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"

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

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 = "https://ssp.deepmap.de/geo";
        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);
        });
    </script>
    

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 "https://repo.deepmap.de/repository/npm/" --userconfig "./.npmrc" --scope "@deepmap"

Step 2: Install npm Package

npm install @deepmap/hdm-web-map-sdk@5.9.4 --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 = "https://ssp.deepmap.de/geo";
config.projectName = "campushd";
config.lang = "de";
config.target = "deepMap";
const deepMap = DeepMapFactory.bootstrap(config);