Map Making With Leaflet.js

As the second part of a series of posts about a leadership model web site created for project managed at JIBC, this one is about some of the early interface explorations I dabbled with.

In the first post, I laid ground for the map metaphor for leadership, there would be three “regions” corresponding to the model’s areas of Personal, Relational, and Organizational Leadership. Within these regions, the site’s resources could be accessed via a map of recommended trails and off trail destinations to explore.

I looked first at d3.js which I used previously for the dynamic plotted representations for the Constellection prototype, which too was based on mapping resources from a WordPress site. But while I found in the project gallery many examples of putting data into basemaps (e.g. a bubble map) I did not see anything like a trail map or something with destinations and routes plotted dynamically.

I forget how I landed on looking at Leaflet.js, a powerful library for generating dynamic maps:

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

This is a relief to find an open source platform, especially considering how many projects I’ve had using Google Maps getting torqued by their putting a price on using their API.

The lights clicked on when I read the “Not of this Earth” Leaflet tutorial.

Sometimes, maps do not represent things on the surface of the earth and, as such, do not have a concept of geographical latitude and geographical longitude. Most times this refers to big scanned images, such as game maps.

While I was not doing things off earth, this demo showed me how map elements of locations and routes could be plotted on to any base map, like the fictitious land maps I had already been dabbling with.

I spent 2-3 weeks working on some prototype maps where I would add pins for the recommended resources as well as some dots and lines for the others. The content was mostly place holder, but I got it working with different colored pins for the 3 areas, pop up descriptors with links, and even getting into creating map layers that could be toggled on and off.

This was all meant to show conceptually what an interface could look with, and thinking the rather than the hard coded locations and data I put in manually, they could be dynamically generated from a WordPress site.

To make the code work more available, I put the three prototypes in a GitHub repo, and published them as things to explore via GitHub pages.

So here is the site where all are available:

These are far from what I envisioned, but enough to show the potential functionality.

First Demo: Stuff On the Map

This first demo was really to get the hang of putting a few pins on the map. Here’s a bit of GIF action to amaze you.

All the Leaflet stuff happens inside the <script>...</script> tags at the bottom (see full source code for demo 1), but to outline it we first declare the map, set some boundaries to define the coordinate system, the image for the basemal, and a bit that adds the bottom left legend.

Something that is useful (at the bottom) is some code that for development gives a way to get the local coordinates for a clicked location.

Back to the top, after setting up the map, I add this bit to define the red dot destination icons used for the “off trail” locations; the others I just use the built in pins.

Then I define variables to represent my four map pin locations I will put into this demo (the coordinates come from the pop up code above).

Each one of these is defined by a chunk of code like below. I define a marker using the coordinates above, then add bits to create the popup message contents and a tooltip. Here are two of them.

These are just brute force added to the map, later I can see turning this process into a more elegant function. Maybe.

For the off trail locations, I define their coordinates, add the popups, then use the polyline function to connect them (if needed).

Second Demo: A New Map Base

The second demo is not any different for the map code, it has a few more pins added, but mainly this was to make use of what I felt was a more map-like base map. The source code of this map too is available for forking and peeking pleasure.

Third Demo: Pins in Every Region, Toggled Layers

The third demo added some more functionality. There are different colored pins added to each region, but the bigger deal was adding the legend (top right) with the regions defined as layers, as well as the “off trail” locations, that can be toggled on and off.

Again a Leaflet.js tutorial on layers and groups got me moving in the right direction.

The top tight icon has the layers which can be toggled on and off. The off trail resources (Discovery Trails_ are not shown on initial load, but can be toggled on here.

I’ve tossed almost enough code here, but this one too is fully available to look at.

The set up is the same as the first demo, this time we define a few more location images. But given the number of items here, I got them set up to be populated in a loop.

For the Relational markers (red) , I first define the layer group and set up an object/array for all the data:

This means I can add them to my map like:

It’s nobody’s compact code, but it’s a little less brute force. The other two regions are defined this way.

The map set up for this one is done at the end, along with the new code to set up the layers/groups.

So What Next?

This was really to give my clients an idea about what was possible in a dynamic map interface. This was not even tied into a WordPress site, as that was a process that needed to go through some hoops wit the Technical Services team that manages their servers.

This, in fact, changed everything, but that’s the next post.

Still. if this never got into the site, I learned a ton about using Leaflet.js and you never know when that might come in handy on some other project. There’s rarely anything lost in prototyping, if you are learning as you go.

See all the posts in this series…

---

Featured Image: Screenshot from the third demo prototype.