4 ms·

Building an interactive clickable map for my blog

60 points by topcat31 3y ago

spacedcowboy 3y ago
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 https://www.w3schools.com/html/html_images_imagemap.asp
- topcat31 3y ago
  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 :)
- Jiocus 3y ago
  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-image-map.webm https://rogue.dev/content/media/2023/04/coordinated-html-ima...
rikroots 3y ago
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?
- tyingq 3y ago
  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/ https://jsfiddle.net/w5n1r96q/ (Click settings, "bottom result" to see it better)
rcarmo 3y ago
Nice. I went a little overboard with mine: https://taoofmac.com/static/graph 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.
swyx 3y ago
> 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?
asimpletune 3y ago
I too put my site's landing nav in an illustration: https://spenc.es 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.
- lloydatkinson 3y ago
  Last I heard Google wanted to deprecated SMIL but then changed their minds and I've no idea what the latest is
- leephillips 3y ago
  Love the landing page. And you’re right, SVG is powerful.
  - asimpletune 3y ago
    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.
    - leephillips 3y ago
      That sounds like a great project. I maintain the webpage for a planetarium group (with SVG things on the landing page: https://friendsoftheplanetarium.org 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.
deleted 3y ago
[deleted]
rob74 3y ago
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).
- lom 3y ago
  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 https://news.ycombinator.com/item?id=35434435
amadeuspagel 3y ago
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.
genmud 3y ago
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.

60 points by topcat31 3y ago

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 https://www.w3schools.com/html/html_images_imagemap.asp

topcat31 3y ago
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 :)
Jiocus 3y ago
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-image-map.webm https://rogue.dev/content/media/2023/04/coordinated-html-ima...

rikroots 3y ago

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?

tyingq 3y ago
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/ https://jsfiddle.net/w5n1r96q/ (Click settings, "bottom result" to see it better)

rcarmo 3y ago

Nice. I went a little overboard with mine: https://taoofmac.com/static/graph 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.

swyx 3y ago

> 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?

asimpletune 3y ago

I too put my site's landing nav in an illustration: https://spenc.es 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.

lloydatkinson 3y ago
Last I heard Google wanted to deprecated SMIL but then changed their minds and I've no idea what the latest is
leephillips 3y ago
Love the landing page. And you’re right, SVG is powerful.
- asimpletune 3y ago
  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.
  - leephillips 3y ago
    That sounds like a great project. I maintain the webpage for a planetarium group (with SVG things on the landing page: https://friendsoftheplanetarium.org 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.

deleted 3y ago

[deleted]

rob74 3y ago

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).

lom 3y ago
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 https://news.ycombinator.com/item?id=35434435

amadeuspagel 3y ago

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.

genmud 3y ago

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.