Store map tiles for offline usage

Store map tiles for offline usage

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>Store map tiles for offline usage</h1>
<p>This example shows how to store map tiles of the desired area in the browser cache and show them when no Internet connection is available. <br><br>We store satellite map tiles and attempt to show them after Internet connection is disabled. Pan the map and change the zoom level to see which areas of the map where cached.</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

/**
 * Stores the map tiles for offline usage
 * @param {H.Map} map Reference to the map instance
 * @param {Object<string , H.service.MapType>} defaultLayers Default layers provided by
 *                                                           the H.service.Platform
 */
function storeTiles(map, defaultLayers) {
  // Zoom level to cache
  var currentZoomLevel = map.getZoom(),
      // View bounds to store. By default visible area of the map.
      viewBounds;

  // Cache the layer area within current view bounds for the current and next zoom level.
  map.storeContent(function(req) {
    // If all tiles are stored switch on the layer
    if (req.getState() === H.util.Request.State.COMPLETE) {
      alert('Disable Internet connection and click the button below to see the cached satellite layer.');
      map.setBaseLayer(defaultLayers.satellite.map);
    }
  }, viewBounds, currentZoomLevel, currentZoomLevel + 1, defaultLayers.satellite.map);
}


/**
 * Clears the stored tiles
 * @param {H.Map} map Reference to the map instance
 */
function clearTiles(map) {
  map.clearContent();
}


/**
 * Boilerplate map initialization code starts below:
 */

// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useHTTPS: true,
  useCIT: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
  // initial center and zoom level of the map
  center: {lat: 19.969202, lng: -156.007712},
  zoom: 7
});

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: Create the default UI:
H.ui.UI.createDefault(map, defaultLayers, 'en-US');


/**
 * Template function for our controls
 * @param...