Skip to content

Step1.md

Latest commit

 

History

History
61 lines (47 loc) · 1.78 KB

Step1.md

File metadata and controls

61 lines (47 loc) · 1.78 KB

Open your favourite IDE or a simple code editor like notepad or notepad++

Copy the code below into your editor.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tannenbaum</title>
<!-- SCRIPTS -->
<meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
<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>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<div id="map" style="width: 100vw; height: 100vh; background: #39B6B3;" ></div> 
<script>
  var platform = new H.service.Platform({
    apikey: "{YOUR_APIKEY}"
  });

  var maptypes = platform.createDefaultLayers();
  var myPos = {lat: 49.98771, lng: 8.22991};

  // Instantiate and display a map
  var map = new H.Map(document.getElementById('map'), maptypes.vector.normal.map, {
    center: myPos,
    zoom: 11
  });

  var ui = H.ui.UI.createDefault(map, maptypes);

  var mapEvents = new H.mapevents.MapEvents(map);

  var behavior = new H.mapevents.Behavior(mapEvents);
</script>
</body>
</html>

Save the file as HERE_JS_Workshop.html


Double-click on saved file to view on browser

Adding a position marker using map object of Interactive maps API

Add the following code before </script> tag

// create a marker object
posMarker = new H.map.Marker(myPos);
// Add the marker to the map 
map.addObject(posMarker);


Double-click on saved file to view on browser

Foo