Mapbox scroller with no coding experience

Mapbox scroller with no coding experience but often times I wish I had it. First, let me clarify that I do have some basic (super basic) familiarity with HTML, CSS, and Javascript, enough to have the courage to get involved with scripts, plugins, etc… It took me a long time to figure out things and get a creative state of mind when problem-solving. If you happen to be interested in dipping your fingers on Mapbox studio…yay! I salute you and welcome you to this wild and fun ride. My advice: be patient, it will pay off.

Mapbox studio has become one of my favorite tools to work with when developing maps. In a perfect world, the Newsroom I work at would be using it as a primary interactive map tool for the Digital desk but to our misfortune, we do not have the resources or skills set to make it happen yet ( in our department.)

Overall, I’m proud of the progress I have achieved with Mapbox and on understanding a fair amount of script in the past months. I’ve being able to trouble shoot basic directions and make things happen, I’m aware of my limited skills but that’s something I’m going to keep working on.

Mapbox scrolly: Timeline

This timeline took the longest to build because it was my first prototype ever.

My proudest moment was to embed video in the template after spending a lot of time in google and finally figuring out a line of script. There was a lot of trial and error for this one to achieve the layer sequence.

Live demo

Mapbox scrolly: filtering data

Live demo

There was an opportunity to take prototyping to the next level with this story but unfortunately, the story didn’t get published for reasons out of our reach so the scroller development stopped.
What I most enjoyed about this one was to have more people involved in the project, there were interest and motivation to make it to the final phase.

Mapbox scrolly: 3D buildings

One more half of a prototype. I was looking forward to work with 3D layers but we got too busy and no budget.

Live demo

Bonus scrollyteller: ScrollMagic

One of my colleagues mentioned ScrollMagic and as usual, my curiosity kicked in, and decided to give it a try. once again I run into the same issues because of my lack of coding skills but I can see how fun this plugin can be with SVG animations.

Live demo

ScrollMagic template by ihatetomatoes

List of resources:

0 comments on “Mapbox scroller with no coding experience

Leave a Reply

Your email address will not be published. Required fields are marked *