Anyone Struggling to Get Responsive Line Maps Looking Right on Mobile?

Mobile
1

I've been playing around with Tumult Hype on my phone a lot recently, and I’m hitting a bit of a wall when it comes to creating a smooth, mobile-friendly experience for something that should be simple: line maps.

So, here's my dilemma. I love using Hype for interactive stuff, especially for things that can be easily adapted to mobile, but when it comes to displaying maps with lines (like for routes or connections), it’s just not working the way I expect on smaller screens. Has anyone else noticed how tricky it can be to make these kinds of elements both responsive and usable on a phone? The lines either end up too thin and barely visible, or they overlap awkwardly when zoomed out, which makes the map hard to navigate.

I’ve been experimenting with adjusting the stroke width and the placement of elements, but there’s always something that feels off in the way it scales. When I pinch to zoom, the map tends to jump around and becomes a bit unresponsive. It’s like, instead of smooth zooming, it gets jittery, which isn’t ideal. And yes, I’ve tried locking the zoom levels, but that just makes the user experience more limited. I want to keep it flexible and fluid but still easy to use.

One thing that’s inspired me positively, though, is the idea of using line maps that dynamically adjust based on screen size. Line maps, in general, are a simple yet powerful way to represent routes or connections visually, allowing users to draw straight lines and measure distance on maps . It’s a great tool for navigating or understanding geographical relationships without the clutter of excessive details. I saw it work beautifully in another context (not using Hype), and it got me thinking, why can’t I achieve this here? It’s all about balancing the simplicity of the map with a smooth user experience. I feel like there’s a solution somewhere, but I just can’t seem to get it right.

I’m wondering, is it better to keep the map fixed and not allow zooming at all, or should I aim for some sort of hybrid approach where certain elements (like the lines) resize independently of the map’s zoom level? Also, if anyone’s had any luck working with SVG lines inside Tumult Hype for mobile, I'd love to hear how you managed it! I’m sure I’m missing something obvious, but I’m stuck in a bit of a loop trying to figure out the best approach.

If anyone’s got tips, tricks, or even a new way of looking at this, I’d be so grateful.

2

Maps are actually not that simple. There is a lot of nuance in making it work smoothly.

For maps, I usually don't use Hype. As an example, I've been considering making an election map tutorial. I have a map of the USA already in Hype, but I'm thinking of simply redoing it outside of Hype… just pure HTML, CSS, JavaScript, and SVG. That's because it's easier to access the vector graphics. Instead of Hype, I was thinking of presenting the tutorial with Whisk.

I haven't been that motivated to create that tutorial though, because my first map tutorial wasn't that popular… https://www.youtube.com/watch?v=5VY88Lk0k1c&list=PLORkPhKfIRgmJ60F-AdpqCa00Gj1Ta2OA

But basically, vanilla JavaScript is becoming more of my default solution to web problems lately, but maybe Leaflet.js is an alternative. That JavaScript library could be added to a Hype project. Leaflet.js supports layers, zooming, panning, and it's not too difficult to use if you know JavaScript.

Also, I'm not quite understanding the problem. Zooming seems critical for maps, Even if it's to be displayed on a smaller screen, then the map could dynamically adjust that initial view to look the best on that device… either by detecting the device or the view size.

You can change the size of SVG lines in overlaying layers. But again, I'd probably use JavaScript to solve that problem. Styles can be changed dynamically with JavaScript. It would be a matter of comparing the current zoom level to the current screen size.

But, I'm trying to imagine where's the problem. It depends how your layers are being drawn.

How exactly are you zooming in Hype? :thinking:

Also, it depends on your map data. Are you using GPS? Are you using OpenStreetMap?

3

Like @Photics mentioned there's probably a lot of nuance, and I think this might be based a bit on how you're going about it.

Would it be possible for you to post zips of any of your .hype documents that weren't working the way you want? I think it would be a bit more clear to give some guidance or see a little more what you're trying to do. Thanks!