• JavaScript
  • HTML
                  
                  
/**
 * @param  {H.Map} firstMap  A HERE Map instance within the application
 * @param  {H.Map} secondMap  A HERE Map instance within the application
 */

function displayBounds(firstMap, secondMap) {
  // get view model objects for both maps, view model contains all data and
  // utility functions that're related to map's geo state
  var viewModel1 = firstMap.getViewModel(),
      viewModel2 = secondMap.getViewModel(),
      polygon,
      marker;

  // create a polygon that will represent the visible area of the main map
  polygon = new H.map.Polygon(viewModel1.getLookAtData().bounds, {
    volatility: true
  });
  // create a marker that will represent the center of the visible area
  marker = new H.map.Marker(viewModel1.getLookAtData().position, {
    volatility: true
  });
  // add both objects to the map
  staticMap.addObject(polygon);
  staticMap.addObject(marker)

  // set up view change listener on the interactive map
  firstMap.addEventListener('mapviewchange', function() {
    // on every view change take a "snapshot" of a current geo data for
    // interactive map and set the zoom and position on the non-interactive map
    var data = viewModel1.getLookAtData();
    viewModel2.setLookAtData({
      position: data.position,
      zoom: data.zoom - 2
    });

    // update the polygon that represents the visisble area of the interactive map
    polygon.setGeometry(data.bounds);
    // update the marker that represent the center of the interactive map
    marker.setGeometry(data.position);
  });
}

/**
 * Boilerplate map initialization code starts below:
 */

// initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});
// create two sets of the default layers for each map instance
var defaultLayers = platform.createDefaultLayers();
var defaultLayersSync = platform.createDefaultLayers();

// set up containers for the map

var mapContainer = document.createElement('div');
var staticMapContainer = document.createElement('div');

mapContainer.style.height = '300px';

staticMapContainer.style.position = 'absolute';
staticMapContainer.style.width = '600px';
staticMapContainer.style.height = '300px';

document.getElementById('map').appendChild(mapContainer);
document.getElementById('panel').appendChild(staticMapContainer);

// initialize a map, this map is interactive
var map = new H.Map(mapContainer,
  defaultLayers.vector.normal.map,{
  center: {lat: 52.5206970, lng: 13.40927320},
  zoom: 16,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// adjust tilt and rotation of the map
map.getViewModel().setLookAtData({
  tilt: 45,
  heading: 60
});

// initialize a map that will be synchronised
var staticMap = new H.Map(staticMapContainer,
  defaultLayersSync.vector.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1
});

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
// create beahvior only for the first map
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Now use the map as required...
displayBounds(map, staticMap);
                  
                
                  
                  
<!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="Synchronise a static map with an interactive map">
    <title>View bounds of the tilted 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-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-mapevents.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
  <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>
  <body>

    <div class="page-header">
        <h1>View bounds of the tilted map</h1>
        <p>Synchronise a static map with an interactive map</p>
    </div>
    <p>This example shows two maps. The upper map allows for panning, zooming, tilting and rotation (to tilt and rotate hold alt key plus left mouse button). 
      The lower map is oriented  top-down north-up, it observes the upper map's <code>lookAt</code> position and visualises the visible area of the interactive map.</p>
    <hr/>
    <h3>Interactive Map</h3>
    <div id="map"></div>
    <hr/>
    <h3>Visible area visualisation</h3>
    <div id="panel"></div>
    <h3>Code</h3>
    <p>
        The following example creates two objects <code>H.map.Polygon</code> and <code>H.map.Marker</code> that represent the current center and 
        the current view bounds of the interactive map. These objects are updated on every <code>mapviewchange</code> event and are marked as volatile
        at the construction time, that enables the smooth animation of the objects.
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>