488 lines
14 KiB
JavaScript
488 lines
14 KiB
JavaScript
// 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);
|