Add a HERE Map into your Vue.js application

Last Updated: July 05, 2020

Introduction

Duration is 15 min

Vue.js is a popular JavaScript framework among developers. This popularity is in part due to the fact that Vue.js is easy to integrate into existing projects. You can build dynamic, scalable applications from scratch with it quickly.

In this tutorial, you will create an interactive HERE Map using Vue.js and the HERE JavaScript API. You will create a reusable component that can be added to your existing Vue.js application.

Prerequisites

Node.js installed on your machine
Knowledge of JavaScript and HTML
HERE Developer account developer.here.com

Roadmap

Installing Vue CLI on your computer
Create a project with Vue CLI
Integrate HERE JavaScript API in Vue.js application
Create a reusable map component
Render the HereMap component

Installing Vue CLI in your computer

To be able to create a Vue.js application, you need to have the Vue CLI on your computer. To do this, open your terminal and run the following command to install Vue CLI.

npm install -g @vue/cli

Create a project with Vue CLI

To create a Vue.js project, run the following command in your terminal/cmd:

vue create heremap-vue

Select the default option as shown below:

It will take few seconds to create a project. Once everything is installed, navigate to the root folder (heremap-vue) and run npm run serve in the terminal. A browser window should open automatically looking something like what you see below:

Integrate HERE JavaScript API in Vue.js Application

In your favorite editor, open the heremap-vue folder that you have created using the Vue CLI and start editing the index.html file in the public folder as shown below:

Add the following to the <head> section of the index.html file. These are the required libraries for HERE JavaScript Maps.

    <!-- Here assets start-->
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <!-- Here assets end-->

Create a reusable map component

Let’s create a HereMap component. From the root folder navigate to the src/components and create the following HereMap.vue file:

Now, add the following code to the HereMap.vue file.


<template>
  <div id="map">
  <!--In the following div the HERE Map will render-->
    <div id="mapContainer" style="height:600px;width:100%" ref="hereMap"></div>
  </div>
</template>

<script>
export default {
  name: "HereMap",
  props: {
    center: Object
    // center object { lat: 40.730610, lng: -73.935242 }
  },
  data() {
    return {
      platform: null,
      apikey: "{Replace this with HERE API KEY}"
      // You can get the API KEY from developer.here.com
    };
  },
  async mounted() {
    // Initialize the platform object:
    const platform = new window.H.service.Platform({
      apikey: this.apikey
    });
    this.platform = platform;
    this.initializeHereMap();
  },
  methods: {
    initializeHereMap() { // rendering map

      const mapContainer = this.$refs.hereMap;
      const H = window.H;
      // Obtain the default map types from the platform object
      var maptypes = this.platform.createDefaultLayers();

      // Instantiate (and display) a map object:
      var map = new H.Map(mapContainer, maptypes.vector.normal.map, {
        zoom: 10,
        center: this.center
        // center object { lat: 40.730610, lng: -73.935242 }
      });

      addEventListener("resize", () => map.getViewPort().resize());

      // add behavior control
      new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

      // add UI
      H.ui.UI.createDefault(map, maptypes);
      // End rendering the initial map
    }
  }
};
</script>

<style scoped>
#map {
  width: 60vw;
  min-width: 360px;
  text-align: center;
  margin: 5% auto;
  background-color: #ccc;
}
</style>

In the code above, the initialzeHereMap method is responsible for rendering the HERE map.

Render the HereMap Component

Finally, we need to render the HereMap component in the src/App.vue file.

<template>
  <div id="app">
    <HereMap  :center="center" />
  </div>
</template>

<script>
import HereMap from './components/HereMap'
export default {
  name: 'app',
  components: {
    HereMap
    // Remove the HelloWorld.vue 
  },
  data() {
return {
    // we are this as prop to the HereMap component 
  center:{ 
    lat: 40.730610, 
    lng: -73.935242
    }
}
  
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

As shown in the above code, we are importing the HereMap component that we’ve created. We also added the imported HereMap component to the template section to display the HERE Map.

You can zoom to get the 3d view

Conclusion

You’ve successfully created an interactive map with Vue.js by using the HERE JavaScript API. Now you can integrate the component in your existing Vue.js applications.

You’ve learned how to:

Create a project with the Vue CLI
Create a reusable map component inside your Vue.js application
How to add HERE Map to your Vue.js application

Next Steps

Check out our other tutorials: