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:
-
centeris the longitude and latitude (in that order) you found with the map position tool -
speedis 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 tofunction work however you want. When your readers scroll to the next section (orchapter) 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**
- For beginners, GitHub’s tutorial will get you up and running with a free website with a URL that looks like:
- You can add the code you worked on from step 3 and 4 as your
index.htmlfile6. 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 :)
Top comments (5)
I think this looks great, and can be used for way more than ust resumes. You could use this to document travels, or for history lessons involving different cities or countries, ... So many possibilities!
Hi Erin. Love this idea. I created something similar a couple years ago, which integrated with LinkedIn and geocoded the locations from LinkedIn to show points on the map along with job/education details pulled from LinkedIn shown similar to what you have on the right. I'd be happy to share the code if you're interested!
Thanks for such an awesome guide! I have a friend who's trying to figure out how to do EXACTLY THIS for a different kind of project, and I think this will be suuuuper helpful for her. Cheers!
Amazing!! Have her hit me up if she needs any help!
This is awesome, definitely adding this to my todo list!