 So, hello everyone and thank you for coming to my presentation. My name is Rick DeBoer. I run a small Drupal shop here in Melbourne, which I do with a passion and for a living. But in my spare time I like to tinker with maps. This is a site building session, so there will be no coding, but there will be no laborious button pushing either. I want you to leave this room thinking, feeling inspired and thinking, I can do this. I'm going to go home and I'm going to build some of those beautiful maps and make my site a better place to visit. So, to entice you, I will show you a number of beautiful examples of map candy from across the world done in Drupal with the modules that you learn about in this session. So, to me maps are first of all beautiful things. Maps are strong visual elements that can really make your site shine. They draw attention. But also they make great navigational tools. They form alternatives to the drop-down menus whereby you have to laboriously go through and find what you want or a search box. We'll see an example of that in the next slide. And certainly maps are great analytical tools. Maps help you and your visitors and earth relationships that you didn't know existed amongst your data. And then finally, while Google was probably one of the first kits on the block, it's certainly no longer the only player in this solution space. I love this site to show as an example of the navigational aspect of maps. I like to do quite a few live sites, but this one tends to be down quite a bit which is unfortunate because it really illustrates very nicely what I'm talking about. So, this is like a news feed. The news articles are on the right. And you can select a country the normal way by using the menu bar at the top where it says World and you can go into Asia and then you go Far East and you go Afghanistan and you go, oh, no news. Okay, try again. World, Asia, Far East, Syria. No, no news. Why not use the map? The map has all the hotspots on it. Those coloured circles show the number of articles that are developing today in the last 24 hours, I think. And they will appear on the right. But then also, when you click on the right, the map will update and zoom in on where the article takes place. So, it's a shame that this site isn't up more because it really illustrates the power of map as a navigation tool very well. In terms of giving your sites a different look and feel other than the sort of standard Google look, there's a lovely site called Snazzy Maps. And what that is, I'm making this a bit bigger for you. So, this one is a standard Google look, right, except that Google tends to use the red markers and in this case the blue. But that's your standard now kind of boring Google look and feel. But the guys at Snazzy Maps have done is that they've collected contributions from lots of people who have done beautiful things with maps, all sorts of different canvases that you can use, there's literally hundreds for them. So, if you like one, you click on one, find a copy button here, click on that, copy to clipboard and to then use that on your site, you go to your view because most maps in Drupal are driven by views. Go to the settings section, find this little spot here, paste that in, apply and then hopefully when I save, suddenly I've given my map a completely different look. It's still the same Google map, but the same amount of detail, but someone has been arty with it to fit the theme of your site. So, it's a nice and quick way to give your maps a whole different look. So, I've just introduced the first map module. It's called IP Geolocation Views and Maps and it's certainly not the only one. As you can see here, Maps in Drupal is a bit of a jungle. Basically, there's three silos. The silo on the far left is the silo of modules that offer ways to store your latitude and longitude. You've got to have latitude and longitude to put a location on the map. The silo on the right are the three main map renders that we have. Everyone knows about Google, but there's also open layers. Most recently, Leaflet came on the market, which is a package that concentrates on mobile and being very light and nimble. Then in the middle, there's a section that usually involves views and an additional module that massages the results from views to make them suitable for maps. So, those modules do stuff like color code your markers based on maybe a content type or a taxonomy term. They prepare the contents for the marker balloon. If you click on a marker, you can often see a photograph of whatever that marker represents, some text, some links, etc. So, your task is to pick a module on the left, one in the middle and one on the right to make it all work. The problem is, you can't pick just any module from the left, but any module of the middle and any module of the right. There's more documentation on Drupal.org, but it took me quite a while to reach this stage, and this hasn't got even everything in it, but it ran out of space. So, if you ask me, Rick, I just want to get started on maps, cut the crap, give me something that I can work with, then I recommend this. This module in the middle there has the advantage that you can connect any of the modules on the left for coordinate storage with any of the three map renderers. So, you don't get locked in. It may be a very good solution if you are asked to create maps for a site that is already locked into one of the modules on the left, say, for storage, then you know you can accommodate that. You don't have to tell your client, you have to redo all your coordinate storage with this other module because I want to do maps this way, and that map module requires you change the latitude and longitude storage. So, in summary, this is my sort of easy maps data kit. I would pick Geofield for the latitude and longitude, also because it comes with a nice views plugin that allows you to do proximities, which is always cool. Then views, because, well, you can't void it. IP, geolocation views are maps, and then off the three, I have a slight preference for leaflet, but all players are good, Google is also good. They all deliver slightly different things, maybe, but anyway, you can pick and mix with this setup. Leaflet more maps is a module very much like snazzy maps in that it allows you to pick different canvases, so you can give your maps a completely different look by going to a different provider, go Esri, go Google, go Stamen, there's a dozen map box, there's a dozen providers out that you can all pick from. Leaflet more maps basically provides you a drop down of about 20 or so, and you can change that for every map, so you can have 20 different styles on the one side. Yeah, so I'm so bad with memory, so I have to put my reminder messages for myself into the slides. So, yeah, we're now going to show you a bit of the clustering, which hopefully here. So, just in case you have been living under a rock and wonder, well, this clustering stuff, why would I need that? There's your answer. It looks kind of funky, but say, I'm interested in the Chicago area. Okay, he's up here. No, that's Michigan. Okay, so I can zoom in, of course, and then I can pan a bit and then maybe zoom in a bit more. Look, it's laborious, right? This is a mess. I just told you that maps are great navigational tools, but you need something more to deal with this. And so, people have realized this years ago and have created plugins, often in JavaScript, to deal with lots of markers, and they're called clustering algorithms. This one's for Google. This one is for Leaflet. It's called Leaflet Marker Cluster, and it's a beautiful piece of work because it clusters those markers into centers, and when you click on a center, it zooms in and explodes into other smaller centers, and now I can actually easily navigate to Chicago or any area, any there. It all looks beautiful. However, there is still a bit of an issue. When you hover over a cluster, you get the outline of the population. That's useful information if it was kind of accurate. First of all, the outline is completely arbitrary. This clustering algorithm is based on pixel distance, and so it includes or excludes markers from a cluster at random, purely by distance. You get a cluster outline that cuts straight through the middle of Texas, Arkansas, Alabama, blah, blah, blah, and also cuts through the sea, suggesting that there was something happening in the sea. And we have seen the previous page, if this is a population of seagulls, then maybe it could be correct, but we saw the previous slide with all the markers. There were no markers in the sea, right? So for this outline to suggest that there's markers in the sea is a bit, yeah, not great. Because it's a completely arbitrary outline, yeah? It's because the outline is created using an algorithm called the convex hull, and a convex hull is a fantastic mathematical solution, but not for this problem. So recently another plug-in came out that builds on that and adds region awareness to all those clusters. And now every cluster that you see here is with respect to a state. So now we're talking about really meaningful data, right? So when it says he 237, I can be sure that it's 237 in Texas, not some in Texas, some in Alabama, and some in Mexico. Also, the outline is much tighter, so it more accurately reflects the real extent of the population. And of course, when you dig in, because the regions that it knows about form a hierarchy, so we go from country to state to suburb, that's reflected in those clusters. So going down to San Antonio, it's still talking at that point about Texas, but going down further it now says you're in San Antonio and these are the suburbs or post-codes of those suburbs, right? So that's region-aware clustering. And the great news is that you can do that yourself. It's not hard, you don't need code. And I'm going to show you some examples of Drupal sites that use this sort of technology. So this site is done by a Spanish company for European city projects. It's a project that displays smart cities. So they've got a number of programs that these cities can be involved with. On the left-hand side, you see them color-coded. So there's three types of markers, yellow, green, and orange. And they view clustering here as well. So in this case, the regions are countries, and then under the countries, there's probably a sub-level. So that one is the Netherlands, Germany. The thing to note here in particular is that thanks to the region awareness, these little countries like the Netherlands and Belgium and Luxembourg have a voice. If there was no region awareness, then those little countries, although they've got a significant population in terms of markers, they would be completely clobbered by the neighbors. They would swallow them up and you would not even know that there's something interesting happening in the Netherlands, Belgium, those smaller countries. That's a very, very useful application of clustering. What they've done here as well, that's not part of the standard Drupal set. They make further filtering through some custom JavaScript so I can drill into the commitments and the map updates accordingly as well. So that's quite a nice site to check out. The next one I really love because of the colors, but also because this developer realized that regions don't have to be on land, right? Nice one. They can be in the sea. The concept of region is completely abstract. A region is what you call what you want it to be. It doesn't have to be administrative areas. So I think we're having a little issue with the internet. Okay, the tiles don't come up. But basically, it's the same concept except it's in the sea, right? So you have your clusters, you hover over them, you go to the next level in the hierarchy. We're now at the mid-Atlantic range, dig a bit deeper, and we get the subregions of the Atlantic range and so forth. So, yeah, sorry that, ooh, finally. So as you zoom out, you see the clusters form. The last one is a tourism site in South Africa. And this site makes use of geolocation that you have available on your mobile phone. So every mobile phone these days is equipped with both Wi-Fi and GPS to accurately identify you. And you can do that here by clicking the Find Me button. But of course, it would put us in Australia, and this site is about South Africa, so we won't see much. So as an alternative, you can type in a location here that you want to go to, and hit Go. And it will place that red position marker, which is kind of you visiting that area on the map, and shows you all the places where you can sleep, drink, and explore around it. And this one also features the region-aware clustering. So Joe's Muscle Bay and the individual suburbs, et cetera. Click on a marker, you get a photograph and a link to more details of that particular place. Okay, so we've gone through clustering. We've gone through region-aware clustering. Now that we've got our markers grouped into meaningful areas, can we now do something with that? Like apply key performance indicators relevant to the site. An example is real estate prices. If you're like me and you came to Melbourne 20 years ago and you decide that you want to stay, you're interested in renting or buying where are the affordable suburbs? Where are the suburbs that are close to the beach? How far do I have to move away from my ideal area before prices become affordable? It would be great if all of that was put on a map. With the map showing for each suburb what the average house price is. So I've created a demo around there, except that I'm not using real estate prices. I'm using something much more important in Melbourne and that's the price of coffee. So there's me on my bicycle. Maybe one day it will be a Ferrari, but for now a rusty, rusty old bike will do. So this site also uses that GPS locator that is on every phone and available through this module. So it's identified me as at 51 Clarence Street South Bank, which is where we are now. And already I can see one coffee shop in the area. And the coffee there is $4.50, which is pretty expensive. And that's why it's colored red. So all the markers are color coded by price range. So I may have to hop on my bike and go a bit further, zoom out a bit, and see if there's cheaper coffees around. And there are. So there's a green one popping up all the way on the right there. I think that's IKEA, $2.50 for a bottomless coffee. I mean, who can compete with that? And here in the center there's a cluster in the CBD. So we've got two numbers now. The top number is the count as before. So that's the number of coffee shops in that outline. But the second number is the price, the average price of the coffee shops in that area. And it's $4.50, it's still quite expensive, so that's why it's in red. As I zoom out further, maybe I should make this a bit bigger, it's a bit more attractive. The cluster start to form, but remember they are region bound, they are region aware. So now we get some interesting pictures because the regions that I chose here, they could be suburbs, right? They could be postcodes, but I've gone for something else. I've just simply gone for north, south, east, west because as I said, regions are abstract. A region is whatever you want it to be. So if I now look here, this is the area north and it's yellow. So it's not the cheapest coffee, but still good value at $3.64. Cheaper at the east and the center, pretty expensive in the center in CBD. And don't go south for a coffee, it's hot pink, really expensive, but great Drupal conferences. There comes a point, as I zoom out further, that it doesn't make sense any longer to hold on to the regions at this level. You want to move to the city level at some point, right? Because as I'm zooming out, we're getting this bird's eye view of Australia. And so this is where it lets go of the regions at that level because it's not appropriate anymore. We're now talking cities. But the aggregation still works. So it's hard to see, but it actually says 31. So the population of coffee shops surveyed is 31 and the number below is 379. So that's the average price of coffee in Melbourne. This is just coffee shops, but think you're a manager of McDonald's Victoria, right? And you've got all this information about your franchises like this, like a boring table. Very hard to make sense of. But you put them on a map. And so you see here, let's say the average turnover of McDonald's shops, right? And I click on that now as a manager and I say, hey, these guys here, they've got really high turnover. What's happening there? Is it the weather? Is it the location? Or this one of these three, this one is the best. Why is that McDonald's doing so well? Maybe I should call up the manager and find out what his secret is. So the maps really help you find information that you didn't know existed. And then after you've spoken to that manager, he may give you some ideas that will work for most of your branches. And so you improve your business just by using maps as a way to elicit data. Okay. Yes, how are we going for time? Because... Sorry? Left. Oh, that's a lot. Okay. I thought that might be the case. So I prepared one more thing that has to do not directly with maps, but it does have to do with visualization and making apparent relationships in your data that are not immediately clear from a table like this. And so to get to that, I need to tell you a little bit of background. There are many charting packages already in Drupal, and so me and fellow developers really hesitated introducing a new one. But the fact was that for our problem, none of the existing solutions worked. And the use case was this. With views, you can create lots of plugins that present your views data in different kind of ways. In fact, you see two here right on the screen. One is a table, and the other is the map. You can also create, let's say, sort of a post-processor. And there's a module called views aggregator plus that does that. It basically does spreadsheety things. That's a terrible word. Like stuff that you can't do on the database. So that's why you let views do its thing, and then the results come back. You put it through this post-processor and it processes stuff. And then you want to plot that. But now we're hitting an architectural limit with views because you can have only one plugin at a time. So you can have the table or the map, but you can't go through the table or through a post-processor and then chart that. And this was the problem, and that's why we had to find the solution. And we found a solution, and then when we had that solution, then we realized that it's actually quite a generic solution. In fact, the solution we came up with works on any table on your screen, on your site. So you find a table on your site, and it could be a web form, and it could be views output, or it could be a table created by a content editor using a WYSIWYG. It doesn't matter. And when you find the table, oh, look, here's one. You hover over it, and you get this cog wheel, and it says insert chart from table. And you click on that, and there's your table. It couldn't be more easy. So what it's done here is it's taken the first column as the horizontal axis, so that's all our suburbs. And it found out that the second and third column is just the text, so it can't be plotted. And then it plots the third and the final column, which contain the coffee price and the distance. And because this table is sorted by distance, you see the red bars go up, and the coffee price goes up and down because it's in different suburbs. So I guess our task is to find a coffee shop that is one, has a short red bar because it's cheap. Because it's close, and then also a short blue bar because it's cheap. So maybe around there is a good point. Of course, now that we've got a table, we don't have to stick with that. You can configure the chart and say, I don't want columns. I want a smooth, interpreted line. I don't like those colors. I want olive, and I want orange, and okay, maybe you want it a bit bigger as well. So we had to save. And so there you go. So here we have on the one screen basically three ways to look at the data as a boring table, as a chart that allows you to see trends, very useful, and then as a map that allows you to see through its color coding, the geographic dispersion allows you to see lots of further relationships, especially with that aggregation on it as well and the color codes. I think I'm very close to the end of my presentation. I hope you feel inspired. I thank the organizers for having me and doing my story. As you travel back, please be aware that you can try this at home for sure. It requires no coding. Drop your tables. Raise your maps. Thank you very much. Questions? Address fields. Yeah. No, I've used, in Drupal, I do use address field, and you can combine that with a module called Geocoder, which will take the address as filled out to an external service like Google, like you said, and then Google comes back with the latitude and longitude. And most of the times that, for me, that has worked fine and it's free service. Yeah, so I haven't used Australia Post myself. Anyone here that used Australia Post that can help this gentleman? I've been too busy doing that. But this gentleman here may know something about that. Want to speak up, Peter? Peter, three X, which faces on the latest JavaScript library, and also on absolutely rewritten code pages. So that's the three-day version. The three X version. So why do you pick up? Well, I'm also working with Cloudy on Clio cluster, but there is just a few progress, so I'm not so sure it's usable. James? Yeah, I should have researched it a bit better. I remember I got this question two years ago in Sydney when I did a similar talk, and somebody stood up and said, because I have no idea, somebody stood up and said the fact that you have the table at the bottom goes somewhat towards accessibility. Whether it's enough, I don't know. Could anyone in the room comment on that? Great, there's your answer. Thanks very much. Aren't there lots of forms of color-blindness, though? Not just red-green? I didn't say I had the answer, but I did. And there's some things that get dropped on the map, and of course you can change the layout if you're confused. I was on the spot for a go-to pack last year, where we used panels with different shapes of pins with different numbers on them, so you can tell without looking at the color at all what kind of... So I know that Leaplet has the ability to go and change all that stuff, but I'm not sure how well it is going to be usable. Not yet. I guess I have to face up to the music at some point, but I haven't spent a lot of time on converting all of this to... I don't know of any movement of consolidating the storage methods. I have seen attempts to consolidate map modules, so those attempts seem to have stalled. I think the problem is that while maps have a lot of commonality, every provider also brings something special, and so when you try to generalize that, then you sort of end up with a lowest common denominator that doesn't have any of the bells and whistles that the individual ones have, so... I like to do that in part. You can't manage all that stuff, but you can do full maps. Yes, and you can already do that. So what you talk about is right, but what I would call in that slide sort of at the renderer level, and that's for them to sort out. Yes, but at the Drupal level in terms of the modules, that's what I was talking about in particular, because we've got so many modules, so why? And that has not so much to do with what you talk about. That's sort of the back end of it. That's more about lots of individuals, lots of developers all doing their own... There's distribution. Yeah, so we wrote a JavaScript plugin that takes the sort of the standard clustering plugin to the next level by adding the region awareness. So it's a pure JavaScript thing. It has nothing to do with Drupal by itself. But of course, like so many other JavaScript plugins, people write modules to incorporate that JavaScript, and that's what we've done. Okay, so the regions, that's an interesting question that sort of goes to the heart of the algorithm. Some people think like, okay, in order to tell whether a marker is within a region, I have to find the border of the region, right? So I need to have like a polygon of the region, and then I have to do a point in polygon to find out whether that marker... No, it's much simpler than that. The only information needed for inclusion within a region is a label on the marker that says, I am in North, right? And that's how inclusion is handled. You don't need to know the borders of the countries and the states and the cities and the streets and blah-de-blah in order to find out whether a marker is in a particular street, Serbia, and blah-de-blah, all you need to know or the marker needs to expose, basically, is to say I am in South Bank, which is in Melbourne, which is in Victoria, which is in Australia. So there you've got a region hierarchy of four, but it doesn't have to be four, you can have just two. Like with my coffee shops, I had Northeast, Southwest, and then I had Greater Melbourne, and that was it. Could have gone all the way up to the top of Australia if I wanted, which was done for some of the other maps. Okay, so it depends a bit, but experimental evidence says that because of the animation, sorry, because of the clustering is done on the JavaScript side, and you need to push all that information to the client side that about 5,000 markers after that it sort of starts to break down. And the way to counteract that is to use filtering in your views query, in particular, of course, distance. So you find that the database query is not the thing that takes all the time. It's pretty efficient to say, give me all the markers within 100 kilometres, and that way you can reduce your set, which was maybe 50,000 to just a few thousand that are within a range of 100 kilometres, and then it works well. All done.