HEREMapping/demo.js

/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */

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

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: 'jZt8CJGzLtXD1aOBsLvtJm4PsMMwtZ3J3LwUQ8g_GbE'
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

var berlinMarker = new H.map.Marker({
  lat:52.5192,
  lng:13.4061
});
map.addObject(berlinMarker);

var cantonMarker = new H.map.Marker({
  lat:42.340546188821804,
  lng:-83.44003945677788
});
map.addObject(cantonMarker);

var commerceMarker = new H.map.Marker({
  lat:42.577363481627756,
  lng:-83.50890588930572
});
map.addObject(commerceMarker);

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

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

function moveMapToBerlin(){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(14);
}

function moveMapToCanton() {   
    map.setCenter({lat:42.340546188821804, lng:-83.44003945677788});
    map.setZoom(14);
}

function moveMapToCommerce() {   
    map.setCenter({lat:42.577363481627756, lng:-83.50890588930572});
    map.setZoom(14);
}

function captureMap() {
    // overlay element containing captured canvas element
    var captureBackground = document.createElement('div');
    bgStyle = captureBackground.style;

    bgStyle.width='100%'; 
    bgStyle.position='absolute'; 
    bgStyle.top='0';
    bgStyle.bottom='0'; 
    bgStyle.background='rgba(0,0,0,0.7)';
    bgStyle.padding='30px';
    bgStyle.zIndex=1000;
    captureBackground.addEventListener('click', function(e) {
        document.body.removeChild(this);
    });
    // capture the map:
    map.capture(function(capturedCanvas) {
        // remove previously added canvas from the overlay
        captureBackground.innerHTML = '';               
        captureBackground.appendChild(capturedCanvas);
        document.body.appendChild(captureBackground);
    }, [], 50, 50, 700, 700);
}

// Now use the map as required...
window.onload = function () {
  moveMapToBerlin();
}