Preview of Maps, Tracks, Colormap, and Travelpath

I’ve been developing¹ a suite of four full-featured plugins for Micro.blog, each of which serves a role in helping you better post about your travel and outdoor adventures². Each of them works as a shortcode that pulls from simple text files you can add to your custom theme.

I’ve made them incredibly simple to use—usually just one or two very simple text files—but each one also packs in a lot of optional customization if you want it. You don’t need to understand code to use any of these.

I still need to wrap up some loose ends, squash a few minor bugs and keep testing³, put together all the documentation, build out this website with example files and how-to guides (ugh), and get things ready for official release. I had hoped to do that weeks ago, but I’ve been sick…and a bit distracted adding some new quality-of-life improvements here and there. Anyway, I’m working on it and will release as soon as I can, but wanted to give y’all a taste of what I’ve put together in the meanwhile.

Ok, let’s get on to some quick examples of the four different plugins. (Note: I’m only mentioning a subset of the features of each plugin here; this is just a preview).

MAPS

The most familiar of these plugins is Maps, which might remind you of Google My Maps. Indeed, it serves to replace Google My Maps embeds⁴ so you can have a custom map—or many of them—right here in your posts, pages, or even category summaries.

Maps doesn’t have layers, per se, but it does allow for a wide variety of marker icons and colors, as well as a popup with the marker name and a simple note. But it also has a pretty nifty feature that really sets it apart: each marker allows for a link. That link might be to a specific blog post, or perhaps to an entire category archives—allowing you to organize your blog posts on a map.

But crucially, it can also be directed at an image, video, or audio file. Photos open in their own lightbox (and allow you to swipe thru the other photos on the map), videos open in their own popup video player, and audio files are attached inline to the popup window so you can listen immediately. This allows for some really fun options when constructing maps detailing your various adventures (you’ll see these in action further down the page).

The simple map below shows my progress on my Phoenix Points of Pride quest. I’ve elected not to turn on marker clustering, but I did add a very simple legend. This map is nothing fancy, but it’s great when paired with a list, or with separate blog posts for that matter.

[Interactive map — visit the original post to explore it.]

Of course, there are lots of other ways to use an interactive pin map:

• Organize your travel posts by location, with each pin linking to a category archive page.
• Map all the places you visited on your last trip, with links to the relevant blog posts, or your best photos from each stop.
• Rate local restaurants using the built-in “full star,” “half star,” and “empty star” icons. Add a short review as a note (shown in the popup), or link directly to a blog post or even to your review on Yelp.
• Rank your favorite local coffeeshops with numbered pins. Link each one to a section further down the same page explaining why it earned its spot.
• Link to your detailed photo collection pages using pins on a map.

I won’t clutter the page with a dozen example maps. But changing marker icons, colors, and basemaps, clustering, and other options can give you a wide portfolio of map options. I expect this plugin will be the most popular of the bunch, just due to its wide applicability.

TRAVELPATH

Travelpath is a fun way to map a recent trip you took, showing the order of your stops along the way—so it’s geared particularly well for road trips. Like Maps, markers accept a range of icons and colors, and they can also display images, video, and audio, as well as traditional links to blog posts and such.

One fun feature of Travelpath is the ability to add “stats” in the form of mileage to/from each objective, as well as a total. This is a rough “straight line” calculation, of course, but I think adds a fun little bit to the notion of the journey itself—you went somewhere.

Here’s an example road trip from Phoenix to up through Utah’s “Mighty Five” National Parks, along with a few other notable stops. I styled visits to “named” National Parks in red.

[Interactive travel map — visit the original post to explore it.]

Travelpath works great for trips that involve flying too—in fact, you can even use “great circle” style lines to better follow the curvature of the earth. Indeed, airports are first-class citizens in this plugin: you can use the airport code of any major airport around the world instead of entering lat/lon coordinates.

In addition to “journey” mode above, Travelpath also has “hub” mode. Hub shows all your destinations from one particular location. Here’s an example below, based on which an example of direct flights I might have taken from Phoenix, organized by year. Tap the year tiles to see the relevant routes highlighted.

[Interactive travel map — visit the original post to explore it.]

COLORMAP

Colormap allows you to color in different regions of a map. There are 30 built-in maps that span the globe. So you’re set, whether you want to show which regions of France you’ve been to, or how many continents you’ve traveled to, or which islands (and/or territories) in the Caribbean Sea you have on your list.

This map shows which countries I’ve visited in Europe, grouped by year via color. This example shows how you can add a legend to show what the colors represent. The map isn’t clickable (it’d be impossible to click on Vatican City, right?) but the tiles solve that problem. If you click on them, a popup appears with an optional note or link. It’s too bad I don’t have a blog post for each of those country visits! I’m waaay behind on travel blogging.

This map shows which states I’ve camped in for my Camp in all 50 States quest. You’ll see that I skipped the legend for this one, but added a progress tile, which does the math for you (I mean, the math for this example is pretty darn easy, but it’s still a nice feature to have). Of course, you can turn that off, and the legend off, and even all the tiles off if you just want a pretty map that you can easily update.

TRACKS

Tracks allows you to show off a route you’ve created: whether hiking, running, biking, paddling, offroading, or…uhh…hang gliding? I dunno, whatever other activity you might record a GPS track for. There are two main modes: single-track, and multi-track.

This is a single track, which is perfect for a blog post about a single outing. I’ve turned on the stats and elevation features and picked one of the topo basemaps. All you need to display this is a gpx file from your outing, two lines in a yaml file, and a simple shortcode in your blog post.

[Interactive track map — visit the original post to explore it.]

And this is a single track too, though here I’ve added a number of waypoints. Each waypoint is tied to a popup, where you can add a short note or a link to a blog post or category. In this case, I’ve linked to a short video I’ve taken at each spot (see the little video icon before the link); clicking the link will open a player that you can watch right here on the site. Go ahead, you can watch them all, we’ll wait…

You can see that I’ve also set waypoint clustering, as I have several waypoints close to the start of the track. And you probably noticed that this map features a satellite view basemap, which works great for this particular stretch of river.

[Interactive track map — visit the original post to explore it.]

The last map here is an example of a multitrack map, filled with several hikes in my local city park. I turned off the automatic start/end markers (since every hike is an out-and-back or loop), but turned on stats for several of the routes—on multi-track mode, these render inside the popup for each track. You can pick your own color for each route, or leave them blank and let the plugin auto-assign them instead (as I did here). Tracks can also generate a simple legend, if requested, as I did here.

[Interactive track map — visit the original post to explore it.]

A few more notes

Well, did you notice that you can have multiple instances of the same plugin on the same page? And all four of the plugins on one page? Because they were designed together, they share some infrastructure, which means that each instance doesn’t need to load everything it needs each time. You can also use a single map on multiple pages, and even style it differently using shortcode options without needing separate data files.

Each map requires very little in terms of actual data to function. If you want a map with the defaults, it’s very quick and easy to get something up. From there you can decide what additional styling/flair you want to add.

Anyway, that’s a preview of what I’ve been putting together. I still have some finishing touches with the code, and then it’s on to documentation. I hope to get these into the Micro.blog plug-in directory in the not-too-distant future.

Cheers,

Scott. @rscottjones rsjon.es