To summarize: someone asked me to post this here - so that he can give it a try!

  • put a PIN based on latitude/longitude of the CiviCRM Contact
  • put CiviCRM Contact data in the bubble pop-up
  • color the PIN based on value of a CiviCRM Custom field

Leaftlet is an open-source JavaScript Library for interactive mobile friendly maps. It only takes a few minutes to put your CiviCRM Contacts on a Leaflet Map if you're using Drupal.

Here are some of my slides from my CiviCON 2016 lightning talk:

EDIT: Some additional notes based on comments below and some questions emailed to me:

  • To get started with CiviCRM - Drupal integration make sure you have CMS integration set up Administer: civicrm/admin/setting/uf?reset=1
  • add a filter to not bother w/ non-geocoded addresses: Filter Criteria: CiviCRM Address: Latitude (not empty)

EDIT: for this example I used: drush pm-list --type=Module --no core --status=enabled (and relevant...)

CiviCRM CiviCRM (civicrm) 4.6.18
Other IP Geolocation Views & Maps (ip_geoloc) 7.x-1.28
Other Leaflet (leaflet) 7.x-1.3
Other Leaflet Markercluster (leaflet_markercluster) 7.x-1.2
Other Libraries (libraries) 7.x-2.2
Views Views (views) 7.x-3.14

Don't forget Leaflet module requires you to install leaflet library in /libraries (either your sites/all/libraries or your specific site's /libraries).

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

UPDATE: now requires this patch for ip_geolocate module -> https://www.drupal.org/files/issues/ip_geoloc_plugin_style.inc_.patch

  • nice suggestion - have used Views and OpenLayers in past. thought I should try this out ;-) ..... not clear if leaflet_views was required (which required geofield). currently just getting white page instead of map. tested on same site with Leaflet map based on content and had no issues. will come back to this some other time
    – petednz - fuzion
    Jul 10 '16 at 19:03
  • hey Pete - leaflet_views is not required (is disabled; I just double checked) - did you hook up the CiviCRM Lat and Lon fields in Settings -> Map (Leaflet API) (5th slide from the top)? Jul 10 '16 at 19:52
  • yep - i did that. only went back to leaflet-views when i got nowhere, so good to know it wasn't required. it obviously was when i wanted to do a drupal content only version of the map to check it wasn't something else like ht auth blocking me etc
    – petednz - fuzion
    Jul 10 '16 at 22:29
  • and i had a 'page' view using same civi tables to ensure i did have data that 'should' be showing ;-)
    – petednz - fuzion
    Jul 10 '16 at 22:30
  • 1
    I'm also getting a blank page...
    – Yossi
    Jul 11 '16 at 6:23

Just to note that this stopped working around CIVICRM 4.7.19.

You need to apply the patch to Drupal IP_geoloc module here:


  • 2
    I just put my CiviCamp Calgary participants on a Leaflet map and I did not need this patch Apr 16 '18 at 17:08
  • I did the set up as per the answer above, and was hitting the same blank white screen that others reported in the previous comments. I went to drupal.org/node/2861393 and looked at reviews of the patch, and folks reporting success with it - being able to see maps using the Leaflet API. So, I installed it, and can now see mapped addresses using the Google API alternative, though still do not using the Leaflet API alternative. When I tried mapping a large number of addresses using the Google API alternative, I got the same white/blank screen, so scaled that down to 250 with success. Jun 7 '20 at 4:20
  • I used Karin's recipe and it worked with Google but not Leaflet. I then checked the correct leaflet js was added. The module checks for cdn.leafletjs.com/leaflet/v1.0.2/leaflet.zip - when I installed the js from this everything worked. Sep 3 '20 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.