Display Custom Icons using Leaflet and Vue Js.

Custom icons are a great way to display maps, especially while representing point features. This article focuses on outlining step by step process of displaying custom icons on a leaflet map using Vue Js.

Install NPM.

Npm is the world’s largest registry used for management of development, sharing and borrowing of packages. Also, npm helps to download and use standalone tools. In this case, we will use npm to install some of the dependencies like leaflet, vue and vue2leaflet. To install npm:

  1. Open command prompt
  2. On the command line interface, run the following code
npm install

3. Press Enter to run

Install Dependencies.

In this case, the dependencies that will be used include leaflet, vue and vue2leaflet. On the CLI, run the following code:

npm install leaflet vue2-leaflet --save

Use the installed dependencies

In your local components, open the App.vue and Main.vue files. In the App.vue file, type the following code inside the <template> tags to add the container for the map display.

2.	<template>
3.	  <div id="app" style="height: 100vh; width: 100%">
4.	   
5.	    <l-map
6.	     
7.	      :zoom="zoom"
8.	      :center="center"
9.	      :options="mapOptions"
10.	      style="height: 100%"
11.	      
12.	    >
13.	      <l-tile-layer
14.	        :url="url"
15.	        :attribution="attribution"
16.	      />      
17.	    </l-map>
18.	  </div>
19.	</template>

Create the markers.

Inside the <l-map> tags, which is the map container, insert the following code to create the markers on the map.

<l-marker :lat-lng="[-1.3, 36.8]">
        <l-icon
          :iconSize="[100, 80]"
          :icon-anchor="[50, 50]"
          icon-url="/images/blue-pin.png"
        />
      </l-marker>
      <l-marker :lat-lng="[-1.3, 36.82]">
        <l-icon
           :iconSize="[100, 80]"
          :icon-anchor="[50, 50]"
          icon-url="/images/pin.png"
        />
      </l-marker>

Inside the script tags, import the previously installed dependencies.

1.	<script>
2.	
3.	import { latLng} from "leaflet";
4.	import { LMap, LTileLayer, LMarker, LIcon} from 'vue2-leaflet';
5.	export default {
6.	  name: 'MyAwesomeMap',
7.	  components: {
8.	    LMap,
9.	    LTileLayer,
10.	    LMarker,
11.	    LIcon
12.	
13.	    
14.	  },
15.	   data() {
16.	    return {
17.	      zoom: 13,
18.	      center: latLng(-1.3, 36.8),
19.	     url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
20.	      attribution:
21.	        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
22.	      withPopup: latLng(-1.3, 36.8),
23.	      withTooltip: latLng(-1.3, 36.8),
24.	      currentZoom: 11.5,
25.	      currentCenter: latLng(-1.3, 36.8),
26.	      showParagraph: false,
27.	      mapOptions: {
28.	        zoomSnap: 0.5
29.	      },
30.	      showMap: true
31.	    }
32.	     
33.	  },
34.	 
35.	};
36.	</script>

If the Icons do not show, solve the problem by including this snippet inside your <script> tags.

1.	import { Icon } from 'leaflet';

2.	delete Icon.Default.prototype._getIconUrl;
3.	Icon.Default.mergeOptions({
4.	  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
5.	  iconUrl: require('leaflet/dist/images/marker-icon.png'),
6.	  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
7.	});

Apply CSS styling to the map container

<style>
#app {
  height: 100vh;
   width: 100%;
 
} 
 </style> 

In the main.js file, import the leaflet css styling.

import 'leaflet/dist/leaflet.css';
  • Run the code and display final results.

To run the code, open the terminal of your text editor, type the following code and press enter.

npm run serve
Previous Post
Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.