Skip to main content

Tell us about your project

Official logo of Leaflet plugin library with a bench with leaves

The Leaflet is an open source JavaScript library used to build Web mapping Applications. Along with Google maps, it's the most popular way of presenting maps in apps. Leaflet module is available for Drupal versions 7 and 8, but at the time I`m writing this blog, only the beta version for Drupal 8 is available.

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

At the time, 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`ve realized later how easy would have it been, simply because I could have added everything I needed 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 all of them on the official Leaflet Website.

So let’s start, here are the plugins I`ve installed on my Leaflet maps:

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

Mini-map

Mini-map is a plugin which allows us to see a minimized version of the map with our position on it, while users can simultaneously see the rest of the map in standard size. Usually a different layer is used for Mini-map, in order to see the difference between it and the main map. All code I’ll present to you is pure JavaSript. Code for the feature described above:

  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 the previous code, we have positioned the Mini-map on the top left side of our map and minimized it 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.

 

Measure control

Measure control is another very usefull Leaflet plugin that helps us measure distance between two points on the map. It uses nanometer as the unit of length. The code for it:

  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. }

 

 

Full-screen plugin

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

  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. }

 

 

Mouse position

Another interesting plugin. It provides coordinates of the current Mouse position on the map. Code:

  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 Latitude and Longitude with 2 decimals, positioned in the bottom left side of the map.

 

Double-click

One of the features that is also available is Double-click on the Leaflet map. It opens the content we specify ( by double-clicking on it ). Following part of the code defines this feature:

  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 result is presented in the picture below.

More about Leaflet you can find here:

 

Lazar Padjan