By: Joe Clark
This one’s for all you new grads out there, about to hit the big wide world with a shiny degree and dreams on dreams for your “wild and precious life” (h/t Mary Oliver). It’s a daunting place to be but we’ve been there and we’re going to help you level up for the job hunt.
What? Resumap! Get it? Resume map…
Why? Stand out from the crowd — plus, mapping rocks.
How? Follow this step-by-step guide for an introduction to custom maps & JavaScript code.
Check out our demo resumap here: https://mapbox-explorer.github.io/
If you have experience building websites, feel free to copy this snippet, add your own access token, and use it wherever you want. If you’re new to web development, or don’t have much experience coding, read along!
1. Sign-in to your account
If you’re just joining us, Mapbox builds open source software that makes mapping easy. Sign into your account or create a new one in 4 seconds flat.
2. Copy the code above into a text editor like Sublime Text or Atom
To make an interactive Resumap, we’ll be using code from the Mapbox GL JS JavaScript library. You can read more about how it works or just trust us that it’s highly performant + beginner friendly 😃.
We’ve tailored the Resumap code from our tutorial on “fly to a location based on scroll position”.
3. Add an access token from your account
Copy the access token on the top of your account dashboard and paste it into your code where you see:
mapboxgl.accessToken = 'PASTE YOUR ACCESS TOKEN HERE';
Be sure to keep the apostrophes!
4. Position your map
You’ll want your resumap to be centered over the places your viewers are currently reading. You can use the Map position menu in the Style Editor of Studio to get the exact longitude, latitude, zoom, bearing, and pitch you need to do so:
Back in your text editor, you’ll see a section that’s dedicated to map position in your code. This is where you will want to input the longitude, latitude, It looks like this:
Here’s a breakdown:
- center is the longitude and latitude (in that order) you found with the map position tool
- speed is how fast you want your resumap to fly to that position
- Add as many places as you’d like following the same format
- Play around with the numbers to make the fly to function work however you want. When your readers scroll to the next section (or chapter) in your resumap, they will also fly to the location you specified.
5. Publish your map to your own website
If you already have some light coding experience, feel free to publish your resumap anywhere. If you don’t have experience building a website, that’s okay too — GitHub makes getting started with web development easy!
- For my personal resumap, I followed GitHub’s tutorial for building a website with GitHub Pages.
- For beginners, GitHub’s tutorial will get you up and running with a free website with a URL that looks like: https://username.github.io
- You can add the code you worked on from step 3 and 4 as your index.html file
6. Share what you made
Now that you have a resumap up and running, it’s time to share it with the world. Use it in your personal portfolio, send it along to potential employers, or offer it in lieu of your cover letters. Be sure to show it off by tweeting @Mapbox #builtwithmapbox
Extra credit — optional customizations
Got your resumap rockin and want to take it to the next level? Try these pro tips:
Custom style 🎨
- Add a designer map style to your account by clicking “add this style”
- Or create your own style with Cartogram, drag and drop a photo
- You’ll see these on your Styles page — click “share develop and use”
Custom icons ✨
- It’s possible to get super creative with icons for your map — I made my bitmoji face into a .svg icon using Inkscape and uploaded it into Mapbox Studio
- Upload the .svg files into Mapbox Studio and use them as markers for your map with this tutorial, https://www.mapbox.com/help/markers/
- Check out the marker playground for inspiration
DIY — Resumap! 🗺 was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.