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 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 NPM/Node-Based projects

Step 1: Install npm Package

npm install https://npm.deepmap.de/release/e5b7ecc9-hdm-web-map-sdk-5.9.2.tgz --save

 Step 2: Install and load required polyfills for older browsers

npm install core-js --save
npm install whatwg-fetch --save
require('core-js/es6/symbol');
require('core-js/es6/object');
require('core-js/es6/function');
require('core-js/es6/parse-int');
require('core-js/es6/parse-float');
require('core-js/es6/number');
require('core-js/es6/math');
require('core-js/es6/string');
require('core-js/es6/date');
require('core-js/es6/array');
require('core-js/es6/regexp');
require('core-js/es6/map');
require('core-js/es6/set');

require('core-js/es6/reflect');
require('core-js/es7/reflect');

require('whatwg-fetch');

Step 3: Initialize Map

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

var DeepMapFactory = require("hdm-web-map-sdk").DeepMapFactory;

var config = {};
config.mapServiceUrl = "https://ssp.deepmap.de/geo";
config.projectName = "campushd";
config.lang = "de";
config.target = "deepMap";
var deepMap = DeepMapFactory.bootstrap(config);