Building an interactive clickable map for my blog | Hacker News Reader

Building an interactive clickable map for my blog

tomcritchlow.com

60 pointstopcat3118 comments

When I were a nipper, after walking uphill t'mill and uphill back home, after a full 26 hours of work in the evening I'd drag out the cardboard box with the soggy "modem" string and use an image map[1] for that there stuff.

Kids these days with their ess-vee-gee... Dunno they're born.

1: https://www.w3schools.com/html/html_images_imagemap.asp

Lol yeah there's lots of ways to do this - and I'm sure I'm breaking a bunch of formal web design rules. But eh, this figma workflow is easy and fun :)

Last year I was prototyping an interactive map using HTML <map> and .svg images of floor plans. I think there's real potential in the approach.

https://rogue.dev/content/media/2023/04/coordinated-html-ima...

I too put my site's landing nav in an illustration: https://spenc.es

The SVG spec is huge and totally under-appreciated. There is plenty of it too that hasn't been implemented by browser vendors yet, like mesh gradients. There's even an animation language (that doesn't use CSS or JS) called SMIL that I didn't even know existed until about a week ago.

SVG though is super powerful and its full potential has yet to be realized. It is for graphics what HTML is for content, thus making layers, paths, groups, everything scriptable.

Last I heard Google wanted to deprecated SMIL but then changed their minds and I've no idea what the latest is

Love the landing page. And you’re right, SVG is powerful.

Hey, thank you so much for the compliment!

And re:SVG, HN can be so serendipitous in that way. You're deep in some topic, only to find some of that exact same stuff on the front page the next day.

If anyone is curious (or has advice); I'm working on process that takes architectural photos as input and produces layered SVG illustrations as output. The intent is to turn the city where I live, Bologna, Italy, into kind of a digital dollhouse, where you can click on different buildings and look inside and discover and learn interesting historical stuff.

That sounds like a great project. I maintain the webpage for a planetarium group (with SVG things on the landing page: https://friendsoftheplanetarium.org) and have thought about doing something like you describe just for the planetarium. I’d like to follow your progress on this. I didn’t see an RSS link on your page, so I guess I’ll have to remember to visit it now and then.

Neat!

Feedback: browsing from a desktop computer, although the "contact me" globe does not overlap much with "writing" and "projects" visuals, most of the globe's surface triggers a click on either "writing" or "projects" links, instead of leading to the contact page. Happens both on firefox and chromium, linux.

Thanks for pointing that out

Nice. I went a little overboard with mine:

https://taoofmac.com/static/graph

I have been meaning to improve clustering and navigation, but haven't had time yet. Then again, it's 20 years' worth of entries, so there are multiple possible ways to do it.

Looks like the title has been changed to "Building an Interactive Blog Map", which better describes the fact that it's a "map" of the blog, not a map for the blog (which would make you think of something geography-related - at least I did).

Meanwhile, if you want a great tutorial on how to build a interactive geography related map, there’s something on the hackernews frontpage for you too: https://news.ycombinator.com/item?id=35434435

Excellent that the links can be navigated to using the keyboard. But also sad that when the link text breaks over multiple lines the solution creates a link for each line.

Also (I may be wrong): it shouldn't be too hard to make the SVG more scaleable/responsive to get rid of the horizontal scrollbar at various screen widths? And the link text should be amenable to resizing in line with some CSS media query magic?

Didn't deal with the link text, but yes, making an embedded SVG responsive is fairly straightforward. The author's SVG with quick/dirty responsive treatment:

https://jsfiddle.net/w5n1r96q/ (Click settings, "bottom result" to see it better)

Very cool! I had no idea Figma did some of that stuff, definitely need to check it out more. I have really appreciated some of the tools over the last 5-10 years allowing quick iteration on web stuff, I remember how tedious it used to be to have to copy, click around, edit properties and then paste hex codes in some design software.

SVG is also really interesting how powerful of a spec it can be, but boy oh boy, having to parse / render it can be an undertaking. I was trying to do some simple stuff once and lets just say I'm thankful there are smarter people out there than me who write rendering engines.

> Hey, here’s a wacky idea. What if a bunch of us made these kinds of blog maps and then somehow wired them up together so that you could kind of walk across the map?

we could even call this… a meta verse?

Really cool, but I think that if this kind of design wants to compete with the reverse chronological order homepage, there needs to be some way to create it automatically, based on tags or internal references, like a wordpress plugin.

Reply on news.ycombinator.com