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