I Added SVG Maps to My Travel Posts

[kylehotchkiss]

I love this Josh! I recently discovered Protomaps (https://protomaps.com) and have been having a lot of fun doing mapping without paying Google or Mapbox a small fortune for the privilege. I found the the basemaps look much better than the protomaps site makes them appear (they're super zoomed out in the samples where the styles don't come together as well as they do when zoomed in)

[lelandfe]

Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then you'd just position the circle on top of that generic map file!

[gampleman]

You could then also run it through SVGO to compress it further.

[ipsento606]

the author is also using many large, multi-megabyte photos in their travel posts, so I'm not sure how significant the size of the SVG content is, in comparison

[mbforbes]

Really impressive! I've implemented a few kinds of maps on my blog, and I fail all of their requirements:

- I use a 3rd party platform

- My maps are generated at runtime

- They looks... let's say vaguely consistent on mobile & desktop

Maps were the most painful and time-consuming part of building a travel blog, but also perhaps the most satisfying.

[throw0101c]

It would be cool if OpenStreetMap (OSM) could do something like a 'print/export to SVG' for whatever is on currently the screen.

[habi]

The export button in the right sidebar (third from the bottom) does exactly this, up to a certain size bounding box size.

[kymikz]

Great post!

I had myself this itch to scratch and ended up making an overly over-engineered tool to do just that: https://cartosvg.com/

I think it might interest you as it covers all your use cases (except the responsiveness part maybe), and personally I thin it can lead to quite beautiful results :)

Cheers!

[loremm]

Also if the author views this, would love an rss feed. Can use the github pretty easily but maybe commits have updates, not new blog posts

[aka-ani]

It seems they do! https://cyberb.space/notes/2024/feeder-finally/

[djangelic]

Great post, love the amount of thought that went into this! I look forward to keeping up with your posts.

[apsurd]

what a great looking website.

love the craft. now I need to set aside some time to read the post… !

[loremm]

same here, looks really nice. Some websites are cool, if slightly gratuitous in how they try to look fancy. This looks elegant and cohesive

[bebna]

I like it, thanks.