Zoom into Bounds

Zoom into bounds limiting maximum level

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Zoom into Bounds</h1>
<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>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

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;
    // calculate best camera data to fit object's bounds
    var cameraData = map.getCameraDataForBounds(target.getBounds());

    // we set new zoom level taking into acount 'maxZoom' value
    map.setZoom(Math.min(cameraData.zoom, maxZoom), true);
   ...