Indy maps

Remember when I wrote about adding travel maps to my site at the recent Indie Web Camp Brighton? I must confess that the last line I wrote was an attempt to catch a fish from the river of the lazy web:

It’s a shame that I can’t use the lovely Stamen watercolour tiles for these static maps though.

In the spirit of Cunningham’s Law, I was hoping that somebody was going to respond with “It’s totally possible to use Stamen’s watercolour tiles for static maps, dumbass—look!” (to which my response would have been “thank you very much!”).

Alas, no such response was forthcoming. The hoped-for schooling never forthcame.

Still, I couldn’t quite let go of the idea of using those lovely watercolour maps somewhere on my site. But I had decided that dynamic maps would have been overkill for my archive pages:

Sure, it looked good, but displaying the map required requests for a script, a style sheet, and multiple map tiles.

Then I had a thought. What if I keep the static maps on my archive pages, but make them clickable? Then, on the other end of that link, I can have the dynamic version. In other words, what if I had a separate URL just for the dynamic maps?

These seemed like a good plan to me, so while I was travelling by Eurostar—the only way to travel—back from the lovely city of Antwerp where I had been speaking at Full Stack Europe, I started hacking away on making the dynamic maps even more dynamic. After all, now that they were going to have their own pages, I could go all out with any fancy features I wanted.

I kept coming back to my original goal:

I was looking for something more like the maps in Indiana Jones films—a line drawn from place to place to show the movement over time.

I found a plug-in for Leaflet.js that animates polylines—thanks, Iván! With a bit of wrangling, I was able to get it to animate between the lat/lon points of whichever archive section the map was in. Rather than have it play out automatically, I also added a control so that you can start and stop the animation. While I was at it, I decided to make that “play/pause” button do something else too. Ahem.

If you’d like to see the maps in action, click the “play” button on any of these maps:

You get the idea. It’s all very silly really. It’s right up there with the time I made my sparklines playable. But that’s kind of the point. It’s my website so I can do whatever I want with it, no matter how silly.

First of all, the research department for adactio.com (that’s me) came up with the idea. Then that had to be sold in to upper management (that’s me too). A team was spun up to handle design and development (consisting of me and me). Finally, the finished result went live thanks to the tireless efforts of the adactio.com ops group (that would be me). Any feedback should be directed at the marketing department (no idea who that is).

Have you published a response to this? :

Responses

Marty McGuire

🤩 Loving these maps! I missed your comment about using the stamen tiles for static maps.

I use https://github.com/dfacts/staticmaplite on my site. It’s no longer under development but, as long as you point it at a working tilemap server, it works fine! I switched out the URLs hardcoded in the PHP file for the Stamen “Toner” tiles, using the tile server URL pattern on the Open Street Map wiki.

Bramus!

Reminds me of this visualization I made for Gowalla (RIP) back in the day: vimeo.com/35689394 No watercolor tiles though ;)

# Posted by Bramus! on Thursday, October 31st, 2019 at 10:24pm

Chris Aldrich

Often the IndieWeb is re-creating functionality from traditional media or the social spaces to our own sites. Who is going to innovate and turn the tide in the other direction?

Where is the avant guarde? Who is going to be the next Stan Brakhage, George Antheil, Luis Buñuel, or Walter Murch of the web?

How can we push corporate social media back onto their heels?

I can’t wait for someone to create the next social media craze because it’s something they’re creatively posting on their own website as a media format that social silos don’t allow.

Who is experimenting with quirky multimedia posts on their websites? Who’s going to have the next meme generator/Tik Tok/SnapChat stories/inventive new functionality first? I’m imagining something in the vein of Marty’s Kapowski, Aaron’s emoji avatars, or Jeremy’s Indy maps, but I’m sure we could go crazier and push the envelope even further.

Bonus points if it’s done in the form of a micropub client! 🙂

Marty McGuire

Well, it’s a rainy day and a good day for someday projects. Also, oops, here’s a post about a tiny site update that accidentally sprawled into a post about 6 (or 14) years of my relationships with Foursquare and the whole idea of sharing “check in“s (not 🐔s).

Oh no it’s backstory time

