Map at a specified location

+ + + +

+ +

+ + +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.vs/MappingTest/v17/.wsuo b/.vs/MappingTest/v17/.wsuo new file mode 100644 index 0000000..21767fb Binary files /dev/null and b/.vs/MappingTest/v17/.wsuo differ diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json new file mode 100644 index 0000000..f8b4888 --- /dev/null +++ b/.vs/ProjectSettings.json @@ -0,0 +1,3 @@ +{ + "CurrentProjectSetting": null +} \ No newline at end of file diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..b4eb1ba --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,7 @@ +{ + "ExpandedNodes": [ + "" + ], + "SelectedNode": "\\demo.js", + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000..1c03fd9 Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..07716ff --- /dev/null +++ b/Index.html @@ -0,0 +1,30 @@ + + + + + + Map at a specified location + + + + + + + + + + + + +
+

Code

+ The map.setCenter() method and map.setZoom() method are able to control the location of the map.
+

+ + + \ No newline at end of file diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..2aaa616 --- /dev/null +++ b/demo.js @@ -0,0 +1,96 @@ +/** + * 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(); +} \ No newline at end of file