Search code examples
javascripthere-apiheremaps

How do you configure HERE Maps Javascript to automatically set the required zoom value?

I'm using HERE Maps for Javascript in my Angular application. I have a search functionality implemented, where the user can type in a location, the search API would provide suggestions and once the user selects a location, the map would automatically focus/center the selected location.

All works fine, except the zoom. I want the map to zoom the map dynamically, based on the selection. For example, if the user selects a country like 'India', the zoom value would be much lesser to show the whole of India, or if the user selects an airport, say 'New Delhi Airport', the zoom value would be higher, to focus just the airport.

How do we do this with HERE Maps Javascript? Any ideas?

Solution

  • Take a look at the method setLookAtData that applies on the map viewmodel:

    map.getViewModel().setLookAtData({
  bounds: userSelectedGeometry
});

    When you use setLookAtData with only the bounds property specified, it sets the center of the bounds as a the map center, and automatically calculate the required zoom that fits the bounds of the selected geometry (e.g. India, New Delhi Airport, ...) within the map viewport.

    See the API Reference