Custom Icons using Leaflet and Vue Js

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

Install NPM

Npm is the world’s largest registry used for the management of the 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.

Trending

Ultimate Web GIS Development Roadmap

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 the final results

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

npm run serve