Initial Commit
This commit is contained in:
commit
c8a61c9776
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"CurrentProjectSetting": null
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"SelectedNode": "\\demo.js",
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,30 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
|
||||
<title>Map at a specified location</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
|
||||
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
|
||||
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
|
||||
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
|
||||
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
|
||||
<script>window.ENV_VARIABLE = 'developer.here.com'</script>
|
||||
</head>
|
||||
<body id="markers-on-the-map">
|
||||
<div class="page-header">
|
||||
<h1>Map at a specified location</h1>
|
||||
<p>Display a map at a specified location and zoom level</p>
|
||||
</div>
|
||||
<button onclick="moveMapToCanton()">Canton</button>
|
||||
<button onclick="moveMapToCommerce()">Commerce</button>
|
||||
<button onclick="moveMapToBerlin()">Berlin</button>
|
||||
<br /><button onclick="captureMap()">Grab Screenshot</button>
|
||||
<div id="map"></div>
|
||||
<h3>Code</h3>
|
||||
<p>
|
||||
The <code>map.setCenter()</code> method and <code>map.setZoom() </code>method are able to control the location of the map.<br>
|
||||
</p>
|
||||
<script type="text/javascript" src='demo.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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();
|
||||
}
|
||||
Loading…
Reference in New Issue