Adding plugins on Leaflet maps (Drupal 8)

Leaflet is an open source javascript library used to built web mapping applications.

Along with Google maps, it's the most popular way of presenting maps in applications. Leaflet module is available for Drupal versions 7 and 8, while at the time of writing of this blog, only beta version for Drupal 8 is available.

I had problems when I needed to add some of the Leaflet plugins not specifically to one map, or all Leaflet maps on my website, but to specific groups. For example to only specified content types or specific pages.

At the time of working with this, I didn’t have too much experience with Leaflet, and a lack of documentation for Drupal 8 Leaflet features was giving me a headache. I realized later how easy it was, as you can add everything you need just by writing some custom JavaScript code.

In order to get this to work as expected you’ll need to include all libraries that the plugin needs. You can find any of them on the official Leaflet website.

So let’s start, here are the plugins I succeed to install on my Leaflet maps:

  • Mini map
  • Measure control
  • Full screen plugin
  • Mouse position
  • Double click

Mini map

Mini map is a plugin which helps us by letting us see a smaller version of our current position on the map, so users can more easily see the rest of the map. Usually a different layer is used on mini map, in order to see the difference between it and the main map. All code I’ll present to you is pure JavaSript. Following part of the code is:

  1. jQuery(document).bind('Leaflet.map', function(event, map, lMap) {
  2. // If you want to set this settings only on specific pages, I checked if url contains some string
  3.   if (url.indexOf('your_string') >= 0) {
  4.   var minimapLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  5.   var miniMap = new L.Control.MiniMap(minimapLayer, { toggleDisplay: true, position: 'topleft', minimized: true }).addTo(lMap);
  6.   }
  7. }

In previous code we have made the mini map positioned on the top left side of our map, and minimized by default on page load. That mini map will be presented only on the Leaflet maps that are on pages which include ‘your_string’ as the value in url.

More about Leaflet mini map plugin you can find here.

Measure control

Measure control is another very helpful Leaflet plugin that helps us to measure distance between two points on the map, it uses nanometer as the unit of length. Following part of the code is:

  1. jQuery(document).bind('Leaflet.map', function(event, map, lMap) {
  2.         if((url.indexOf('your_string') >= 0){
  3.         var measureControl = new L.control.measure().addTo(lMap);      
  4.         }
  5. }

 

More about Leaflet measure control plugin you can find here.

Full screen plugin

Full screen plugin is probably one of the most used plugins. It’s meaning is very simple, as the name says, it gives us the opportunity to see the map in full screen, and later to exit it. Following part of the code is:

  1. jQuery(document).bind('Leaflet.map', function(event, map, lMap) {
  2.         if((url.indexOf('your_string') >= 0){
  3.         var fullScreen = new L.control.fullscreen({
  4.                 position: 'topleft', // change the position of the button. It can be topleft, topright,                
  5.                             //bottomright or bottomleft, defaut topleft
  6.                 title: 'Show me in full screen !', // change the title of the button, default Full             
  7.                                           //Screen
  8.                 titleCancel: 'Exit full screen mode', // change the title of the button when           
  9.                                              //fullscreen is on, default Exit Full Screen
  10.                 content: null, // change the content of the button, can be HTML, default null
  11.                 forceSeparateButton: true, // force seperate button to detach from zoom                
  12.                                   //buttons, default false
  13.                 forcePseudoFullscreen: true, // force use of pseudo full screen even if                        
  14.                                     //full screen API is available, default false
  15.                 fullscreenElement: false // Dom element to render in full screen, false by             
  16.                                  //default, fallback to map._container
  17.                 }).addTo(lMap);
  18.         }
  19. }

 

More about Leaflet measure control plugin you can find here.

Mouse position

Another one of the most used plugins. It provides coordinates of the current mouse position on the map. Following part of the code is:

  1. jQuery(document).bind('Leaflet.map', function(event, map, lMap) {
  2.         if((url.indexOf('your_string') >= 0){
  3.          var coordinates = new L.control.coordinates({
  4.                         position:"bottomleft", //optional default "bootomright"
  5.                         decimals:2,
  6.                         decimalSeperator:",",
  7.                       labelTemplateLat:"Latitude: {y}",
  8.                         labelTemplateLng:"Longitude: {x}"
  9.                         }).addTo(lMap);
  10.         }
  11. }

This part of code, displays mouse position coordinates in Lat and Long with 2 decimals, positioned in bottom left side of the map.

More about Leaflet measure control plugin you can find here.

Double click

One of the possibilities that are also available is to double click on the Leaflet map, meaning that when the user double clicks on the map, it opens some specific content we specify. Following part of the code is:

  1. jQuery(document).bind('Leaflet.map', function(event, map, lMap) {
  2.         if((url.indexOf('your_string') >= 0){
  3.         lMap.on('dblclick', function(e) {
  4.                         var NorS, EorW;
  5.                         var RAWLAT = (e.latlng.lat)
  6.                         var RAWLONG = (e.latlng.lng)
  7.                 if (RAWLAT < 0) { NorS = "S"; } else { NorS = "N"; }
  8.                 if (RAWLONG < 0) { EorW = "W"; } else { EorW = "E"; }
  9.                     var ABSLAT = Math.abs(RAWLAT);     
  10.                 var ABSLONG = Math.abs(RAWLONG);
  11.                 var DEGLAT = Math.floor(ABSLAT);
  12.                 var DEGLONG = Math.floor(ABSLONG);
  13.                 var MINLAT = (((ABSLAT - DEGLAT)*60).toFixed(4))
  14.                 var ZMINLAT = ( MINLAT < 10) ? '0' : '';
  15.                 var MINLONG = (((ABSLONG - DEGLONG)*60).toFixed(4))
  16.                 var ZMINLONG = ( MINLONG < 10) ? '0' : '';
  17.                 var popup = L.popup()
  18.                     .setLatLng(e.latlng)
  19.                     .setContent("<b>Location :</b>
  20. " + DEGLAT +"° " + ZMINLAT + MINLAT +  "' " + NorS +  " " + DEGLONG +"° " + ZMINLONG + MINLONG +  "' " + EorW + "
  21. " + e.latlng.lat.toFixed(7) + ", " + e.latlng.lng.toFixed(7) ")
  22.                     .openOn(lMap);
  23.                 });
  24.  
  25.         }
  26. }

The expected result is presented on the picture below.

Conclusion

Playing with and exploring Leaflet made me realize how interesting this module is, and how many options Leaflet has.

There are plenty more possible plugins and possibilities what you can make with Leaflet and it's plugins.

More about Leaflet you can find here:

 

Lazar Padjan

back to top