Mapbox/html story map issues

[Richard W Stanley]

Hi everyone! I hope you are all doing well. I've created a website but I've run into some issues.

I am wrapping up an internship at the moment where I am creating a website on crude oil transportation in Washington. I’ve created a story map website that the company is hoping to publish, but there are two main issues. 

1) The data doesn’t load the first time. The page typically needs to be reloaded for the data to appear. 

2) The size of the features are different for different computers. This leads to text overlap. 

I created this website using html, css, java, with a Mapbox baseman embedded. I’m not sure if the data is too large and that is why it has trouble loading or if there are too many geojson files per page. Let me know if this is something any of you have experienced. 

I would appreciate any feedback if you know the issue off the top of your head.

Website: https://wyattstanley.github.io/FracTracker/index.html

Github Repo: https://github.com/WyattStanley/FracTracker 

Thank you, Wyatt Stanley

[Hal Mueller]

I took a very quick look at the site on an iPad and on an iPhone 14. There’s some very cool work there, congrats!

I noticed that the Pipelines intro movie never completely scrolled out of the way on the iPhone. On both platforms, the overlay data (pipelines, ports, etc) did not show up for me initially. And on the iPhone, the text did overlap itself. I did not test with dynamic type sizes enabled nor with changing the browser font size; just stuck with Safari and defaults on both.

I haven’t ever tried to build this kind of map. But if I had to debug it myself, I would start by progressively deleting things until I got to a minimal reproduction of the misbehavior. And of course that would happen in a separate Git branch, committing as often as you can.

I’d also consider using “git bisect” to work back to the point where the bugs started to appear.

What happens if you remove the scrolljacking and intro movies, and display just the Mapbox map including the data overlays?

Hal Mueller

halmu...@mac.com

On Jul 5, 2024, at 9:13 PM, Richard W Stanley <rw...@uw.edu> wrote:

Hi everyone! I hope you are all doing well. I've created a website but I've run into some issues.

--
You received this message because you are subscribed to the Google Groups "Cascadia Users of Geospatial Open Source" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cugos+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/cugos/7aaa398f-09c9-4d12-ac41-5ed7cc145bbfn%40googlegroups.com.

[Michael Kirk]

Hi Richard!

It’s a beautiful site!

Adding on to what Hal said about the videos, I noticed the page is using quite a lot of data.

Check out the “network tab” from your browsers “Developer Tools”. Here’s what it looks like on mine (safari)

450MB of transfer is extremely heavy for a page load, and it continues to grow. Looking at the network tab for a while, it seems like by far the biggest consumer of bandwidth is the Pipe.mp4, which I assume is the beautiful video at the top of the screen. If I were working on this, I’d investigate two separate avenues:

1. Can you do anything to minimize the size of the video (recompress at a higher rate, consider a different format)

2. I notice there are a lot of separate requests for the Pipe.mp4 file for different “Byte Range”. The “Byte Range” indicates that the browser isn't requesting the entire file, just a portion of it. This is a common tactic for streaming a portion of a video file. The idea is, say you want to fast forward to the middle of a video (or some other file where seeking makes sense), the video player in your browser doesn’t need the data from the video at the beginning of the file, and can request only the bytes from the latter portion of the video.  But something seems to be going a little haywire with your site, where it’s repeatedly requesting mostly overlapping chunks of the same file. Are you doing seeking or something in your site code? If it’s because there is a specific portion of the video that you want to play on the site, instead of seeking in javascript maybe you can pre-process and trim the video before you upload it to the site, so that the website can more simply play the “entire” video on loop and not have to worry about any complications from “seeking”. 

Similarly, but less significantly, using the same network tools, I noticed the front page has some pretty large images for the little thumbnails. Consider resizing those in an image editing program and re-uploading. This will be especially noticeable for people coming to your site for the first time. The Developer Tools, and the Network tab in particular are your friend when doing web stuff!

All of this is just an educated guess at the underlying issues. It might not be helpful, but I hope it is. Good luck!

Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/cugos/FE6DA27F-6CD4-4B2D-8289-021FB910C6FC%40mac.com.

[Joel Masselink]

Hi Richard,

Your storymaps look great! Nice effective use of the approach. For more specific questions about CSS, you might reach out to Mapbox Developers Discord channel

Your geojson files don't look very big but there might be some savings by importing them into Studio to render them as vector tiles.

For the video, you could upload to Vimeo and then embed the video frame which should help a bit with the video optimization.

Cheers,

Joel