A beginner's guide to web mapping with Mapbox! 1
2. Mapbox is the location data platform for mobile and web applications.
About me 3. what you do / how long you've been there / day to day work
    What we'll cover:
  1. Web map anatomy
  2. Mapbox GL JS API introduction
  3. Customization options
  4. Sample project
4
Prerequisites 5. You should have beginning experience with HTML, CSS, and especially JavaScript

Anatomy of a web map

6
Created with Sketch. My cool website! Web map here! 7. A web map is usually ONE component of a web page. Web maps provide a spatial context to the topic at hand. If used well, they enchance the context of the conversation being had.
8. HTML and CSS implementations are up to you, depending on how your website looks.
Manipulating the map with JavaScript:
Enter the web mapping library 9. What is a web mapping library? It is an interface that you interact with in code (usually JavaScript) to create web maps web devices.
Web mapping libraries 10. These mapping libraries all have different features, price points, and terms of service. We handle the hard part - your role is to make it your own!

Mapbox GL JS

11. The map can be styled on-the-fly as the user interacts with it. You can also customize a style's colors, fonts, and icons to fit your needs.
How to use Mapbox GL JS: A brief overview 12
1) Include the Mapbox GL JS library in your website's header 13
<head>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
 </head>
14
Create a div with a unique id <div id='my-map'></div> 5
Initialize the map with Mapbox GL JS JavaScript code 16
mapboxgl.accessToken = 'pk.eyJ1IjoibmJiMTI4MDUiLCJhIjoiMUlFVjZWVSJ9.jeNyiaRq8MCHlXSlGQZIHA';

var map = new mapboxgl.Map({
  container: 'my-map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-74.50, 40],
  zoom: 9
}); 17
Mapboxgl.Map({...})

Takes your boring empty div on your website and turns it into an interactive map! 18
19. Here's an example of an interactive map
The map can also
Adding your own data to a Mapbox map 21
Oooh, what kind of data? Geodata! 22
Data that has a spatial component 23
Common geodata formats: 24. Since it is a subset of the JSON format, geojson is easiest to work with since it feels familiar to those who already work with JavaScript.
Where do I get geodata? 25. Federal, state, and local governments have many types of open data. Nonprofits often take this data modify it for their needs. You can also purchase your own data, depending on what you need. DC government has a lot of amazing open source data.
Ok, I have my geodata. Now what? 26
Options: 27
Which is best for me? 28. Well, it depends
Upload your geodata to Mapbox if the data won't change often 29
Add the geodata on-the-fly if you're requesting it from another source and it changes often. 30. A common use case is to request GeoJSON data from an API and then display the result. The demo I'll share for this talk references a local GeoJSON file to dynamically add geodata to the resulting map.
I've added my geodata to my map, am I done? 31. The demo project will show how to add GeoJSON data to a map, but for now lets assume we've done this already
No way - we're just getitng started! 32
Web maps are awesome because they allow you to add interactivity! 33
Examples of interactivity: 34
Popups 35
Hover effects 36
Filtering 37
This is just a small sample of what you can do...the possibilities really are endless! 38
Questions?
┬┐Preguntas? 39
Learning more about web maps & cartography: 40
Let's play with a web map! 41
Sample project:
A store locator demo 42
43. This demo consists of one web page that contains a web map and a sidebar. When a location on the map is clicked, the sidebar is populated with the store's information.
Demo: https://github.com/captainbarbosa/store-locator/

@capnbrbsa ┬Ě nadiabarbosa.com

Tutorials: mapbox.com/help/tutorials
Examples: mapbox.com/mapbox-gl-js/examples
44