// Common settings
var platform = new H.service.Platform({
  app_id: 'devportal-demo-20180625',
  app_code: '9v2BkviRwi9Ot26kp2IysQ',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});


//map 1
function moveMapToBerlin(map){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(14);
}
var map = new H.Map(document.getElementById('map1'),
  defaultLayers.normal.map, {pixelRatio: pixelRatio});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
moveMapToBerlin(map);


// map2
function setMapViewBounds(map){
  var bbox = new H.geo.Rect(42.3736,-71.0751,42.3472,-71.0408);
  map.setViewBounds(bbox);
}
var map = new H.Map(document.getElementById('map2'),
  defaultLayers.normal.map, {pixelRatio: pixelRatio});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
setMapViewBounds(map);

// map3
function switchMapLanguage(map, platform){
  var mapTileService = platform.getMapTileService({
      type: 'base'
    }),
    chineseMapLayer = mapTileService.createTileLayer(
      'maptile',
      'normal.day',
      pixelRatio === 1 ? 256 : 512,
      'png8',
      {lg: 'CHI', ppi: pixelRatio === 1 ? undefined : 320}
    );
  map.setBaseLayer(chineseMapLayer);
  var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN');
  ui.removeControl('mapsettings');
}
var map = new H.Map(document.getElementById('map3'),
  defaultLayers.normal.map,{
  center: {lat:22.2783, lng:114.1588},
  zoom: 12,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
switchMapLanguage(map , platform);

// map4
function switchMapType(map, platform){
  var aerialMapTileService = platform.getMapTileService({
    type: 'aerial'
  });
  terrainMap = aerialMapTileService.createTileLayer(
    'maptile',
    'terrain.day',
    pixelRatio === 1 ? 256 : 512,
    'png8',
    {ppi: pixelRatio === 1 ? undefined : 320}
  );
  map.setBaseLayer(terrainMap);
}
var map = new H.Map(document.getElementById('map4'),
  defaultLayers.normal.map,{
  center: {lat:27.98805, lng:86.9250},
  zoom: 10,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.removeControl('mapsettings');
switchMapType(map, platform);

// map5
function useImperialMeasurements(map, defaultLayers){
  var ui = H.ui.UI.createDefault(map, defaultLayers);
  ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);
}
var map = new H.Map(document.getElementById('map5'),
  defaultLayers.normal.map,{
  center: {lat:42.3572, lng:-71.0596},
  zoom: 14,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
useImperialMeasurements(map, defaultLayers);

// map6
function panTheMap(map) {
  var viewPort,
      incX = 1,
      incY = 2,
      x = 100,
      y = 100;
  var viewPort = map.getViewPort(),
      pan = function() {
        x = x + incX;
        if (Math.abs(x) > 100) {
          incX = -incX;
        }

        y = y + incY;
        if (Math.abs(y) > 100) {
          incY = -incY;
        }

        viewPort.interaction(x, y);
      };
  viewPort.startInteraction(H.map.render.RenderEngine.InteractionModifiers.COORD);
  setInterval(pan, 10);
}
var map = new H.Map(document.getElementById('map6'),
  defaultLayers.normal.map,{
  center: {lat: 19.11, lng: 72.89},
  zoom: 4,
  pixelRatio: pixelRatio
});
panTheMap(map);

// map7
function useImperialMeasurements(map, defaultLayers){
  var ui = H.ui.UI.createDefault(map, defaultLayers);
  ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);
}
var map = new H.Map(document.getElementById('map7'),
  defaultLayers.normal.map,{
  center: {lat:42.3572, lng:-71.0596},
  zoom: 14,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
useImperialMeasurements(map, defaultLayers);


// map 8
function addVenueLayer(map, platform, renderControls) {
  var customVenueLayer = platform.getVenueService().createTileLayer({
    onSpaceCreated: onSpaceCreated
  });
  var venueProvider = customVenueLayer.getProvider();
  map.addLayer(customVenueLayer);
  renderControls('Change floor', {
    '+1 Level': function () {
      venueProvider.setCurrentLevel(venueProvider.getCurrentLevel() + 1);
    },
    '-1 Level': function () {
      venueProvider.setCurrentLevel(venueProvider.getCurrentLevel() - 1);
    }
  });
}
function onSpaceCreated(space) {
  if (space.getData().preview === 'H&M') {
    space.setStyle({
      fillColor: 'rgba(0,255,0,0.3)'
    });
  }
}
var map = new H.Map(document.getElementById('map8'), defaultLayers.normal.map, {
  center: new H.geo.Point(52.5189, 13.4158),
  zoom: 17,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
function renderControls(title, buttons) {
  var containerNode = document.createElement('div');
  containerNode.innerHTML = '<h4 class="title">' + title + '</h4><div class="btn-group"></div>';
  containerNode.setAttribute('style',
      'position:absolute;top:0;left:0;background-color:#fff; padding:10px;text-align:center');
  Object.keys(buttons).forEach(function (label) {
    var input = document.createElement('input');
    input.value = label;
    input.type = 'button';
    input.onclick = buttons[label];
    input.className="btn btn-sm btn-default"
    containerNode.lastChild.appendChild(input);
  });
  map.getElement().appendChild(containerNode);
}
addVenueLayer(map, platform, renderControls);

// map9
function setUpCustomZooming(map) {
  var clevelandCircle = new H.map.Circle(
    new H.geo.Point(41.4822, -81.6697), //center
    11703,
    {style: {fillColor: 'rgba(0, 255, 221, 0.66)'}}
  );
  var torontoCircle = new H.map.Circle(
    new H.geo.Point(43.7000, -79.4000), //center
    75090,
    {style: {fillColor: 'rgba(0, 255, 221, 0.66)'}}
  );
  var chicagoCircle = new H.map.Circle(
    new H.geo.Point(41.8369, -87.6847), //center
    81570,
    {style: {fillColor: 'rgba(0, 221, 255, 0.66)'}}
  );
  var newYorkCircle = new H.map.Circle(
    new H.geo.Point(40.7127, -74.0059), //center
    252180,
    {style: {fillColor: 'rgba(221, 0, 255, 0.66)'}}
  );
  clevelandCircle.setData({maxZoom: 7});
  torontoCircle.setData({maxZoom: 5});
  chicagoCircle.setData({maxZoom: 5});
  newYorkCircle.setData({maxZoom: 4});
  var container = new H.map.Group({
    objects: [clevelandCircle, torontoCircle, chicagoCircle, newYorkCircle]
  });
  container.addEventListener('tap', function (evt) {
    var target = evt.target;
    var maxZoom = target.getData().maxZoom;
    var cameraData = map.getCameraDataForBounds(target.getBounds());
    map.setZoom(Math.min(cameraData.zoom, maxZoom), true);
    map.setCenter(cameraData.position, true);
  });
  map.addObject(container);
}
var map = new H.Map(document.getElementById('map9'), defaultLayers.normal.map, {
  center: new H.geo.Point(41.4822, -81.6697),
  zoom: 4,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
setUpCustomZooming(map);

// map10
function restrictMap(map){
  var bounds = new H.geo.Rect(37.829, -122.426, 37.824, -122.42);
  map.getViewModel().addEventListener('sync', function() {
    var center = map.getCenter();
    if (!bounds.containsPoint(center)) {
      if (center.lat > bounds.getTop()) {
        center.lat = bounds.getTop();
      } else if (center.lat < bounds.getBottom()) {
        center.lat = bounds.getBottom();
      }
      if (center.lng < bounds.getLeft()) {
        center.lng = bounds.getLeft();
      } else if (center.lng > bounds.getRight()) {
        center.lng = bounds.getRight();
      }
      map.setCenter(center);
    }
  });
  map.addObject(new H.map.Rect(bounds, {
    style: {
        fillColor: 'rgba(55, 85, 170, 0.1)',
        strokeColor: 'rgba(55, 85, 170, 0.6)',
        lineWidth: 8
      }
    }
  ));
}
var map = new H.Map(document.getElementById('map10'),
  defaultLayers.normal.map,{
  center: {lat:37.82667, lng:-122.423333},
  zoom: 16,
  pixelRatio: pixelRatio
});
map.setBaseLayer(defaultLayers.satellite.map);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
restrictMap(map);

// map11
var PHI = 0.9005,
    omega = 4.1214,
    t = 0,
    tick = 0,
    x = 0,
    lastZoom = NaN;
function drawGroundTrack(x, t, zoom, radius, ctx, projection, screenCenter) {
  ctx.beginPath();
  for (var i = 1024; i >= 0; i--) {
    if (x <= 0) {
      x = projection.w;
      ctx.stroke();
      ctx.beginPath();
    }
    y = radius * Math.sin(omega * t + PHI);
    x -= Math.pow(2, zoom);
    pX = x - projection.x + screenCenter.x; 
    pY = y + (projection.w / 2) - projection.y + screenCenter.y;
    ctx.lineTo(pX, pY);
    t -= 0.007;
  }
  ctx.stroke();
}
function renderCallback(ctx, renderParams) {
  var zoom = renderParams.zoom,
    projection = renderParams.projection,
    screenCenter = renderParams.screenCenter,
    radius = Math.pow(2, (projection.exp + zoom)) / (2 * Math.PI),
    y,
    pX,
    pY;
  if (isNaN(lastZoom)) {
    lastZoom = zoom;
  }
  ctx.strokeStyle = 'yellow';
  if (zoom !== lastZoom) {
    x = tick * Math.pow(2, zoom);
  }
  x += Math.pow(2, zoom);
  y = radius * Math.sin(omega * t + PHI);
  pX = x - projection.x + screenCenter.x; 
  pY = y + (projection.w / 2) - projection.y + screenCenter.y;
  ctx.moveTo(pX - 10, pY - 10);
  ctx.lineTo(pX + 10, pY + 10);
  ctx.moveTo(pX + 10, pY - 10);
  ctx.lineTo(pX - 10, pY + 10);
  ctx.stroke();
  if (lastZoom === zoom) {
    drawGroundTrack(x, t, zoom, radius, ctx, projection, screenCenter);
  }
  lastZoom = zoom;
  tick += 1;
  t += 0.007;
  if (tick > 256) {
    tick = 0;
    x = 0;
  }
  return H.map.render.RenderState.ACTIVE;
}
function addCanvasOverlay(map, platform){
  var canvasLayer = new H.map.layer.CanvasLayer(renderCallback)
  map.addLayer(canvasLayer);
}
var map = new H.Map(document.getElementById('map11'),
  defaultLayers.satellite.map,{
  center: {lat: 0, lng: 0},
  zoom: 1,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.removeControl('mapsettings');
addCanvasOverlay(map, platform);

// map12
function addMarkersToMap(map) {
  var parisMarker = new H.map.Marker({lat:48.8567, lng:2.3508});
  map.addObject(parisMarker);

  var romeMarker = new H.map.Marker({lat:41.9, lng: 12.5});
  map.addObject(romeMarker);

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

  var madridMarker = new H.map.Marker({lat:40.4, lng: -3.6833});
  map.addObject(madridMarker);

  var londonMarker = new H.map.Marker({lat:51.5008, lng:-0.1224});
  map.addObject(londonMarker);
}
var map = new H.Map(document.getElementById('map12'),
  defaultLayers.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addMarkersToMap(map);

// map13
function addDraggableMarker(map, behavior){
  var marker = new H.map.Marker({lat:42.35805, lng:-71.0636});
  marker.draggable = true;
  map.addObject(marker);
  map.addEventListener('dragstart', function(ev) {
    var target = ev.target;
    if (target instanceof H.map.Marker) {
      behavior.disable();
    }
  }, false);
  map.addEventListener('dragend', function(ev) {
    var target = ev.target;
    if (target instanceof mapsjs.map.Marker) {
      behavior.enable();
    }
  }, false);
   map.addEventListener('drag', function(ev) {
    var target = ev.target,
        pointer = ev.currentPointer;
    if (target instanceof mapsjs.map.Marker) {
      target.setPosition(map.screenToGeo(pointer.viewportX, pointer.viewportY));
    }
  }, false);
}
var map = new H.Map(document.getElementById('map13'),
  defaultLayers.normal.map,{
  center: {lat:42.35805, lng:-71.0636},
  zoom: 12,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
addDraggableMarker(map, behavior);


// map14
function addPolylineToMap(map) {
  var lineString = new H.geo.LineString();
  lineString.pushPoint({lat:53.3477, lng:-6.2597});
  lineString.pushPoint({lat:51.5008, lng:-0.1224});
  lineString.pushPoint({lat:48.8567, lng:2.3508});
  lineString.pushPoint({lat:52.5166, lng:13.3833});
  map.addObject(new H.map.Polyline(
    lineString, { style: { lineWidth: 4 }}
  ));
}
var map = new H.Map(document.getElementById('map14'),
  defaultLayers.normal.map,{
  center: {lat:52, lng:5},
  zoom: 5,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addPolylineToMap(map);

// map15
function addPolygonToMap(map) {
  var lineString = new H.geo.LineString(
    [52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100],
    'values lat lng alt'
  );
  map.addObject(
    new H.map.Polygon(lineString, {
      style: {
        fillColor: '#FFFFCC',
        strokeColor: '#829',
        lineWidth: 8
      }
    })
  );
}
var map = new H.Map(document.getElementById('map15'),
  defaultLayers.normal.map,{
  center: {lat:52, lng:5},
  zoom: 5,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addPolygonToMap(map);

// map16
function addCircleToMap(map){
  map.addObject(new H.map.Circle(
    {lat:28.6071, lng:77.2127},
    1000,
    {
      style: {
        strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter
        lineWidth: 2,
        fillColor: 'rgba(0, 128, 0, 0.7)'  // Color of the circle
      }
    }
  ));
}
var map = new H.Map(document.getElementById('map16'),
  defaultLayers.normal.map,{
  center: {lat:28.6071, lng:77.2127},
  zoom: 13,
  pixelRatio: pixelRatio
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addCircleToMap(map);