How to build a custom resume map (resumap) w/ Mapbox 🗺️ 
Tags: webdev, career, showdev, learning
Published: 2018-05-02 15:21:21

---
title: How to build a custom resume map (resumap) w/ Mapbox 🗺️ 
published: true
description: 
tags: webdev, career, showdev, learning
---

_Cross-posting a fun mapping activity from the [Mapbox blog](https://blog.mapbox.com/) by my colleague [Joe Clark](https://www.mapbox.com/about/team/joe-clark/) called [DIY Resumap](https://blog.mapbox.com/diy-resumap-cef7449e3293)_ - 


**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/

![](https://d2mxuefqeaa7sj.cloudfront.net/s_62E418C5B045FDF175E803788F0E70DDFB83A94380AD16621A9AE0428BEF1E0F_1524783098287_image.png)

## 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](https://www.mapbox.com/signup/) in 4 seconds flat.

## 2. Copy the code above into a text editor like [Sublime Text](https://www.sublimetext.com/) or [Atom](https://atom.io/) 

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](https://www.mapbox.com/help/how-web-apps-work/#mapbox-gl-js) 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](https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/)”.  

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](https://www.mapbox.com/help/define-access-token/) from your account 

Copy the access token on the top of your [account dashboard](https://www.mapbox.com/account) 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](https://www.mapbox.com/studio/styles/) of Mapbox Studio to get the exact `longitude`, `latitude`, `zoom`, `bearing`, and `pitch` you need to do so: 

![](https://d2mxuefqeaa7sj.cloudfront.net/s_5F1878FF0C2D60C2D208C17E2D26761CCCA2A8395B273B0AB9878B776D8AD47A_1524590500528_map+position.gif)


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](http://github.com/) makes getting started with web development easy! 


- For [my personal resumap](https://joecclark.github.io/), I followed [GitHub’s tutorial](https://pages.github.com/) 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**


![](https://d2mxuefqeaa7sj.cloudfront.net/s_5F1878FF0C2D60C2D208C17E2D26761CCCA2A8395B273B0AB9878B776D8AD47A_1524591933548_flyto.gif)

## Extra credit - optional customizations

Got your resumap rockin and want level up? Pro moves - 

**Custom style 🎨** 

- Add a [designer map style](https://www.mapbox.com/designer-maps/) to your account by clicking “**add this style**”
- Or create your own style with [Cartogram](https://www.mapbox.com/cartogram), drag and drop a photo 
- You’ll see these on your [Styles page](https://www.mapbox.com/studio/styles/) - 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](https://inkscape.org/en/) 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](https://www.mapbox.com/help/marker-playground/) for inspiration

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