Search code examples
here-api

HERE javascript API: Set center & zoom with animation

I am rendering a few markers on my React JS application using HERE maps. On clicking a marker the map center changes to the clicked hub and map zoom increases. On clicking another marker the map location changes to the other marker. This change of map center should take place with a nice animation/transition but instead, the map center changes instantaneously without animation. I could not find any other way to do this. Here's what my map instantiation looks like:

Imported the below in index.js: 

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-places " type="text/javascript" charset="utf-8"></script>

Instantiated the map in a .jsx file in the following way:

const platform = new window.H.service.Platform({
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
});
const defaultLayers = platform.createDefaultLayers();
this.defaultLayers = defaultLayers;
const { zoom, center } = constants.mapView.default;  // values are imported from constants.js file.
const options = { zoom, center };
this.mapReference = new window.H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, options);
const behavior = new window.H.mapevents.Behavior(new window.H.mapevents.MapEvents(this.mapReference));

On click on any marker, the below function is called with new map center coordinates and zoom value as parameters.

setMapCenter = ({ center, zoom }) => {
        this.mapReference.setCenter(center,true);
        this.mapReference.setZoom(zoom, true);
    };

But this way of setting mapCenter and zoom level does not add smooth transition or animation.

I tried the same method by using "here-js-api" (version:1.0.11) npm module and it works great. But the module takes only app_code and app_id as authentication, but new accounts on HERE maps provide only apiKey and now I have only got an apikey. And when I instantiate HERE map using apikey and here-js-api module the API request that is generated is as follows:

http://2.base.maps.api.here.com/maptile/2.1/maptile/c98407140a/normal.day/16/34939/19838/256/png8?xnlp=CL_JSMv3.0.17.0&app_id=null&app_code=null

This returns unauthenticated, so now I am following the 1st method that I have mentioned here and as directed in HERE maps documentation. But the transitions/animations are not applied. Any ideas what I am doing wrong in either of the 2 methods?

Solution

  • I think the problem is not React itself, but the fact that you try to set the center and immediately the zoom. This way the second animation cancels the first one.

    For the correct way of animating multiple properties you should use H.map.ViewModel#setLookAtData method:

    setMapCenter = ({ center, zoom }) => {
  this.mapReference.getViewModel().setLookAtData(
    {
      position: center,
      zoom: zoom
    },
    true
  );
};

    Regarding npm package:

    There is no official npm package for HERE JavaScript API product.