• JavaScript
  • HTML
                  
                  

                  
                
                  
                  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Use the HERE Indoor Maps API to load and visualize an indoor map">
    <title>Display an Indoor Map</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <style type="text/css">
      .log {
        position: absolute;
        top: 5px;
        left: 5px;
        height: 150px;
        width: 250px;
        overflow: scroll;
        background: white;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
      }
      .log-entry {
        padding: 5px;
        border-bottom: 1px solid #d0d9e9;
      }
      .log-entry:nth-child(odd) {
          background-color: #e1e7f1;
      }
    </style>
  <script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
  <body>
    <h1>Show an Indoor Map</h1>
    <p>
		The Indoor Maps module facilitates access to your private indoor maps including full JSON models as well as routing between indoor and outdoor points. The HERE Indoor Maps API also provides information about indoor spaces, buildings, level geometry and points of interest.
    </p>
	
     <p>
      More information on the use of the HERE Indoor Maps API is available <a href="https://developer.here.com/documentation/maps/dev_guide/topics/venues.html" target="_blank">here</a>.
    </p>
	
    <p>This example shows an Indoor Map of the <b>Zurich Airport</b>.
	
    <div id="map"></div>
    <h3>Code</h3>
    <p>
      The example shows loading the Indoor Map using <code>H.venues.Service</code> and renders the indoor map using an instance of <code>H.venues.Provider</code>.<br> 
	  The example also shows the usage of the indoor map related UI controls to change levels and buildings using <code>H.venues.ui.LevelControl</code> and <code>H.venues.ui.DrawingControl</code> respectively.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>