Easily Create Maps in Drupal with Leaflet [May 1, 2014]
Easily Create Maps in Drupal with Leaflet [May 1, 2014]
Want to learn more about Acquia’s products, services, and happenings in the Drupal Community? Visit our site: http://bit.ly/yLaHO5.
Join Amber Matz, as she walks through the process of adding a map to your Drupal site using Geofield and Leaflet. In this webinar, you'll learn:
• How to use Geofield to store location data in Drupal 7
• How to display a single location marker on a map using Leaflet
• How to use Views to create a map of many locations
Moderator: Webinar, Easily Create Maps in Drupal with Leaflet, with guest presenter Amber Matz who’s an educator at Drupalize.Me. Amber, thank you so much for taking time out of your day to present to us.
Amber Matz: Alright. Hi, everybody. Thank you for joining us at the webinar today. I’m Amber Matz. Up until recently, I was Amber Himes and you can find me on Twitter attwitter.com/amberhimes. I work for Lullabot and I’m a trainer for Drupalize.Me. In this webinar, I’ll be taking you through how to easily create maps in Drupal with Leaflet. For you Drupalize.Me subscribers out there, I have just released a video series on this very topic and the first three videos in the series are now available. If you’re not already a subscriber, you can find out more about the mapping with Leaflet series and becoming a subscriber to Drupalize.Me by visiting a special page for attendees of this webinar at lb.cm/acquia-leaflet, which is a shortened URL that will re-direct you to a page on the Drupalize.Me website.
Before I dive into Leaflet, let me give you a brief overview of how mapping solutions can be implemented in Drupal. There are two things that you need to implement a mapping solution in Drupal. The first is a location storage module. This is the module that is in charge of collecting, storing and at the very least, providing a basic display of that data. So what that means is that by choosing a location storage module, you are choosing on the backend a particular data table structure; on the administrative side, you are choosing a way or a set of ways to enter in location data; and you’re also choosing, if the module provides it, a field formatter. It’s really nice if a field formatter is included so that you can configure how that data is displayed, at least on a default basic level. The second thing that you need is the mapping module itself. This is the module that is responsible for configuring and displaying the actual map and a map being a set of layers that can be configured to convey geographic information about a location. That can be a very simple implementation to a very complex, interactive implementation. The modules differ in which set of base layers are made available, the user interface controls, the markers and most importantly, which API or web service they’re using to render the actual map. Depending on your choice of a mapping module, you may get locked in to a terms of service that doesn’t scale to the needs of your application or has implications for a site migration. So that’s why it’s important to really decide and make a good decision about which location storage module and which mapping library you’re going to use. So how do you know what to choose? Well, fortunately, there’s a documentation page on drupal.org that provides a comparison of mapping modules in Drupal and that page is drupal.org/node/170948. I’m going to go ahead and open that up.
If I scroll down to this table down here, just keep in mind that this page is marked as “Needs Updating” so take the information with a grain of salt. In the first two rows here, we’ve got the mapping module and then we have the supportive location storage module. Here’s Leaflet over here and as you can see, Leaflet requires Geofield as the location storage module. As you can also see, Geofield is a pretty popular choice for a location storage module. So, if you are just getting started with mapping in Drupal, Leaflet is a great place to start because you can use Geofield as your location storage module and it’s supported by open layers, IP Geolocation views and maps, and those to other modules will even support Leaflet maps. So, this is a great jumping off point if you’ve been reluctant to get into mapping or you’ve been intimidated by just the sheer volume of options and configuration that are provided in the other modules. Leaflet is a great place to start with the mapping module because it uses Geofield and you can always swap out this mapping module later. Alright.
So, Geofield. What is Geofield? Geofield is a location storage module. It provides a new field type that we can add to a content type called Geofield and it also provides widgets for entering many types of geospatial data. It also has some field formatters so it can provide a basic display of a variety of geographic formats.
Leaflet is a couple of different things. So when I say Leaflet, I’m meaning the lightweight mobile-friendly java script mapping library at leafletjs.com. It’s also a Drupal contrib module that provides immigration with the java script library as well as a field formatter and the developer API and even a sub-module that provides the views integration. That’s what I mean by Leaflet. So the first thing that we need to do to get a Leaflet module - or to get a Leaflet map on our Drupal site is to install Geofield module. So to install Geofield, we would do this in the normal way of installing a module. We would need to download Geofield and its dependencies which are GeoPHP and CTools from drupal.org. You will need to enable these three modules and I prefer using Drush to enable modules. It comes particularly handy because in the documentation for Geofield, it only lets GeoPHP as a dependency and if you use Drush, you’ll find that CTools is also a dependency. So it’s just a nice way to find those hidden dependencies that may not be documented. So to use Drush to enable Geofield, I would type “drush en geofield”. This would prompt me to download Geofield and its dependencies if it wasn’t already on my site and then it would enable them in turn. So a little tip, if you are not quite familiar with Drush, you can also download and enable these modules through FTP and using the administrative UI.
Alright, so I already have Geofield installed on my site and now I’m ready to add a Geofield. So, I’m going to hop over to my example site and I’ll navigate to structure, content type. I’m going to add a new contact type and I’ll just call it “Location Demo” and save. I’ll go into manage field now and now if you’ll notice in this field type column, if I drop down this list, before I enabled Geofield, I wouldn’t have had those options but now that I’ve enabled Geofield and its dependencies, I have a new field type called Geofield. So I’m going to select that and give my location field a name. I’ll just choose a widget here, there are four different choices and these widgets can change if there are other modules that can extend this. I’ll just latitude and longitude and save. Since I already have the demo, I’ll just add a new field type there. There we go.
Okay, so the first field setting is the storage backend and there’s only one choice, so you can see that this is scalable. If you want to add a different storage backend, you can. I’m just going to save this field setting. For this field, I could make it required, I could add some help tags which is always a good idea. You can also check this box to use the HTML5 Geolocation feature to set default values and that’s that saying where you’re browsing the internet and a website asks for your location, it’s asking permission, “Do you want to share a location with this website?”, that’s what that feature is all about. So, you can turn that on and you can nag your users for their location. So that’s what that option is about. You can also provide a default latitude and longitude. Number of values, kind of the usual field setting. So go ahead and save these settings keeping all the defaults and now we’re ready to add a new piece of content using our location demo content type. Go ahead and add content and I’m going to use my location demo content type. Let’s just use the Austin Convention Center which is the home of this year’s North American DrupalCon. As you can see, it just says I’ve updated my content type and added a Geofield content type and I’m using this widget, latitude and longitude. I now have the set of fields, actually, that is asking for the latitude and longitude. I don’t need to worry about the display of the latitude and longitude at this point. I just need to enter in the numbers here and the field formatter, which we’ll get to in a moment, will take care of how that data is actually displayed.
So I’m going to pop over to maps.google.com and I’ve searched for the Austin Convention Center. Even though it’s not giving me the latitude and longitude and those coordinates just yet, I’ve found that if I just click kind of near the marker, I’m still on the location but I’m not on the marker and Google will give me the latitude and longitude. So that’s a little trick I’ve learned. I’m going to copy this information. The first number is going to be the latitude and the second number is going to the longitude. I’ll copy the first number here, including all the decimal points and I’ll paste that into the latitude. Then I’ll go back and I’m going to copy the second number including the negative sign, all the decimal points and I’ll paste that into the longitude and I’ll save that. Now, what I get is the location and it’s formatted in this way: all caps, points with a parenthesis and even has the longitude first and the latitude.
How do I configure this information here, that’s in our manage display. So if I go back to structure, and content type and I manage to lift the display here of my field, I can see all of the different formats that I could display this data. So I’ve got a location point that I entered using a latitude and longitude widget but I can display it in any number of ways. I will try the latitude and longitude and then this little gear up here and I can further refine the settings of the latitude and longitude. If you don’t understand all of these terms, just use the defaults. These mapping solutions, they really scale - You can do a basic implementation to a really advanced one. So there’s lots of options and a lot of these, I’m not familiar with all of the technical geographic terms, but just by using the defaults, you can get pretty far and just get a map on your page.
The format, I’m going to change this to the degrees, minutes, seconds, just for fun. I’ll click update and then save. Now, if I go to my content page, using my location demo, that latitude and longitude that I entered is now displayed in degrees, minutes, and seconds. Geofield just out of the box will provide a way for you to enter in your geographic data and some options for displaying it. Now, how do we turn this into a map? Let’s go. We just added our new location so we’ll need to now install Leaflet.
The instructions for installing Leaflet, you can find on the project page for drupal.org, so I’m going to go there now. I’ll just use the documentation page. Just to give you an idea of how to navigate around the documentation for Leaflet, if you’d go to the project page for Leaflet on drupal.org/project/Leaflet, you can find some basic information about the module. You can also find the recommended releases. You’ll notice that they’ve started developing a version for Drupal 8. This is also a great choice if you’re looking to scale up to Drupal 8. Build it out in Drupal 7 and then play around with the Drupal 8 version. There’s just a really good possibility that you’ll be able to more easily migrate to Drupal 8 when you want to, when you’re ready to, and when Drupal 8 is ready.
On this Leaflet project page, what we find is that there’s a link to this documentation because this is pretty slim information, there’s not a lot here. There is the issue queue here but if I go over to this documentation page, this is going to provide the meat of the information about this module. So, it provides integration with Leaflet and it lists out the supported number of extension modules that will extend the capabilities of Leaflet, also, some information about the required and recommended modules. So we’re going to need Libraries and CTools and when we get to the Leaflet views sub-module which is included in the Leaflet project, we’ll also need entity. Geofield is the preferred module for storing geographic data like we’ve already mentioned and there’s also some great integration possible with Address Field and Geocoder which I go into in my video series. Also, there’s Views and Token Support. Just out of the box, this is what you need, these are some of the required and recommended modules.
The first thing that we’ll need if you’re familiar with Libraries at all, this is a way for you to integrate with a Java Script Library or other type of Library. We would need to download that from the Leaflet.js.com page. So you could click on the download navigation menu item and you’ll want to download the latest stable version which, right now, is Leaflet 0.7.2. You want to download that to your sites/all/libraries folder. I’ve already downloaded this to sites/all/libraries and when you download the zip file and expand it, you’ll want to rename the folder to just “Leaflet”. So it’ll have the version name and the numbers and everything. You want to rename that to Leaflet so that this Leaflet.js file, attached to it is sites/all/libraries/Leaflet. You’ll need these other files as well, but that’s kind of your gauge, like “Did I do this right? Leave it on the right place?” Well, it’s the path to Leaflet.js/sites/all/libraries/Leaflet. I’ve got that already installed.
The next thing that I need to do is I need to download and enable the Leaflet Drupal module and its dependencies. The Drupal module will integrate with - it’ll bring in the java script library, it also provides the field formatter and the API, et cetera, and the Leaflet view sub-module. So I’ve downloaded and enabled Leaflet on my Drupal site, I’ve installed the Leaflet.js to sites/all/libraries, and now I’m ready to make my first Leaflet map. What we’re going to do is, Leaflet module provides a field formatter so what that means is I can go into manage display’ on my content type and choose Leaflet from the formatting type on my content type. So I’m going to update the format to Leaflet and I’m going to choose a map. Let me go ahead and show you how that’s done. I’ll go ahead and go back to my site and I’ll navigate to structure, content type, and I’ll manage display for my location demo. Now, here’s my field that I’ve added using that Geofield type. Right now, the format is latitude and longitude. Since I’ve enabled Leaflet, now I can choose Leaflet as the format of my data. So even though I’ve entered in a latitude and longitude, I want to display it as Leaflet. You’ll notice that right here, it says, “Leaflet map:” and it’s blank. We need to click on this gear and we need to select a map. Out of the box, one map is provided, OpenStreetMap Mapnik, so I need to select that. This is the one thing you need to do when you first start. To select the map, there are a number of other options that you can configure, but right now, let’s just see how this looks just by selecting a map. I’ll click update and then save. I’m going to go back to my content that I created. Now, instead of that, degrees, minutes, seconds, latitude and longitude, it’s displaying a marker on a map. A map that functions using the control and you can see that down in the corner here, it tells me this is using Leaflet and it tells me which map I’m using which will come into play in a little bit when we install more maps.
I’m going to talk here. What if your Leaflet map didn’t display? This can happen and there’s a couple of tips that I want to give you for trouble shooting if your Leaflet map didn’t show up, if there is like a gray box, or something just didn’t happen correctly. There are a few things you could do; First, you can check the status report page to make sure Leaflet is installed correctly. How you do that is go to reports, and status report, and here is Leaflet right here. It says the version of Leaflet and that it’s installed correctly. If it was not installed correctly, this would be red. There would be a big red X icon right here and it would give you the error message. When I was first playing around with Leaflet, my map didn’t display properly and I had a big red X here. I looked in issue queue for my error message and there was an error message, it’s the same error message in the issue queue but it had been resolved. The patch had been provided and I was using the fixed version and so I couldn’t figure out what was going on. It ended up being that when I expanded my zip file, my leafletjs.zip that I downloaded from here, when I downloaded this and expanded it using Mavericks, using my Mac, it didn’t set the permissions correctly and my webserver couldn’t actually read these files. So I needed to change the permissions of that directory to 755 and then the webserver on my local machine was happy and it could actually read and execute the files on this file. So there, it can be a permissions problem, it can be a bug. So I would say check the permissions of your site as well as libraries, Leaflet folder, especially if you’re using your operating system’s UI to expand the files, and check the Leaflet issue queue if you’ve got an error that’s just persisting. You could always ask in there.
The other thing that I noticed is that if you’re not connected to the internet, like maybe you’re working on the plane or something - I don’t know, and the tiles aren’t displaying. If you inspect the element, the map tile, you’ll notice that the OpenStreetMap tiles are externally hosted so it’s calling an external site to actually display those images. They’re not locally hosted on your machine. I mean that would be massive to host all of those tiles with the whole entire world in various zoom levels on your site. That would be crazy and not something that I want to do on my laptop. So you’d need to make sure that you’re connected to the internet. So those are some troubleshooting tips if you’re Leaflet map didn’t display. Using the field formatter in manage display isn’t the only way to display a map. Also, that map is only going to display the one point of the location we entered for that particular node. So what if you want a map of multiple locations? Well, we can use views. So just like you used views to create a list of your content, you can use views to create maps using Leaflet. The first thing that we’ll need to do is enable the Leaflet views module and this is a sub-module that comes with the Leaflet project. You would just need to enable this sub-module, leaflet_views, or you can go into the module UI and enable it. You’ll need the views UI enabled as well. If you don’t have views already downloaded, you’ll need to do that and enable the views UI. You also need to download the dependencies if you haven’t already which are Views and Entity. Once you have all of that downloaded and enabled, we can create a new view. Let’s go ahead and do that. I’ll go over here to structure, views, and I’m going to add a new view. I’ll make this a map of all locations. I’m going to show content of type and I’m going to use actually my location content type that I’ve created previously because I’ve added some demo-content to it already. I’m going to use that, but you’ll want to use the content type that has your Geofield on it. I’m going to create a page of a map of all locations and kind of simplify the path here to just say “Map”. Here’s the key area, the display format. Instead of an unformatted list, I can choose Leaflet map because I have the Leaflet views module displayed. I’ll go ahead and create a menu link to make this a little easier to navigate to. I’ll add that to the main menu and I’ll just change this Link text to be “Map”. I need to continue and edit, we’re not quite done yet. So now we have an unsaved view, we’re given the Leaflet Map settings. Just so you know, the preview isn’t going to work for you. How do you know what to do next? Well, if I click on the Settings link next to Leaflet Map, this will give me a clue. It says, “Please add at least one geofield to the view.” So now I know what to do. I can go to Fields and if I open up my content type, I would like to keep my content type manage field tab open when I’m building a view so that I’d know for sure what fields I need to add. I need to add the field that is using the Geofield field type and that’s my field_location. I’ll go back here and now I can add my field and I’ll just do a search for a location. I want to use the one that’s in my node location content type and now I’ve got two here and I’ll apply all displays. All I need to do to this field is exclude it from the display. I don’t need to mess with anything else. I’m just going to check “Exclude From Display” and “Apply (all displays)”. Now, I have the location at field which is my Geofield added to my view. Now, when I click on Settings, I’ve got some options. Hurrah. So the data source is my Geofield and now I can choose for the little pop-up window that’s going to show up when I click on my marker, I can choose a title field. So I’ll go ahead and just use my node Title Field and for the description content, there are a few options. I can choose the title or the location, but a better option is to use this node entity, so the angle bracket node entity. Then you can choose a view mode so you can then use your teaser or if you’ve got another custom view mode that you want to use, that you’ve – this isn’t quite configured for this display, then you could use that. I’m going to use the teaser there. What this is going to do is it’s going to display the teaser in the description area of the pop up window and I’ll show you that in a moment. We’ve got the rest of our settings that we had on our field formatter when we managed the display of this field in the content type section so the same settings are applying here. I can choose my map. The nice thing about this one is that the map is already selected by default. Now I’ll click “Apply (all displays)”. Now, I’ve got my Leaflet map, I have no idea if it works yet. As soon as we’ve added it as a path, we’ve added a path to map. I’m going to save that and I’m going to go home, and I’ve got a nice menu item here. Now, I can see my map of all locations. So this is displaying the three nodes that I’ve created using that content type and I’ve got a map of multiple locations. So you can see that Leaflet out of the box with the Leaflet Views Module, you can display a map using one location, using the field formatter. If that’s all you need, then it’s super easy to do. You can see that it’s also really straightforward to create a map with views of multiple locations.
You could also add exposed filters to your views and add some different interactivity. So if you had taxonomy fields on your content type and you wanted to enable your users to filter by those, just use that knowledge that you have about views and what kind of functionality and UI that you want to provide to your users and think about what you want to provide for your map and you can add that to your view and have that interactivity. So it will filter the markers just like it would filter a list. So just think in terms of instead of like a list of teasers, you’re getting a group of map markers. It’s really cool to be able to create a map of multiple locations using views because many of us are really familiar with views, we’re comfortable with it, we know how to make lists of content, we know how to add relationships and exposed filters and that sort of thing. So, to be able to create a map using views, we’re familiar with that UI so it makes it a little more straightforward, especially if you actually are familiar with views.
So what other things can you do to your Leaflet Map? One of the things you can do, is you can replace that little blue marker with an image of your choice. If you browse around the internet, you’ll find there are quite a number of free libraries of marker images if you’re no good with drawing on the computer - and I’m no good at drawing on the computer. There are plenty of options out there for marker images. You’d just want to make sure it’s appropriately sized. Then we’ll update the point icon in the Leaflet Map settings. What I’ve decided to do is I want to change the map marker from the blue marker to the druplicon icon. So I’ve saved in my sites/default/files and I created a new folder called “map_icon” and I’ve save this little druplicon_marker.png. I downloaded that from Drupal.Org and you can see it’s just this tiny little druplicon marker here. What I need to do is go back to my site. First, I will change it on one of these nodes here that I’ve created, so I’ll use the field formatter. I’m going to go into structure, content types and I will view - I can’t remember which content I’ve created. [Laughter] I’ll just manage the display of this one, how about this? I need to go into Manage Display and for my Location Field, I need to click the gears here and now we can find the settings, so I’m going to expand the Point Icon. I’ve got a couple of different options here and I’m going to demonstrate the Icon File Option. So all I need to do is provide a URL to the path to my image. I’m going to go into Terminal here and I think it’s in this directory. I’m just going to copy. I’ve got it saved in sites/default/files/map_icons. I’m going to include this initial flash. I noticed that if I don’t do that, it doesn’t work so good. So I’m making an absolute path and I’m going to copy my file name because I keep misspelling druplicon and I don’t want to do that. So now I’ve got an initial flash and I’ve got the path to my PNG file that I’ve re-sized down from the druplicon logo that’s provided on Drupal.org. I’ve got it sized down and there are other options I can do, but I’m just going to keep the default and click “Update” and “Save”. I’m going to load up a location node and now instead of that blue marker, I’ve got the druplicon as my marker. Now, if I want to do this on my view, it’s basically the same process. I’m going to go ahead and copy that path and file name so I have it in my clipboard. I’m going to copy this, I’m going to go back home and click on the map. If I hover over my map here which is actually a view, I’ll get my gear. If I’m logged in, then I can edit my view from there. Under Format and Leaflet Map, I’m going to click “Setting” and then a very familiar looking settings, I’ll just expand the point icon and I’m going to make sure that Icon File is selected as my icon source. Then I’ll paste in that path into the icon URL which is the path to my marker image and I’ll Apply (all displays). Now, if I save this view, instead of the blue markers, I’ve got the druplicon as my marker. So that’s how you can add a custom marker and you can change the icon of your marker using Leaflet in a very basic way. There are other options there, but that’s the most straightforward and basic way to change that marker image.
Moderator: What else can you do? [Pause]
Amber Matz: You can add more maps. So there is a great module out there called Leaflet More Maps and that’s at drupal.org/project/leaflet_more_maps. It is the greatest module name ever because it does exactly what it says it does. It provides more maps for Leaflet and it provides over 20 different maps from a variety of providers. OpenStreetMap, Esri, even Google Maps are in here. So, Bing, MapBox, Stamen, MapQuest, and a bunch of different ones. So you can see the licensing terms which, this is the main reason for changing out the map. It’s if these terms of service and licensing don’t fit with what needs to happen on your website, then it good you have a choice here and you can find a map with a licensing term that works for your organization, it doesn’t conflict with what you need to do. I need to enable Leaflet More Maps. So I’ll type “drush en leaflet_more_maps” and now Leaflet More Maps is enabled on my site. So I’m going to go back to my structure here and my content type and I’m going to go back into the Manage Display and back into the gear settings to find my Leaflet settings. Now, when I drop down this Leaflet Map Setting, I get a list of a bunch of new maps. What you’ll notice is that you’ve got the name of the map and then right next to it, it shows the zoom setting. So these maps are a series of tiles that render at different zoom levels. Not all maps will provide all the zoom levels so like Esri Ocean, its zoom level is zero to ten. Most of them are going to be zero to eighteen but you can see that there are some slight differences so you want to just keep that in mind. So if I choose the Stamen Water Color Maps and click Update and save, and if I go to a location node, now, instead of the OpenStreetMap, I have this very interesting and lovely water color map displaying. You can see here’s the tile Copyright Information. Not only can you tell visually but you can tell in the Copyright Information and you can go to the terms of service there. So that’s how you would change on your field formatter and it’s the same process on your view. So we go into the view, we edit the setting, and now we can choose a map. So I could choose just like a Google Road Map and apply all the settings. Now, I’ve got a Google Map, a Google Road Map instead of my OpenStreetMap on my view. So you can have a different set of settings for your view and your nodes. So those are two sets of settings, if you change one, it’s not going to change the other. So if you’ve got both things going on, you need to change it in both places. Excuse me. That’s how you would add more maps.
Another thing that you can do and that I’ve kind of alluded to already is that you can change the zoom settings. Zoom settings are - alright, what happens here when you hit the plus and minus sign? You can set the initial zoom level. So maybe your website is targeting people who are not familiar with where Austin is so you want to give them a little bit more of a context. So maybe you want your initial zoom level to be something like this. “Yes, I recognize the United States. I can see that Austin is in the state of Texas, in the southeast area of Texas.” So maybe you want to set your zoom level to be a little more zoomed out to give people a little bit more context. If your audience was just a bunch of locals and people who are like in downtown Austin and they already know where they are at, maybe you want your initial zoom level to be really close and a detailed view where you can see, “Okay, it’s on this side of the river. It’s near the downtown area and it’s west of the 35 and so forth.” So you want to consider your audience and what you’re trying to communicate with your map when you set your zoom level. You also want to consider which map you’re using and what zoom levels are available on your map. So for example, if I go back to my view here and go into settings, I can see that the Google Map has all the zoom levels from 0 to 18, but if I chose something else like – I don’t know. How about this? No, I’ll just choose this MapBox Warden one. It has a zoom level to 18 so then I can go into my zoom level. You’ll want to adjust the zoom level to map what’s available for this map and you can use the map defined settings if you just don’t want to mess with the numbers of it and it’ll just use the default that is included with that map but if you want to customize it, the lower number means it’s far away and the higher the number, the more zoomed in it is. So if I wanted to do a real zoomed in map, I could choose like 12 as my initial zoom level for when that page first loads. Then I like to just set the map-defined settings here but you could constrain this if you wanted. Let’s just make it 16. So now, we’re within our zoom levels here. That’s the one thing you want to keep in mind so that you’re not shooting yourself in the foot there, make sure you’re within the parameters that are provided for your map. Then you need to Apply (all displays) and save your view. Now, we’ve got our initial zoom level and it only lets you zoom in and zoom out to the levels you defined in your setting. That’s how you can very simply change some settings and customize your map, just using the out of the box settings for Leaflet. The other thing that you can do is you can use tokens in your pop up text. So this is especially useful if you’re not using views.
Let’s go load up one of these nodes here that’s using our location content type. So right now, when I click on this marker, nothing happens, there are no pop-ups enabled like there was in Views. You could see that with Views, you could really control that a lot better but you can do some basic formatting here on that pop-up text and how you do that is you go to Structure, Content Types, back into Manage Display and I’m going to go back into my settings here and there are two things you need to do. First, you need to enable a Token Module so that you actually have some Tokens here, and the second thing you need to do is you need to enable the pop-up. So it wasn’t even enabled at first. You can enter in some static text or you can enter in a token. So I’ll go ahead and expand this node field set and I’m going to look for the title of my node. So here it there, I’m going to copy this token including the square bracket so the whole thing here. I can either copy and paste it or if my cursor is in this pop-up text, I can just click it and it will populate the pop-up text. So now I’ve got my token for my title of my piece of content in the pop-up text. I’ll click update and save. Now, if I go to one of these nodes and click on my marker, I’ve got a pop-up text that has the title of the node. You can see that this marker pointer is kind of off [Laughter] so the thing that you can do is you can adjust the XY location of that marker by going into your settings again and this point icon, you can say where the pop up anchor is so you could change, you could mess around with the XY location to try and get that pop-up anchor a little closer to the actual marker so it’s not covering it up. So that’s how you would do that. That’s where you would need to adjust this pop-up anchor point.
Alright, so that is my big “tada”. That is a basic overview of what you can do just out of the box of Leaflet to get a Leaflet Map on your Drupal Site. You can use Leaflet to display a map of one location using just the field formatter in the Manage Display setting or you can enable the Leaflet Views Module and create a map of many locations. If you want to find out more about what you can do with Leaflet and mapping on your Drupal Site, check out my video series available on Drupalize.Me and it’s an extended and a little bit more in-depth version of this presentation. The first three videos are now available. You can also go to lb.cn/aquia-leaflets. This is a special page just for attendees of this webinar. You can find the slides linked to some of the resources that I mentioned in this webinar and some other information that you may find useful and interesting. I think I will send it back to Hannah and see if there are any questions.
Moderator: Yes, great. We had a couple of questions come in. The first one is, “Is there a complete programming for integrating a picture album or a picture GPS information? Can you implement on top of Google Earth KMZ files?”
Amber Matz: Some of these questions, I’m not too sure about.
Amber Matz: Yes. The Google Earth, I’m not sure about that if that’s included in the Leaflet More Maps. Let me just top this down. The Google versions are the High Res road and terrain, the High Grid, the Road map, and the satellite. I’m just looking at this. It doesn’t look like Google Earth is selected. The question about the KMZ files, if I edit, if I look at the format here, it doesn’t – Look, I have seen support for it, and I just can’t remember off the top of my head what is supported with that. I have seen this around but I don’t know right now off the top of my head.
Moderator: No worries. We can all get questions answered after the fact and I can send you over the ones that weren’t answered. We can get somebody to answer them.
Amber Matz: Totally, yes.
Moderator: The next question is: Can you populate the map with dynamic icons? Could I have a classroom icon that could be programmatically placed on top of the map for the user?
Amber Matz: In terms of dynamic icons, there are a few different things that you can do. One of them is that if you’d go into the display settings here, if you look at the point icon, there’s also this icon source of field and you can actually set a class and you can have your markers be pure CSS and you can control the display of those markers using style sheets. The other module that I wanted to mention is the IP Geolocation Views and Maps and that module lets you, in the view UI, it lets you choose a differentiating marker so you if you have taxonomy field on your content type, you can say, “I want this turn to be a purple marker and this turn to be a yellow marker.” It provides some default markers but you can swap those markers out for whatever you want. So there are some UI options available, there are some CSS options available and I would recommend looking into the IP Geolocation Views and Maps just to poke around, just to have a UI to play around with, but Google is going to be your friend there as far as other dynamic options for markers.
Moderator: Awesome. The next question is, “Are the maps responsive?”
Amber Matz: The mapping interface is usable on a phone so you can tap on it and it will do things for you. Whether or not it’s responsive or not, you would need to implement that in your style sheet.
Moderator: Awesome, thank you. What about driving directions? Does the user get driving directions to a location through their typical method on a phone browser with a click through?
Amber Matz: The typical method is using the Google Maps API and that I did not look into with Leaflet. This is probably something that would require a little bit more advanced knowledge of Leaflet which – and I didn’t look into driving directions specifically. So there are several APIs that will let you use their data to do driving directions and I’m sure like Bing and Google are two of those. So yes. I’m not sure about that with Leaflet. I’ll look into that, though.
Moderator: Awesome. Are these maps local or stored on the web server?
Amber Matz: No, they are not. They’re all externally hosted and if you have a need to host these
yourself and for big mapping applications, there is that need sometimes. There are other services out there that provide hosting for map tiles like MapBox, I believe. The reason for that is that you’re talking about millions of images because it’s these tiled images that are there for each zoom level and sometimes there are 18 or 19 zoom levels. So, it’s really a big deal to host those images and not something you would want to take lightly or necessarily put on your local machine. I don’t even know if it would be feasible. So these Leaflet map tiles and the ones provided in Leaflet More Maps are all externally hosted.
Moderator: Alright, the next question is, “Do we pay anything for using the Leaflet API?”
Amber Matz: No, it’s all free. Also, you don’t have to do any kind of special sign up with the Google API to use the Google Map. So in other modules like Location Module, you have to enter in your Google API key, you don’t need to do that with Leaflet. If you want, you can use Leaflet and you could display Google Map and you don’t have to enter in your API key anymore.
Moderator: Awesome. The next question is, “Can you use multiple markers for different locations. For example, have one market for use in Alabama and another one for Texas?”
Amber Matz: I suppose you could. You would probably need to use a taxonomy for that or some other differentiator. Again, I would suggest looking into IP Geolocation or IP Geolocation Views and Maps to see. You could probably set the differentiator by your state. So let’s say you’ve got a field that is State and you could possibly set it up that way, you could set it up on individual nodes. It doesn’t really make sense to set a marker for each node. If you get any number of nodes, that would just be crazy to manage. Again, I would refer you to that IP Geolocation Views and Maps Module.
Moderator: Okay, the next question is, “How do you set up a field to show a ‘You Are Here Marker’?”
Amber Matz: You would need to enable the HTML5 Geolocation. So when we set up the initial fields here, if I manage my Geofield, I’m going to edit this. If I check this box, this is where I imagine this could take place. So the HTML5 Geolocation, it gives the browser access to your location, it’s the user-granted permission. That’s how you could say this is where you are, because you would set the default value to that location. I haven’t played around with this too much so this is my best guess, but that’s where you could get that information from the user.
Moderator: Alright, the next question is, “When several users are uploading nodes linked to maps, is it possible to show on a single map nation or state-wide range all user markers uploaded?”
Amber Matz: Yes, you would just need to use Views for that. Though I’m not sure about your specific implementation, but Views would be your friend on that.
Moderator: Okay, awesome. Can you tell how it’s possible, you can display a route on a map, walking, running, biking route? The route existing out of multiple Geolocation points?
Amber Matz: Again that’s something that’s something that’s something that’s been developed by some of these other APIs like Google Maps and my knowledge of mapping isn’t advanced enough to really be able to answer that question so I don’t know.
Moderator: Okay. Alright. The last question is, “How do you define the X and Y to get the right on place?”
Amber Matz: That’s a great question. What you need to do is open your file in Photoshop or some program that will show you where the X and Y point is of your cursor when you hover over the image. I open it in Photoshop and I open the info panel, and the navigator panel, and when I hover over the graphic, it shows me the X and Y coordinates. So then you could say, “Okay, the X coordinate is 14 and the Y coordinate is 17,” and then that’s what I would enter into my X and Y version. That kind of gives you a jumping off point, otherwise, you’re just guessing. So that would be my suggestion for that.
Moderator: Great. We had one last question just trickle in. Why would you choose Leaflet over Google Maps integration or the GMap Module?
Amber Matz: The GMap, let’s go back to this comparison chart here. The reason why I would choose GMap and the Location Module is if I had a Drupal 6 site that was using GMap and Location and I wanted to migrate to Drupal 7. It’s going to be hard enough to write that migration of all those location tables and I want to retain some sanity and feasibility and not blow my budget, so I’m going to just stick with GMap and Location. However, that’s almost entirely true because you could use IP Geolocation Views and Maps because it does support location at the storage module. Now, using Leaflet in Geofield, with Leaflet, you can display a Google Map using Leaflet. It’s a lighter weight module, the file is going to be smaller, it’s going to load quicker, it’s using Geofield at the location storage module which is very well-supported with these other modules and so it gives you upgrade path. It doesn’t lock you in like G Map and Location would lock you in. Even though you’re not completely locked in because of this module but that would be my reason why. I think each case is going to be different, right? I like the flexibility and the support that Geofield has and even though you’re using – in this demonstration, I used the Leaflet Module. You can display Leaflet, you can use the Leaflet Java Script library and some of these other modules like Open Layers or IP Geolocation Views and Maps. So you can use the Leaflet Java Script Library and these other modules. You can use Geofield in these other modules. If you’re just getting started with mapping, I’d recommend trying out Leaflet in Geofield because it’s a really easy ramp to get into mapping with Drupal.
Moderator: Alright, thank you so much Amber for answering all those questions. We’re running
out of time so I can send over questions that weren’t answered to Amber and we
can try to get some of them answered for you. Again, the slides and recording will
be posted to our website in the next 24 hours and we’ll also e-mail you out a copy.
Amber, would you like to end with anything else?
Amber Matz: No. Thank you all very much and I hope you enjoyed the presentation.
Moderator: Yes, thank you. Have a great afternoon, everyone.
- End of Recording -