Search code examples
javascriptsingle-page-applicationhere-apielm

Can I change pages without losing the map

I have a SPA and there are multiple pages, one of which is the MapPage. By opening the MapPage I am doing the normal map instantiating:

map = new H.Map(document.getElementById('map-container'), defaultLayers.vector.normal.map, {..});

And here is the problem. By going to some other page I am loosing the 'map-container' html element and the domMarkers.

Is there a way of reusing the 'map-container' html or I have to instantiate new map object every time? Or is there an option to redraw the map canvas?

Solution

  • Yes you can. In fact there are not many ways to achieve that, you have to keep the map container in the DOM, and the references to the map objects, otherwise they will be freed by the Garbage Collector.

    It is more a Single Page Application problem, than something specific to HERE Maps API for JS.

    This also means that you have to take care of hiding (display: none;) the map, on the pages where it is not expected to appear.