[HN Gopher] Ask HN: Do you know travel blogs that have animated ...
___________________________________________________________________
Ask HN: Do you know travel blogs that have animated SVG maps of
their travels?
I'm searching for a travel blog that wrote a tutorial on how they
created custom SVG animations for the routes he took along his
trips. I've been banging my head against Google for a solid 3-4
hours at this point but it is pointless to try to search something
there these days so I come here. I remember that the blogger in
question was into photography and photographed the Te Whanganui-A-
Hei (Cathedral Cove) in New Zealand during early morning with no
people there and wrote a post about the process. And of course they
had these small SVG animations of their trips at the top of their
posts, with a map displaying the route they took, animating the
path. They wrote a pretty in-depth article about how they
accomplished this with the help of some custom JS and SVG
animations too and I am after that article. If you know the name
of the blog that would absolutely make my day! Please also feel
free to answer if you know anything _similar_ to the title of the
blog where somebody has created stylized animated SVG maps of their
trips and documented the process they used to create those.
Author : trebeljahr
Score : 167 points
Date : 2025-02-04 01:40 UTC (2 days ago)
| sflanker wrote:
| https://tympanus.net/codrops/2015/12/16/animated-map-path-fo...
| Not an exact match for your description, but in the same vein
| lbebber wrote:
| Oh, I made this! (almost a decade ago, huh)
| sflanker wrote:
| Tangentially interesting: while leveraging Perplexity to try and
| find the blog post in question this post and your StackOverflow
| question already pollute the results it draws from and causes it
| to abort any more detailed search for such a blog post. I find
| this mildly amusing.
| throwaway519 wrote:
| haha, I just asked ChatGPT and it references this HN post.
|
| It's a small world.
| datadrivenangel wrote:
| Like when my googling solutions to a niche data integration
| interaction between two tools resulted in a first page result
| for one of my coworker's linkedin posts asking if anyone in her
| network knew the answer... The internet is shallow sometimes.
| jachee wrote:
| This is Dead Internet theory in action.
| rvrs wrote:
| Is it this one? https://photos.paulstamatiou.com/new-
| zealand/coromandel-peni...
|
| EDIT: Any HN mods/devs reading this -- there seems to be a
| display bug for comment creation time? On edit it says 20hrs
| (accurate), whereas viewing the comments otherwise shows that it
| was posted an hour ago. Not sure what's going on
| yapyap wrote:
| I also see it as posted an hour ago, and see the original
| thread post as 2 hours ago.
|
| Odd.
| mtmail wrote:
| There's something called a second-chance queue for overlooked
| submissions https://news.ycombinator.com/pool (listed on
| https://news.ycombinator.com/lists)
|
| Some older users (I think YC alumni) can nominate articles and
| moderators give them a boost. The timestamp doesn't change,
| I've seen 2 day old articles appearing. It's a bit confusing, I
| think it was hacked in years ago but works good enough.
| jfkrrorj wrote:
| Heh, i just asked deepseek for fun. It gave me python script that
| takes photos, uses exif coordinates and OSM. 15 minutes
| anonzzzies wrote:
| How about at least put it in a gist?
| chewymouse wrote:
| what was the prompt?
| peterldowns wrote:
| Craig Mod's "Koya Bound" website has beautiful photos and custom
| SVG maps.
|
| https://walkkumano.com/koyabound/
|
| I thought this was so compelling that I ended up walking the
| trail myself. Incredible experience.
| benabbott wrote:
| This is really well done.
| exabrial wrote:
| This is the first time for me where a website hijacked the
| scroll wheel, and it's actually _really really_ well done. This
| is amazing. Thanks for posting it.
| daemonologist wrote:
| The key is that it doesn't actually hijack the scroll wheel -
| the main content (header and text and photos on the left) all
| scrolls normally, controlled by the browser. The map just
| monitors the scroll position and element client rects and
| runs its own non-blocking visualization on the side.
|
| I agree - beautifully implemented, and great content too.
| lbebber wrote:
| Oh, this was based off of a project I made for Codrops[1]. Let
| me know if you'd like some help or input!
|
| [1]https://tympanus.net/Development/StorytellingMap/
| CharlesW wrote:
| That and your other projects at lbebber.github.io/public are
| stellar, Lucas!
| lbebber wrote:
| Thank you, glad you like it!
| whycome wrote:
| Is there something like this that uses KMZ waypoints to craft
| the map/animation?
| peterldowns wrote:
| I didn't realize you were the original programmer on this --
| amazing work!
| neuraldenis wrote:
| Amazing project, love it!
| cmod wrote:
| Thank you for building this; over the years the bus animation
| has gone a bit wonky, but otherwise the page holds up really
| well. It's a great library you built.
| lbebber wrote:
| Beautiful work! I thought the bus was a fun goofy touch on
| its first appearance hahah
| nicwolff wrote:
| That's just terrific!
| kyleblarson wrote:
| Doing a temple stay at Koyasan is by far my favorite lifetime
| travel experience.
| skadamat wrote:
| I came here to link to this! I also spent a week trying to find
| this a few years back :)
| wahnfrieden wrote:
| His newer Iseji one is nice too
|
| https://walkkumano.com/iseji/
| BOOSTERHIDROGEN wrote:
| This gem.
| illwrks wrote:
| So.. I don't know what you're talking about but I work in a
| corporate environment where we can't use JS but we can use SVG
| images... As a consequence I end up creating graphics in
| illustrator, exporting to SVG and then hand animating them with
| CSS animations.
|
| I wouldn't recommend doing it my way, but for path animations
| they are likely animating the stroke length. Here is an example
| that might help, but use an animation tool if you can.
|
| https://css-tricks.com/svg-line-animation-works/
|
| One thing of note with stroke animations.. if you transition
| to/from negative numbers the animation breaks in Safari (negative
| numbers are out of spec aparently). There is a work around but I
| can't remember it at the moment, it results in the stroke
| animation playing in reverse though.
|
| As mentioned above, if you can use a JS library, use one.
| chris_overseas wrote:
| Not quite what you're asking for, but there was this discussion
| and website that you'll hopefully find relevant:
|
| https://news.ycombinator.com/item?id=42660255
| hipinspire wrote:
| https://momoadvisors.com/sourcing.php by https://hipfolio.co
| knowknowledge wrote:
| Here's one from a few months ago "HOW I ADDED MAPS TO MY TRAVEL
| POSTS"
|
| https://news.ycombinator.com/item?id=41532958
| 1wheel wrote:
| https://www.lkk-store.com/lkk-map/
| matallo wrote:
| I built something similar for my blog
| https://matall.in/posts/vietnam/
|
| I didn't write a tutorial but you can check the code here
| https://github.com/matallo/matall.in
| CharlieDigital wrote:
| Might not be what you're looking for, but about 2 years back now
| I built a little tool that does something similar to this (not
| SVG) and no special coding/skills required
|
| Check out the sample story here: https://turas.app/s/japan-x-
| taiwan/BtEjycbA
|
| As you scroll down past the days, it will show the map and places
| for each day (on desktop).
|
| The front-end of this is a planning app for planning the
| itinerary and the "story" is one output of the planner.
| alanbernstein wrote:
| I have been working, slowly, toward a way to do something like
| this, for years. My latest attempt
| (http://alanbernstein.net/galleries/2020-pecos/) is not
| professional or polished, but it does work. IIRC it is canvas
| rather than SVG, and the "animation" is driven by the photo
| slideshow.
|
| Tangentially, I find that the bulk of the work is in compiling
| and prepping the assets, including multiple camera devices,
| incorrect timestamps, buggy rotation exif data, captions from
| multiple sources, GPS tracks from multiple sources...
|
| Thanks for asking here, I'm looking forward to finding a better
| way to do it.
| wonder_er wrote:
| This is a cool project!
|
| I tried to do something similar using the Strava API. Never
| could get precise-enough lat and long to place them nicely on a
| map.
|
| Some of my wild amount of data is visible here:
|
| https://joshs-mobility-data-54dab943ebba.herokuapp.com/?zoom...
| wkat4242 wrote:
| I remember Google had a really cool tool based on their maps that
| could animate journeys. It was pretty good but I haven't heard
| about it for years. I don't even remember the name. Probably
| killed anyway, knowing Google.
| kawsper wrote:
| Is it this? https://cyberb.space/notes/2024/how-i-added-maps-to-
| my-trave...
| bazzargh wrote:
| Not animated or svg, but along the same lines, some years ago I
| wrote https://bazzargh.github.io/stripmap/ which automates
| generating stripmaps. The idea was to eventually use this for
| travelogues of my cycling trips; a map of the route would be a
| sidebar to the text.
|
| Since then I learned about
| https://en.wikipedia.org/wiki/Dubins_path as a way to find the
| path segments; combined with Douglas-Puecker that's probably what
| I'd use today.
___________________________________________________________________
(page generated 2025-02-06 23:02 UTC)