Deep Map(TM) Web Map SDK Documentation
  • Public
  • Public/Protected
  • All

Deep Map(TM) Web Map SDK Documentation

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.


If you want to know what you can do with this SDK, visit 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 your project name in the project name input field and press enter.


This SDK can be downloaded at


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 = "";
        config.projectName = "campushd";
        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:
    <span class="hljs-selector-class">.ol-zoom</span> {
      <span class="hljs-attribute">top</span>: .<span class="hljs-number">5em</span>;
      <span class="hljs-attribute">left</span>: .<span class="hljs-number">5em</span>;
  • OverviewMap-Control:
    <span class="hljs-selector-class">.ol-overviewmap</span> {
      <span class="hljs-attribute">left</span>: .<span class="hljs-number">5em</span>;
      <span class="hljs-attribute">bottom</span>: .<span class="hljs-number">5em</span>;
    <span class="hljs-selector-class">.ol-overviewmap</span><span class="hljs-selector-pseudo">:not(.ol-collapsed)</span> <span class="hljs-selector-tag">button</span> {
      <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;
      <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
  • Rotation-Control:
    <span class="hljs-selector-class">.ol-rotate</span> {
      <span class="hljs-attribute">top</span>: .<span class="hljs-number">5em</span>;
      <span class="hljs-attribute">right</span>: .<span class="hljs-number">5em</span>;

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


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

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

Generated using TypeDoc