• Public
  • Public/Protected
  • All

Deep Map™ SDK Web

Deep Map™ Web Map SDK

SDK to easily display maps of Heidelberg mobil and interact with them.

Main API

The main API is the class DeepMap. Here you will find descriptions of all necessary API methods. Be aware, that methods marked as private can change without announcement and should only be used, if you know, what you do.

  • This is version: 6.0.0
  • Compatible backend versions: [6.0.0]


If you want to know what you can do with this SDK, visit preview.deepmap.io and try out our demo app

If you have ordered a map already and want to preview your map, you can do this on the demo app as well. Just enter the following in the URL after each example: "?projectName=<yourProjectName>".


You will need an account for download and install this SDK. Please contact Sales on heidelberg-mobil.com/en/contact

If you already have an account, pls check Getting started tutorial for further instructions.


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

Download: repo.deepmap.de


Just include a DIV with the ID 'deepMap' and the JS-File 'deepMap.js' in your webpage and bootstrap the map with the Config:

    <div id="deepMap"></div>
    <script type="text/javascript" src="deepMap.js"></script>
    <script type="text/javascript">
        var config = {};
        config.mapServiceUrl = "https://ssp.deepmap.de/geo";
        config.projectName = "mathematikon_basemap";
        config.lang = "de";
        map = DeepMapFactory.bootstrap(config);

        map.setMapViewControllerDidStart(function () {
            console.log("DeepMap initiated!");
        map.setMapViewControllerFailedStart(function (error) {
            console.log("error", error);

Styleable Map Controls

Some Map Controls are pushed onto the map by the SDK out of the box. These Map Controls can be styled by the client per CSS. They are positioned absolute depending on the map viewport. Here is a list of the Map Controls with there CSS classes with default positioning.

  • Zoom-Control:
    .ol-zoom {
      top: .5em;
      left: .5em;
  • OverviewMap-Control:
    .ol-overviewmap {
      left: .5em;
      bottom: .5em;
    .ol-overviewmap:not(.ol-collapsed) button {
      bottom: 0;
      left: 0;
  • Rotation-Control:
    .ol-rotate {
      top: .5em;
      right: .5em;

Be aware of, that you are not allowed to style the Map Controls "Deep Map™"-Logo-Control and Map-Attribution-Control.



Copyright (C) 2020 Heidelberg Mobil International GmbH, All Rights Reserved

This library cannot be copied or distributed without the express permission of Heidelberg Mobil International GmbH.