DEV Community: Erin Quinn

We've just kicked off the first Mapbox #AMA, @mourner

Erin Quinn — Mon, 25 Jun 2018 17:09:10 +0000

I'm incredibly proud to be a part of Mapbox's sponsorship of Dev.to because of the rich & lively conversations Dev.to sponsors for the community. Local DC-based Jess Bell's AMA was actually my first introduction to all the authentic connection going on here, and I'm proud to say we're on the train:

Head over to "I'm an open source enthusiast at Mapbox, the creator of Leaflet and 40 other JS libraries and a rock star musician" to ask the one & only Vladimir Agafonkin anything!

Have an idea who you want to take the stage next? Let me know!

Welcome to the Mapbox Developer community, Pride style

Erin Quinn — Fri, 15 Jun 2018 21:39:50 +0000

We just wrapped up our first ever developer event out in San Francisco, Locate, where we connected with 1,400 members of our global community and had an absolute blast talking all things location.

Over the jam-packed two days we revealed 🔥 new products & partnerships:

React Native AR and SceneKit SDKs for augmented reality
Vision SDK in partnership with Arm and Microsoft Azure
GL Custom Layers API in partnership with Uber's kepler.gl team

_[@brnkhy's](https://twitter.com/bradleege/status/1006756603071291395) dancing astronaut, built with the Mapbox Unity SDK_

As a platform company we live vicariously through our users and it was incredible to meet so many of the developers — from different industries across the globe — who are building amazing products that help us explore, move, and connect.

And what did we learn?

We learned the community's appetite for resources and technical leveling up is big - every seat in the engineering Code Lab sessions was filled 20 minutes before start time, and sessions like Damon's "Hackbox - Creative Misuse Cases" and Nadia's "Mapbox API 101" pretty much drew standing ovations. So in the spirit of continued learning..

Let's build a thing! 🌈

_If you just want to dive in, start here:_ [Create a free developer account](https://www.mapbox.com/signup/?utm_source=junedevto&utm_medium=devto&utm_content=signup-page&utm_campaign=junedevto) [API documentation](https://www.mapbox.com/api-documentation/?utm_source=junedevto&utm_medium=devto&utm_content=api-docs&utm_campaign=junedevto) [Step-by-step tutorials](https://www.mapbox.com/help/tutorials/?utm_source=junedevto&utm_medium=devto&utm_content=tutorials&utm_campaign=junedevto)

In honor of June as Pride Month, I wanted to share how to build a specialty style for the occasion with our cartography tool, Studio:

With Studio, developers & designers can upload and style data to create tiled vector maps with full control of every layer. To get started, create a free account and check out the docs for How Mapbox Works.

Making your own themed Pride Parade route starts with tracing the route as a line in the Dataset Editor which creates a GeoJSON with the longitude,latitude of all the points on the route. Export that Dataset to a Tileset and add to your Style of choice as a layer*. In the Style Editor, upload a rainbow SVG like this one to your images panel, and select the SVG as your pattern for the line layer, setting width to 20px for visibility:

*Tilesets vs Datasets, in short - a tileset is a lossy format (the data is chunked in tiles and snapped to the nearest pixel), whereas a dataset can be edited, but less optimized for visualization. Datasets -> Tilesets.

If you’re working with multiple parade routes, create unique datasets for each and take advantage of bulk editing (shift key allows you to select multiple layers) to style them together, as seen in the screenshot above.

When you've designed the style to your liking by adding and removing layers, click publish and head to the Share, Develop, and Use page where you can grab a standalone Share URL to explore the map in your browser. To build an interactive application with your style, copy the Style ID and some JavaScript starter code from the Mapbox GL JS examples. You can add interactivity like popups, animations, even rainbow line gradients:

There you have it - project success! Now you can confidently join our (just-announced) World Map Cup challenge for a shot at prizes like a DJI Mavic Air Drone, custom 3D laser printed topographic wooden map, @AmyLee's Guide to Map design, and more.

Stay connected

If you're an open source contributor, a freelancer to be featured in our Developer Network, or the next of 1M+ developers building location experiences with Mapbox, join us!

We're @Mapbox on Twitter and so, so glad to be rocking here at Dev.to.

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

Erin Quinn — Wed, 02 May 2018 15:21:21 +0000

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 :)

Styling realistic terrain in Mapbox Studio with dynamic hillshading

Erin Quinn — Wed, 18 Apr 2018 23:11:58 +0000

This post needs to be updated based on a recent Studio release. Hold tight!

Recently, we released a new raster digital elevation model (DEM) source for styling terrain maps called Mapbox Terrain RGB. While styling any map in our cartography editor, Mapbox Studio, this data is available by adding the tileset as a new layer:

This guide specifically will use Tristen’s Relief style (← which you can add to your account from this link) as a canvas to build a custom styled terrain map. Let’s dig in!

Adjust the colors & intensity of your `hillshading` layer

Take a second to orient yourself to the Studio interface. On your left is the layers list which details the types of data that make up your map. This style uses a short number of common land-use types which is ideal for a shaded relief map to really stand out.

Let’s start by choosing a color scheme to make this map your own:

Select your hillshading layer from the layers list (as shown above)
Click into each panel - shadow color, highlight color , and accent color - to experiment with complimentary colors of your choice

Note that accent color works well from a design perspective when the color opacity of the shadow and highlight properties are adjusted (using the right toggle in your color window) -

For my style, I’ve chosen a festive, bright pink/purple/blue theme:

Another styling option is adjusting the Intensity of all the colors your layer uses - the intensity of this screenshot is set to .65 for a softer look, while the others below are a set to a full 1 -

While you’re styling, you may find it helpful to use the search box to find mountainous territory - try Kathmandu, Nepal or Denali National Park, Alaska:

Continue styling `color` and `intensity` for all 12 layers

Click into each layer and choose colors that fit your theme as described above. My palette 🎨:

One interesting note about Tristen’s original map design - he uses the styling technique set value by zoom as described in the Studio Manual to create a better contrast between water and hillshading when shown at higher zoom levels.Zoom in on the map yourself to see the water fade from turquoise → baby blue:

Styling `illumination direction`

Now that you’ve got the basics down, we can try to mirror Molly’s simulation of how the sun moves across terrain in her blog post Realistic Terrain With Custom Styling. For your hillshading layer, click into illumination direction and play around with the slider -

It’s worth noting that Molly accomplishes this effect in her post with the JavaScript library Mapbox GL JS. Check out the hillshade code example and the hillshade style spec to change any of these properties at runtime with JavaScript.

Stuck? We’re here for you!

We’ll be on Twitter from this Thursday from 1-2 pm PST for #mappyhour answering questions. Send any questions using that hashtag and we’ll solve them with you, live. But don’t worry, we’d love to help you at any time on the chance you get incredibly stuck - reach out to us! While in the app - you can contact us from the Help panel on the right side of your screen -

Hit me up with questions or requests for the next guide!

Extruding 3D buildings in Mapbox Studio

Erin Quinn — Tue, 27 Mar 2018 21:10:29 +0000

Currently out of date with a recent Studio re-release, head to https://www.mapbox.com/help/add-3d-buildings-studio/ for updates!

We're onto the 3rd challenge of Map Madness over at Mapbox, and I wanted to cross-post our walk-through for adding 3D buildings to a custom map style in 20 minutes or less.

1. Create your map

If you haven’t already made a map in Cartogram, drag and drop a photo of your favorite team to create a custom map style. You'll be prompted to create a new account or sign in.

Watch for the banner Saved style! indicating your new map style has been saved to your Mapbox account -

Click through the popup or go to the Style Editor to select My Cartogram Style.

2. Extruding the buildings

You’re now in the Mapbox Style Editor. On your left is the layers list — look for the buildings layer by using the Filter layers option and typing buildings into the search bar.

Click into the buildings layer then click Select Data.

You’re now viewing x-ray mode where you can inspect the underlying data - after all, vector maps are just collections of geometries! I digress. From the Type dropdown, select Fill extrusion. When the pop-up window appears, click Okay

At the bottom of the same panel, click Add filter and select Extrude. Add a new filter value so that the filter reads Extrude is any of true. To see the True/False options, click Empty -

3. Styling your buildings

Toggle back to the Style tab for your buildings layer and (1) Click into Height (2) Select Value options, then (3) Choose Set value by data

Now we’ll tell our buildings how tall they should be. In the Field dropdown menu, choose Height. Set your Default value to 15 and at the bottom, click Add a Stop. Enter a number like 3,000 in both the Height and Fill Height boxes.

Zoom down into your map - you should see buildings start to pop out. Hold control while clicking and dragging to tilt and rotate the map to check out the different perspectives.

Now let’s change the styling of the buildings by selecting Color and choosing a shade from the selection menu.

Before we start on the final styling for our buildings, use the Search box on the right panel to type in a city with a prominent skyline like Toronto, San Francisco, or New York.

Final styling - adjusting color & lighting

On the layer’s list, drag the buildings layer up in the map hierarchy — drop it right above all the road label layers (road-label,-large, road-label-medium , road-label-small). If you’re only seeing the buildings layer on your left panel, click* X to see all layers.

Continue adjusting the color of buildings and the intensity of the light to your aesthetic.

Hold down control and hold click to rotate the pitch of your map for the final screenshot. You've done it!

💥 Tweet your screenshot @mapbox with #mapmadness18 🏀

Free tickets to our first user conference aren't what you're after? Extend this map in the wild properly with Mapbox GL JS.