Cross-posting a fun mapping activity from the Mapbox blog by my colleague Joe Clark called DIY Resumap -

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 web mapping

Check out the demo here, https://mapbox-explorer.github.io/

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 “fly to a location based on scroll position”.

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!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
#map {
    position: fixed;
    width:50%;
}
#features {
    width: 50%;
    margin-left: 50%;
    font-family: Tw Cen MT;
    overflow-y: scroll;
    background-color: #fafafa;
}
section {
    padding:  25px 50px;
    line-height: 25px;
    border-bottom: 1px solid #ddd;
    opacity: 0.25;
    font-size: 20px;
}
section.active {
    opacity: 1;
}
section:last-child {
    border-bottom: none;
    margin-bottom: 1000px;
}
</style>

<div id='map'></div>
<div id='features'>
    <section id='welcome' class='active'>
        <h3>Hey, there!</h3>
        <p>Welcome to a resumap! A resume can only say so much. <br><br>🤖 And they tend to feel robotic, don't they? <br><br>Resumaps are designed to fill the gaps in your resume. If you want to stand out, a resumap is a fun way to help people get to know you. After all, wouldn't you want to know who you're hiring? So if you want see more, sit back, relax, and enjoy the flight 🚀</p>
    </section>
    <section id='section1' class='active'>
        <h3>Section 1</h3>
        <p>Here's where you can add a narrative to take your resume to the next level. Where did you come from? What really brought you there? What made you leave? This is to let people get a glimpse of who the person behind the paper is. This is New Mexico...but you can center your map however you want.
    </section>
    <section id='section2'>
        <h3>Section 2</h3>
        <p>As your readers scroll through these sections, your resumap will fly them to the locations you've specified. A sense of place is something that a lot of people resonate with. Where you were when you did what you did is half of the story.<br><br>Add some line breaks to start a new paragraph if you want to feel fancy.</p>
    </section>
    <section id='section3'>
        <h3>Section 3</h3>
        <p>You can add pictures! <br><br> <img src="https://i.imgur.com/NF8af.jpg"><br><br></p>
    </section>
    <section id='section4'>
        <h3>Section 4</h3>
        <p>Or even gifs! <br><br><iframe src="https://giphy.com/embed/fpXxIjftmkk9y" width="224" height="240" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p>
        </p>
    </section>
    <section id='section5'>
        <h3>Section 5</h3>
        <p>Or videos! WHAT!<br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/le0BLAEO93g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p>
    </section>
    <section id='section6'>
        <h3>Section 6</h3>
        <p>The most important thing is to tell <i>your</i> story. What makes you you?</p>
    </section>
    <section id='section7'>
        <h3>Time to make your own</h3>
        <p>Have fun!<br><br><iframe src="https://giphy.com/embed/lJNoBCvQYp7nq" width="300" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p></p>
    </section>
</div>
<script>
mapboxgl.accessToken = 'PASTE YOUR ACCESS TOKEN HERE';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/outdoors-v10',
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
});
var chapters = {
    'welcome': {
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
    },
    'section1': {
        bearing: 0,
        center: [-105.391504, 34.371086],
        zoom: 6.00,
        pitch: 0
    },
    'section2': {
        center: [-122.316235, 47.605958],
        bearing: 54.40,
        zoom: 12.59,
        speed: 0.6,
        pitch: 44.50
    },
    'section3': {
        bearing: 12.80,
        center: [-0.075681, 51.498018],
        zoom: 13.18,
        speed: 0.6,
        pitch: 0.00
    },
    'section4': {
        bearing: 60,
        center: [-134.408720, 58.300388],
        zoom: 16.57,
        speed: 0.6,
        pitch: 45
    },
    'section5': {
        bearing: 15.20,
        center: [29.027289, 41.013899],
        zoom: 10.56,
        pitch: 40.50,
        speed: 0.6
    },
    'section6': {
        bearing: 0,
        center: [-63.594167, -17.701427],
        zoom: 5.53,
        pitch: 0,
        speed: 0.6
    },
    'section7': {
        bearing: -0,
        center: [27.230526, 0.000000],
        zoom: 1.18,
        speed: 0.8,
        pitch: 0
    },
};
// On every scroll event, check which element is on screen
window.onscroll = function() {
    var chapterNames = Object.keys(chapters);
    for (var i = 0; i < chapterNames.length; i++) {
        var chapterName = chapterNames[i];
        if (isElementOnScreen(chapterName)) {
            setActiveChapter(chapterName);
            break;
        }
    }
};
var activeChapterName = 'baker';
function setActiveChapter(chapterName) {
    if (chapterName === activeChapterName) return;
    map.flyTo(chapters[chapterName]);
    document.getElementById(chapterName).setAttribute('class', 'active');
    document.getElementById(activeChapterName).setAttribute('class', '');
    activeChapterName = chapterName;
}
function isElementOnScreen(id) {
    var element = document.getElementById(id);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}
</script>
</body>
</html>

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 Mapbox 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 zoom level, longitude, latitude, pitch, and bearing. It looks like this:

var chapters = {
    'welcome': {
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
    },
    'place1': {
        center: [-71.007520, 42.340921],
        bearing: -150,
        zoom: 16.72,
        speed: 0.6,
        pitch: 45
    },
    'place2': {
        bearing: -45,
        center: [-68.899502, 46.030150],
        zoom: 15.99,
        speed: 0.6,
        pitch: 45
    }
};

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 level up? Pro moves -

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

Leave a comment with your questions or hit us up @Mapbox on twitter :)

How to build a custom resume map (resumap) w/ Mapbox 🗺️