Mapbox Workshop Backchannel

presented by:

Alicia Cowart & Phil White

Email us at: Alicia.Cowart@Colorado.EDU & Philip.White@Colorado.EDU

Links

JavaScript Snippets for your map:

All of the following should be inserted within the <script> tag. See comments in the mapbox_starter.html document for where to place each snippet.


  1. Start by inserting your access token. You can find this under your Mapbox account information:
    2.           mapboxgl.accessToken = 'TOKEN GOES HERE';
  2. Initialize the map. For style, insert the style you created or any of the default Mapbox Styles:
    3.           
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/your_style',
  zoom: 6.75,
  center: [-105.547222, 39.0]
});
  3. Add navigation controls:
    4.           map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  4. Add a GeoJSON layer from the web. Note that we're styling here as plain red circles:
    5.           
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'
    },
  });
});
  5. This time, we'll change the icons to our ski bum. Replace the map.addLayer function with the following:
    6.           
  map.addLayer({
    'id': 'Ski Areas',
    'type': 'symbol',
    'source': 'CO_Ski_Areas',
    'layout': {
      'icon-image': 'ski-bum',
    },
  6. Now we will work on interactivity. We'll start with mouseover effects:
    7.           
map.on('mousemove', 'Ski Areas', function () {
  map.getCanvas().style.cursor = 'pointer';
});

map.on('mouseleave', 'Ski Areas', function () {
  map.getCanvas().style.cursor = '';
});
  7. Next, we'll create a pop up. This code pulls data out of the GeoJSON layer to display in the pop up:
    8.           
map.on('click', 'Ski Areas', function (e) {

  new mapboxgl.Popup()
  .setLngLat(e.lngLat)
  .setHTML('<h3>' + e.features[0].properties.Name + '</h3><p>' + e.features[0].properties.description +'</p>')
  .addTo(map);
});

Nice job! You take it from here!