Building an interactive clickable map for my blog
tomcritchlow.com
Building an interactive clickable map for my blog
1–10 of 20 posts
Re: Building an interactive clickable map for my blog
#2When 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.
Re: Building an interactive clickable map for my blog
#3When 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 :)
Re: Building an interactive clickable map for my blog
#4Excellent 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?
Re: Building an interactive clickable map for my blog
#5Excellent 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)
Re: Building an interactive clickable map for my blog
#6Nice. 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.
Re: Building an interactive clickable map for my blog
#7> 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?
Re: Building an interactive clickable map for my blog
#8I 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.
Re: Building an interactive clickable map for my blog
#9I 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 r…
Last I heard Google wanted to deprecated SMIL but then changed their minds and I've no idea what the latest is
Re: Building an interactive clickable map for my blog
#10Looks 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).