In 2009 I was living in Pittsburgh, working as a research programmer at Carnegie Mellon, a proud member of the newly formed HackPGH hacker space, starting down the slippery slope of joining the 3D printing industry, and basically excited about technology and the future. It was in this context that I vaguely remember being talked into joining Foursquare, so friends and I could keep up with one another at our usual haunts around town.

I’m not sure how much serendipity it really enabled, but checkins did lead to conversations and a nice general awareness of what folks in my social network were up to. Oh, and some competition for points and mayorships, of course, thanks to gamification.

I made use of checkins pretty regularly, in town and on trips, across a move to Baltimore and starting a new job in the aforementioned 3D printing industry. And then in 2012 I stopped. I don’t 100% remember making this a conscious choice, but I do recall that most of my friends who used the app regularly were far away in Pittsburgh, privacy and surveillance capital concerns were on the rise, and — heck — I probably changed phones or something and just plain didn’t install it.

Fast-forward about 5 years to 2017 and I’m all-in on the IndieWeb community. After learning about it in ~2015, putting together my first blog since ~2003, and attending my first IndieWebCamp in NYC in 2016, I found myself in Portland, OR for the IndieWeb Summit.

And goodness these folks liked checking in with Foursquare (now Swarm)! They were tagging one another in the app, maximizing points with photos, just documenting the heck out of where we were going and what we were doing.

Aaron Parecki, one of the co-founders of IndieWeb, had set up a service called OwnYourSwarm which you could set up to watch your Swarm account for new checkins, at which point it would send ‘em off your your website. While I probably should have been paying more attention to the excellent IndieWeb Summit discussions, I hacked up some bits of my site to understand posts from OwnYourSwarm and posted my first checkin to my own site.

OwnYourSwarm is still around and working well, despite some speedbumps over the years from Swarm API changes. Thanks, Aaron!

Okay, but something about maps?

Speaking of Aaron, I was jealous of how good his checkin posts looked. Like this example checking in for IndieWeb Summit day 1. I specifically liked the little map at the top and wanted one for myself.

Screenshot of the top of Aaron’s post checking in at Mozilla Portland. A small map in wide aspect ratio has a blue pin indicating the location among the streets in downtown Portland.

So, uh, almost a year later, I was inspired by this really great post on privacy-preserving, self-hosted maps by Sebastian Greger, to finally put together my own setup and promptly never blogged about it. I know this because I bookmarked his post and found the Git commit from June 25th, 2018 where I switch from Javascript-powered Mapbox (which I don’t really recall setting up) to my own static map setup.

(Would we be shocked to discover that, on June 25th, 2018, I was checking in for that year’s IndieWeb Summit? We should not be.)

Black and white map image with a purple push pin at the corner of SW 2nd Ave and SW Pine St in downtown Portland, OR. Map tiles provided by Stamen, contributions by OpenStreetMap contributors, etc.

The closest thing to a write-up on my own site I was able to find was this comment I had made on a great post by Jeremy Keith about a map project of his own:

I use https://github.com/dfacts/staticmaplite on my site. It’s no longer under development but, as long as you point it at a working tilemap server, it works fine! I switched out the URLs hardcoded in the PHP file for the Stamen “Toner” tiles, using the tile server URL pattern on the Open Street Map wiki.

staticMapLite is a little PHP service you can self-host that creates plain old map images, of the locations you want at the sizes you want with overlays and pins if you want them, and caches them forever. It does so the same way as pretty much all map tools on the web: by asking bigger servers (called “tile servers”, or “raster tile servers”) for larger sets of “tile” images, then slicing up those tiles to make the image you want. The project is archived and hasn’t seen updates since 2018, but it works fine! Raster tile server technology hasn’t changed much since then.

Assuming, that is, that you have a raster tile server! You can run your own, but they require a ton of storage for all the map data, need regular updates, and generally are considered a pain to maintain.

When I set this up I remember looking over the list of raster tile servers on the Open Street Map wiki to find one that was free, didn’t require signup, and produced map images that were aesthetic and minimal. With its dithered black and white look, Stamen’s Toner definitely fit the bill. Stamen, those data visualization folks, right? I don’t really remember thinking too hard about it!

