Interactive Maps with CiviCRM Addresses
Showing locations on maps is an important feature for many modern websites. At Skvare, we specialize in building websites using open source Drupal and CiviCRM systems. So naturally, being able to use CiviCRM addresses within Drupal pages is a feature we are often asked to develop.
Enter the CiviCRM Entity Leaflet submodule for Drupal 8/9. This new addition in combination with the Leaflet module allows users to access and display their contacts’ address locations, geocoded using the geocoder extension, in fully customizable and easy to use Leaflet-based maps.
Neat! How do I configure my contacts?
To demonstrate, we’re going to use the superhero contacts we created last time in our CiviCRM Contacts in Drupal 8 blog. And we’re going to enable the geocoder extension, which will allow CiviCRM to automatically convert and record our addresses into latitude and longitude coordinates that online mapping systems use.
Quickly resaving our contacts will run the geocoder, and we’ll see a new icon “Map” appear next to our addresses, signifying that the latitude and longitude have been recorded.
Configuring the view
Now, to show our contact locations on a map we’re going to create a new view (I’ve called mine "Map - Heroes").
We’ll add the CiviCRM latitude and longitude fields and hide them. Then we’ll set the view format to “CiviCRM Entity Address Leaflet Map” and choose our latitude and longitude fields for the appropriate data sources in Format Settings.
Then we’ll add relationships to the CiviCRM contact AND contact ID. The latter is so we can access and use the coordinates with Leaflet.
We’re going to add several other fields, including:
- Contact Name
- CiviCRM Address
- Email and Phone number contact information
- Drupal Media icon/logo
And voila! We have a full-featured Leaflet map using a Drupal view, that we can show within a block or on its own page, using our contact addresses from CiviCRM.
We can see two locations didn’t geocode properly - and at the default (0, 0) center of the map. This is because the addresses we originally used were imaginary. So let’s quickly give them real addresses and see what happens.
There we go!
Customizing is easy, as it’s just a normal map now after all!
We can alter our map icons, add any additional fields from CiviCRM or Drupal and display them together, include filter options, or anything else we would from a normal Drupal map.
The best part is we’re using our CiviCRM addresses instead of the default Drupal address field, allowing us to continue creating smart groups, mailing lists, and everything else we’re used to with CiviCRM. And have a full-featured map, without having to replicate our addresses in Drupal.
Just for kicks, the last thing we’ll do is add a proximity filter and see what it gives us.
Excellent! Now we can find any locations within a certain distance of a given postal/zip code.
If you have any questions about mapping and locations using the CiviCRM Entity module, or have a specific use case you’d like to discuss, contact our expert team here at Skvare for a free consultation. We’d love to speak with you!
Up next!
In our next blog we will be using the CiviCRM Entity module to generate useful reports using views and data from collected contributions (donations, pledges, etc.). Stay tuned!
If there is a specific use case you would like to inquire about or explore, please feel free to bring it up in one of the upcoming open forum webinars!
For more information, you can read our CiviCRM Entity information page or visit the module homepage to review and install!