whitephil.github.io/mapbox_workshop.html at master · whitephil/whitephil.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Mapbox Workshop Backchannel</title>
  <meta name="description" content="Mapbox workshop backchannel">
  <meta name="author" content="Phil White">

  <link rel="stylesheet" href="css/theme/skistyle.css?v=1.0">

</head>

<body>
  <h1>Mapbox Workshop Backchannel</h1>
    <p style="color:#FFD700">presented by:</p>

  <h3>Alicia Cowart & Phil White</h3>
    <p><span style="color:#FFD700">Email us at: </span><a href="mailto:alicia.cowart@colorado.edu">Alicia.Cowart@Colorado.EDU</a> & <a href="mailto:philip.white@colorado.edu">Philip.White@Colorado.EDU</a></p>

  <h3>Links</h3>
    <ul>
      <li><a href="https://docs.google.com/presentation/d/1uh0jufTZ_D0n2X_RHfOLxMbU_wS07T1pFgyLV1ZJ4pA/edit?usp=sharing" target="_blank">Follow the Slides</a></li>
      <li><a href="https://docs.google.com/document/d/1TQYQGt9mzCcL4CVIguecPJrfP4FnyZuKLTvRK71wDbM/edit?usp=sharing" target="_blank">Mapbox Studio step-by-step instructions</a></li>
      <li><a href="https://github.com/outpw/workshopdata/raw/master/Mapbox_Stuff.zip" target="_blank">Download the Workshop Materials</a></li>
      <li><a href="https://www.mapbox.com/" target="_blank">Mapbox</a></li>
      <li><a href="https://docs.mapbox.com/mapbox-gl-js/examples/" target="_blank">Mapbox Documentation</a></li>
      <li><a href="https://outpw.github.io/mapbox_boilerplate.html" target="_blank">Completed Map Boilerplate Example</a></li>
    </ul>
  <h3>JavaScript Snippets for your map:</h3>
    <p>All of the following should be inserted within the &lt;script&gt; tag. See comments in the mapbox_starter.html document for where to place each snippet.</p><br>
    <ol>
      <li style="line-height: 30px">Start by inserting your access token. You can find this under your Mapbox account information:</li>
        <pre>
          <code>mapboxgl.accessToken = 'TOKEN GOES HERE';</code>
        </pre>
      <li style="line-height: 30px">Initialize the map. For style, insert the style you created or any of the default <a href="https://docs.mapbox.com/api/maps/#styles" target="_blank">Mapbox Styles</a>:</li>
        <pre>
          <code>
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/your_style',
  zoom: 6.75,
  center: [-105.547222, 39.0]
});
          </code>
        </pre>
      <li style="line-height: 30px">Add navigation controls:</li>
        <pre>
          <code>map.addControl(new mapboxgl.NavigationControl(), 'top-left');</code>
        </pre>
      <li style="line-height: 30px">Add a GeoJSON layer from the web. Note that we're styling here as plain red circles:</li>
        <pre>
          <code>
map.on('load', function () {

  map.addSource('CO_Ski_Areas', {
      type: 'geojson',
      data: 'https://raw.githubusercontent.com/outpw/workshopdata/master/Colorado_Ski_Areas.geojson'
  });

  map.addLayer({
    'id': 'Ski Areas',
    'type': 'circle',
    'source': 'CO_Ski_Areas',
    'paint': {
      'circle-radius': 6,
      'circle-color': '#B42222'
    },
  });
});
          </code>
        </pre>
      <li style="line-height: 30px">This time, we'll change the icons to our ski bum. Replace the map.addLayer function with the following:</li>
        <pre>
          <code>
  map.addLayer({
    'id': 'Ski Areas',
    'type': 'symbol',
    'source': 'CO_Ski_Areas',
    'layout': {
      'icon-image': 'ski-bum',
    },
          </code>
        </pre>
      <li style="line-height: 30px">Now we will work on interactivity. We'll start with mouseover effects:</li>
        <pre>
          <code>
map.on('mousemove', 'Ski Areas', function () {
  map.getCanvas().style.cursor = 'pointer';
});

map.on('mouseleave', 'Ski Areas', function () {
  map.getCanvas().style.cursor = '';
});
          </code>
        </pre>
      <li style="line-height:30px">Next, we'll create a pop up. This code pulls data out of the GeoJSON layer to display in the pop up:</li>
        <pre>
          <code>
map.on('click', 'Ski Areas', function (e) {

  new mapboxgl.Popup()
  .setLngLat(e.lngLat)
  .setHTML('&lt;h3&gt;' + e.features[0].properties.Name + '&lt;/h3&gt;&lt;p&gt;' + e.features[0].properties.description +'&lt;/p&gt;')
  .addTo(map);
});
          </code>
        </pre>
    </ol>
  <h2>Nice job! You take it from here!</h2>
</body>
</html>