Fix HERE Maps API example

Author: YasharF

.env.example

@@ -67,8 +67,7 @@ PINTEREST_SECRET=b32f578ad83d94c058c6682329220feda7e5817e043a1cc4a5a1e28f51c7030
 
 GOOGLE_MAP_API_KEY=google-map-api-key
 
-HERE_APP_ID=aHxxxxxxxxxxxxxxlIgc
-HERE_APP_CODE=9bxxxxxxxxxxxxxxxxJFHg
+HERE_API_KEY=9bxxxxxxxxxxxxxxxxJFHg
 
 ALPHA_VANTAGE_KEY=api-key
 

README.md

@@ -261,9 +261,9 @@ Obtain SMTP credentials from a provider for transactional emails. Set the SMTP_U
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/HERE_logo.svg" height="75">
 
 - Go to <a href="https://developer.here.com" target="_blank">https://developer.here.com</a>
-- Sign up and create a Freemium project
-- Create JAVASCRIPT/REST credentials. Copy and paste the APP_ID and APP into `.env` file.
-- Note that these credentials are available on the client-side, and you need to create a domain whitelist for your app credentials when you are publicly launching the app.
+- Sign up for the Base plan. The Base plan require a credit card to start, but you get 30,000 map renders for free each month.
+- Create JAVASCRIPT/REST credentials. Copy and paste the API key into the `.env` file as HERE_API_KEY, or set it up as an environment variable.
+- **Set up Trusted Domain** - Your credentials will go to the client-side (browser of the users). You need to enable trusted domains and add your test domain address. Otherwise, others may be able to use your credentials on other websites, go through your quota, and potentially leave you with a bill.
 
 <hr>
 
@@ -667,7 +667,7 @@ to create a flash message in your controllers, and then display them in your vie
 ```pug
 if messages.errors
   .alert.alert-danger.fade.in
-    for error in messages.errors
+    each error in messages.errors
       div= error.msg
 ```
 
@@ -695,7 +695,7 @@ req.flash('warning', { msg: 'You have exceeded 90% of your data usage' });
 ```pug
 if messages.warning
   .alert.alert-warning.fade.in
-    for warning in messages.warning
+    each warning in messages.warning
       div= warning.msg
 ```
 
@@ -705,13 +705,13 @@ The flash messages partial template is _included_ in the `layout.pug`, along wit
 
 ```pug
 body
-    include partials/header
+  include partials/header
 
-    .container
-      include partials/flash
-      block content
+  .container
+    include partials/flash
+    block content
 
-    include partials/footer
+  include partials/footer
 ```
 
 If you have any further questions about flash messages, please feel free to open an issue, and I will update this mini-guide accordingly, or send a pull request if you would like to include something that I missed.
@@ -821,7 +821,7 @@ block content
     h3 All Books
 
   ul
-    for book in books
+    each book in books
       li= book.name
 ```
 
@@ -913,11 +913,11 @@ If you want to stick all your JavaScript inside templates, then in `layout.pug`
 ```pug
 script(src='/socket.io/socket.io.js')
 script.
