Zoom into Bounds

Zoom into bounds limiting maximum level

by fredd man

HTML

<script src="https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js"></script>
<!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">
    
    <title>Zoom into Bounds</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>    
    <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>
  </head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <h1>Zoom into Bounds</h1>
        <p>Zoom into bounds limiting maximum level</p>
    </div>
    <p>This example displays circles on the map, which denote cities' population. By clicking on each circle you can zoom into it, 
      but with different maximum zoom levels, depending on the circle size.</p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>We are using the <code>getBoundingBox</code> to retrieve object's bounds and then set it to the <code>H.map.ViewModel</code>
      to achieve the best zoom level and map centre,  and then perform a custom processing on it to limit maximum zoom level.</p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>

CSS

#map {
    width: 95%;
    height: 450px;
    background: grey;
}

#panel {
    width: 100%;
    height: 400px;
}

JavaScript

/**
 * Shows how to create a custom zooming strategy,
 * using getCameraDataForBounds method for precomputing best zoom level and position.
 *
 * @param {H.Map} map A HERE Map instance within the application
 */
function setUpCustomZooming(map) {
  // create several circles to denote cities' population
  var clevelandCircle = new H.map.Circle(
    new H.geo.Point(41.4822, -81.6697), //center
    11703, // Radius proportional to 390,113 population
    {style: {fillColor: 'rgba(0, 255, 221, 0.66)'}}
  );
  var torontoCircle = new H.map.Circle(
    new H.geo.Point(43.7000, -79.4000), //center
    75090, // Radius proportional to 2.503 million population
    {style: {fillColor: 'rgba(0, 255, 221, 0.66)'}}
  );
  var chicagoCircle = new H.map.Circle(
    new H.geo.Point(41.8369, -87.6847), //center
    81570, // Radius proportional to 2.719 million population
    {style: {fillColor: 'rgba(0, 221, 255, 0.66)'}}
  );
  var newYorkCircle = new H.map.Circle(
    new H.geo.Point(40.7127, -74.0059), //center
    252180, // Radius proportional to 8.406 million population
    {style: {fillColor: 'rgba(221, 0, 255, 0.66)'}}
  );
  // define maximum zoom level for each circle
  clevelandCircle.setData({maxZoom: 7});
  torontoCircle.setData({maxZoom: 5});
  chicagoCircle.setData({maxZoom: 5});
  newYorkCircle.setData({maxZoom: 4});

  // create container for objects
  var container = new H.map.Group({
    objects: [clevelandCircle, torontoCircle, chicagoCircle, newYorkCircle]
  });

  // use the event delegation to handle 'tap' events on objects
  container.addEventListener('tap', function (evt) {
    var target = evt.target;
    // retrieve maximum zoom level
    var maxZoom = target.getData().maxZoom;
    // get the shape's bounding box and adjust the camera position
    map.getViewModel().setLookAtData({
      zoom: maxZoom,
      bounds: target.getBoundingBox()
    });
  });

  // add objects to the map
  map.addObject(container);
}


/**
 * Boilerplate map initialization...