Skip to content

Step1.md

Latest commit

 

History

History
64 lines (51 loc) · 1.84 KB

Step1.md

File metadata and controls

64 lines (51 loc) · 1.84 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>Food in the City</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}"
})

// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers()
var MyPos = {lat: 52.54435, lng: 13.35289}
// Instantiate (and display) a map object:
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    zoom: 11,
    center: MyPos
  })

var ui = H.ui.UI.createDefault(map, defaultLayers)

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