Create your interactive maps with Vue.js and Leaflet

Hello and welcome on my first tutorial here on Medium. We will, during the next posts, learn to create a website allowing you to show a map of our favorite restaurants by using the popular Javascript framework Vue.js, and the Php framework Laravel.

Introduction & Setup

Vue.js

As said previously, we will use Vue.js. If you don’t know it yet, it is a very popular Javascript open-source framework, standing up to Angular and REact. You can find more about it by folowing this link: https://vuejs.org/

Leaflet

Leaflet is a Javascript library allowing to create your own interactive and customizable maps. Very popular and easy to use, we’re going to use its Vue.js specific version: https://vue2-leaflet.netlify.app/

Generate the project

npm install -g @cli/vue
vue create projectname

To launch the project, we simply use the command:

npm run serve

Creating our first component

Let’s see our generated project and go in the folder src/components to create a new Vue file. We will call it map.vue.

We bind it in src/App.vue:

We can now jump on our map.vue file. From this basis, we need to think about what we need to see: A map, of course, then some icons appearing on it at specific coordinates, each one getting its particular design, or its own information… Let’s start by making the map appear.

To do so, we will use, as you probably guessed, Leaflet. Luckily, there is a specific library make for Vue.js: Vue2Leaflet. We will use npm to install the necessary libraries:

npm install --save leaflet
npm install --save vue2-leaflet

It is mandatory to install Leaflet even if we use the specific Vue library, as it in not installed automatically. Trust me, you don’t want your project to magically refuse to work because you were in a hurry to skip this install…

Here are the 3 elements we will use and the way they work:

l-map: The main component, containing all the other elements and letting you manage the main parameters.

l-tile-layer: Contains the map url, and options like the zoom level or the default position.

l-marker: Component with the markers that will appear on our map. In our case, the marker will contain the restaurants icons.

In this example, we see the “basic” configuration, allowing us to show the map without any markers.

Adding our markers

We will then add to our map what will make it special: the l-markers. As said previously, they will be put on the map at specific points. We put them in our code just before the l-tile-layer. Here’s the associated code:

<l-marker
 :key="marker.id"
 :lat-lng="marker.coordinates"
>
</l-marker>

We also add in data () :

markers: [
   {id: 1, coordinates: [ 49.114910, 6.178810 ]},
   {id: 2, coordinates: [ 49.133290, 6.154370 ]},
   {id: 3, coordinates: [ 49.102160, 6.158850 ]},
   {id: 4, coordinates: [ 49.136010, 6.199630 ]},
   {id: 5, coordinates: [ 49.105563, 6.182234 ]},
]

As we can see, everything is functional and our markers are appearing where they’re supposed to.

Let’s get pretty

Unsatisfied? Let’s admit, their main design isn’t really trendy. Hopefully, we can easily customize the markers icons to make them fit our graphic standards. To make these specific icons and keep our code as clean as possible, let’s create a new component that will contain our futur icons: restaurant.vue

In our map.vue file, we can now replace our l-marker by our restaurant component, that we indeed need to import first. Don’t forget to pass the markers as parameters… Let’s go back to restaurant.vue

We notice the l-icon: This component is made to build a specific Vue component to create the icon. It allows the interactivity as well as a clean code, and even the ability to build complex icons (with many images overlapping each others for example). The opposite is also possible and you can just put the component in the l-icon to use it in another context. It all depends on your design choice. In the l-icon, you can see the associated imageUrl, defined in our map.vue data () :

markers: [
        {id: 1, imageUrl: 'https://img.icons8.com/doodle/48/000000/fish-food--v1.png', coordinates: [ 49.114910, 6.178810 ]},
        {id: 2, imageUrl: 'https://img.icons8.com/doodle/48/000000/pizza--v1.png' ,coordinates: [ 49.133290, 6.154370 ]},
        {id: 3, imageUrl: 'https://img.icons8.com/doodle/48/000000/croissant--v1.png', coordinates: [ 49.102160, 6.158850 ]},
        {id: 4, imageUrl: 'https://img.icons8.com/doodle/48/000000/the-toast--v2.png', coordinates: [ 49.136010, 6.199630 ]},
        {id: 5, imageUrl: 'https://img.icons8.com/doodle/48/000000/hamburger.png', coordinates: [ 49.105563, 6.182234 ]},
      ]

And then comes our final design:

This is all for today. In the next part, we will learn to make icons clusters, and to improve our map UX, just by following the link below:

Improve your interactive maps with Vue.js and Leaflet

By the way, you can find the whole code of this project here:

Jorek57/VueLeaflet-Tutorial