-    let socket = io.connect(window.location.href);
-    socket.on('greet', function (data) {
-      console.log(data);
-      socket.emit('respond', { message: 'Hey there, server!' });
-    });
+  let socket = io.connect(window.location.href);
+  socket.on('greet', function (data) {
+    console.log(data);
+    socket.emit('respond', { message: 'Hey there, server!' });
+  });
 ```
 
 **Note:** Notice the path of the `socket.io.js`, you don't actually have to have `socket.io.js` file anywhere in your project; it will be generated automatically at runtime.

controllers/api.js

@@ -1106,8 +1106,7 @@ exports.postPinterest = (req, res, next) => {
 
 exports.getHereMaps = (req, res) => {
   res.render('api/here-maps', {
-    app_id: process.env.HERE_APP_ID,
-    app_code: process.env.HERE_APP_CODE,
+    apikey: process.env.HERE_API_KEY,
     title: 'Here Maps API',
   });
 };

views/api/here-maps.pug

@@ -21,38 +21,55 @@ block content
     #map(style='width: 100vw; height: 50vh')
 
   div(style='display: flex; justify-content: center')
-    | Straight line distance between the Fremont Troll and Seattle Art Museum is&nbsp
+    | Straight line distance between the Fremont Troll and Seattle Art Museum is 
     #directLineDistance
-    | &nbspmiles.
+    |  miles.
+
+  script(src='https://js.api.here.com/v3/3.1/mapsjs-core.js', type='text/javascript', charset='utf-8')
+  script(src='https://js.api.here.com/v3/3.1/mapsjs-service.js', type='text/javascript', charset='utf-8')
+  script(src='https://js.api.here.com/v3/3.1/mapsjs-mapevents.js', type='text/javascript', charset='utf-8')
+  script(src='https://js.api.here.com/v3/3.1/mapsjs-ui.js', type='text/javascript', charset='utf-8')
+  link(rel='stylesheet', type='text/css', href='https://js.api.here.com/v3/3.1/mapsjs-ui.css')
 
-  script(src='https://js.api.here.com/v3/3.0/mapsjs-core.js', type='text/javascript', charset='utf-8')
-  script(src='https://js.api.here.com/v3/3.0/mapsjs-service.js', type='text/javascript', charset='utf-8')
-  script(src='https://js.api.here.com/v3/3.0/mapsjs-mapevents.js', type='text/javascript', charset='utf-8')
   script.
     const platform = new H.service.Platform({
       useHTTPS: true,
-      app_id: '#{app_id}',
-      app_code: '#{app_code}',
+      apikey: '#{apikey}',
+    });
+
+    const defaultLayers = platform.createDefaultLayers();
+    const map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
+      zoom: 12,
+      center: { lat: 47.6573676, lng: -122.3126527 },
     });
-    const map = new H.Map(document.getElementById('map'), platform.createDefaultLayers().normal.map, { zoom: 12, center: { lat: 47.6573676, lng: -122.3126527 } });
+
     const mapEvents = new H.mapevents.MapEvents(map);
-    // at this point the map is rendered, lets add some markers
     const behavior = new H.mapevents.Behavior(mapEvents);
+
+    // Create markers
     const marker1 = new H.map.Marker({ lat: 47.6516216, lng: -122.3498897 });
     const marker2 = new H.map.Marker({ lat: 47.6123335, lng: -122.3314332 });
     const marker3 = new H.map.Marker({ lat: 47.6162956, lng: -122.3555097 });
     const marker4 = new H.map.Marker({ lat: 47.6205099, lng: -122.3514661 });
 
+    // Create line string for polygon
     const lineString = new H.geo.LineString();
-    lineString.pushPoint(marker1.getPosition());
-    lineString.pushPoint(marker2.getPosition());
-    lineString.pushPoint(marker3.getPosition());
-    lineString.pushPoint(marker4.getPosition());
+    lineString.pushLatLngAlt(47.6516216, -122.3498897);
+    lineString.pushLatLngAlt(47.6123335, -122.3314332);
+    lineString.pushLatLngAlt(47.6162956, -122.3555097);
+    lineString.pushLatLngAlt(47.6205099, -122.3514661);
+
+    // Create polygon
+    const polygon = new H.map.Polygon(lineString, { style: { lineWidth: 2, strokeColor: 'black', fillColor: 'rgba(255, 0, 255, 0.5)' } });
+
+    // Create circle
+    const circle = new H.map.Circle({ lat: 47.6205099, lng: -122.3514661 }, 3000, { style: { strokeColor: 'rgba(0,128,0, 0.6)', lineWidth: 1, fillColor: 'rgba(0, 128, 0, 0.3)' } });
 
-    const polygon = new H.map.Polygon(lineString, { style: { strokeColor: 'black', lineWidth: 2, fillColor: 'rgba(255, 0, 255, 0.5)' } });
-    const circle = new H.map.Circle(marker4.getPosition(), 1500, { style: { strokeColor: 'rgba(0,128,0, 0.6)', lineWidth: 1, fillColor: 'rgba(0, 128, 0, 0.3)' } });
+    // Add all objects to the map
     map.addObjects([marker1, marker2, marker3, marker4, polygon, circle]);
-    // At this point we have rendered all of the markers, the polygon and the circle that were set in the prior lines
 
-    const distance = (marker1.getPosition().distance(marker2.getPosition()) / 1609.344).toFixed(2);
-    directLineDistance.innerHTML = distance;
+    // Calculate distance
+    const start = marker1.getGeometry();
+    const end = marker2.getGeometry();
+    const distance = (start.distance(end) / 1609.344).toFixed(2);
+    document.getElementById('directLineDistance').innerHTML = distance;