We were promised a site update

Okay, okay! As it turns out Stamen also didn’t like being maintainers of map tile servers. Especially when so many folks were freeloading on them!

To that end, this year Stamen announced a partnership with Stadia to begin hosting Stamen’s many tile designs with Stadia, a map service with a business model, instead. The tile images remain shareable under their Creative Commons attribution license, I can keep all my existing cached images, and so on. They’re offering a free tier of up to 200,000 tile images a month which is welllll below what I’ll need for my few static images on rare times that I make checkin posts.

Stadia has their own page about the Stamen maps project, and a fairly straightforward migration guide to using Stamen map tiles served by Stadia tile servers.

So, I’ve updated my deployment of staticmaplite to pull tiles from Stadia. Steps largely followed their migration guide:

  • Make a (free) Stadia account.
  • Generate an API key.
  • Update staticmap.php to replace the “a.tile.stamen.com” map URL with “https://tiles.stadiamaps.com/tiles/stamentoner/{Z}/{X}/{Y}.png?apikey=MYAPIKEY_HERE”.
  • Update my post template with the new attribution requirements.

I went hunting around the map cache on my server to find the most recent map image and delete the cached image so it would re-generate. It took me a couple of tries to get my tiles.stadiamaps.com URL correct, as Stadia’s example used lowercase placeholders like “{x}” while staticmapslite requires uppercase like “{X}”. Also, Stadia supports an optional “{r}” value — either an empty string “” or “@2x” if you want double-resolution images for Retina displays — that staticmaplite doesn’t understand (and that I opted not to use).

Anyway, here’s that most recent checkin, using the new map image.

Map image of Brooklyn, NY with a purple pin near the southeast corner of 5th Ave and 3rd St. Map tile courtesy Stadia and Stamen and OpenStreetMap contributors.

Looks pretty much the same, which is the point!

So.

Was this a site update? Perhaps one long overdue from 2017 or 2018? Or is this a post about a very specific kind of admin tax? Or something else? I’m interested in your thoughts!

2 Likes

# Liked by New Adventures on Thursday, October 31st, 2019 at 10:05pm

# Liked by Dominik Schwind on Saturday, November 2nd, 2019 at 1:13pm

Related posts

Mashing up with microformats

I’ve transcribed the text of the microformats panel I sat in on at South by Southwest.

Indie webbing

Tinkering with my website and getting inspired at Indie Web Camp Brighton.

Indie Web Camp Nuremberg

Updating my website with related posts and fixing link rot.

Dark mode revisited

Adding another theme to my stylesheet switcher.

Dark mode

Adarktio

Related links

A microdata enhanced HTML Webcomponent for Leaflet | k-nut — Blog

Here’s a nice HTML web component that uses structured data in the markup to populate a Leaflet map.

Personally I’d probably use microformats rather than microdata, but the princple is the same: progressive enhancement from plain old HTML to an interactive map.

Tagged with

getlon.lat

80 geocoding service plans to choose from.

I’m going to squirrel this one away for later—I’ve had to switch geocoding providers in the past, so I have a feeling that this could come in handy.

Tagged with

Draw all roads in a city at once

A lovely little bit of urban cartography.

Tagged with

Lights at sea

Lighthouses of the world, mapped.

Tagged with

Barely Maps

Minimalist cartography.

Tagged with

Previously on this day

7 years ago I wrote Speak and repeat

The lifecycle of a conference talk.

13 years ago I wrote Carpenter

I have come here to watch an all-night movie marathon and chew bubblegum. And I am all out of bubblegum.

20 years ago I wrote Let sleeping iPods die

After a Friday afternoon meeting over at Semantico, I decided to swing by the local Cancom shop and browse through whatever Apple goodies they might have in stock.

22 years ago I wrote The Pumpkin Queen

Not only does Jessica carve a scary looking Jack O’Lantern, she also makes a mean roasted garlic pumpkin bisque with herb potato dumplings.

23 years ago I wrote Bairin Breac

A quick update to my previous entry: I found a recipe for that cake.

23 years ago I wrote Halloween

Happy Halloween.