Following Mexico’s Journey in the 2018 FIFA World Cup using Mapbox

4 min readJul 24, 2018

Riding the waves of this year’s World Cup, Mapbox setup an online competition to showcase our favorite team’s story using maps. Having used Mapbox to build a few interactive maps for work, I thought this would be a great opportunity to let loose and build something different.

I started off building a style for the map using Cartogram, an amazing tool by Mapbox that pulls color schemes from images to create custom map styles in seconds. Crazy right?

From there I took my new Mapbox style into Studio and refined the theme to better fit the data that I would be displaying. After a few rounds, some additional data layers (bathymetry, country/sovereign polygons, and names), and a lot of hex code pushing, I polished off the design of the map and got it setup into my html document.

For this project I wanted to create a slideshow of Mexico’s matches using a dual map setup so users could quickly go through each match and see a side-by-side comparison of each team’s geographic location. Using Foundation Sites to build the framework of the site, in combination with Luke Haas Scrollify jQuery plugin, I was able to choreograph the slides and scrolling of the site’s content with the map using a switch to turn on-and-off the different map layers as well as positions. Using this in sync with Scrollify’s $.scrollify.next()and $.scrollify.previous() functions I was able to combine each slide with it’s corresponding home and away countries.

function setActiveChapter(chapterName) {
if (chapterName === activeChapterName) return;switch (chapterName) {case 'hero':
  home.setLayoutProperty('LAYER-NAME-STROKE', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-FILL', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-EXTRUDE', 'visibility', 'none');
  home.setPaintProperty('country-extrude-germany', 'fill-extrusion-height', 150000);
  home.setPaintProperty('country-extrude-mexico', 'fill-extrusion-height', 150000);
  away.flyTo({
     bearing: 180,
     center: [123.4811, -7.1054],
     pitch: 0,
     zoom: 2.308
  })
  break;
case 'one': // Germany vs Mexico
  home.setLayoutProperty('LAYER-NAME-STROKE', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-FILL', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-EXTRUDE', 'visibility', 'none');
  home.setPaintProperty('country-extrude-south-korea', 'fill-extrusion-height', 200000);
  away.setPaintProperty('country-extrude-mexico', 'fill-extrusion-height', 400000);
  home.setPaintProperty('country-extrude-south-korea', 'fill-extrusion-height', 150000);
  away.flyTo({
     bearing: 0,
     center: [-105, 23.4],
     pitch: 24,
     duration: 2800,
     zoom: 4.825
  });
  break;
case 'two': // Korea vs Mexico
  home.setLayoutProperty('LAYER-NAME-STROKE', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-FILL', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-EXTRUDE', 'visibility', 'none');
  home.setPaintProperty('country-extrude-south-korea', 'fill-extrusion-height', 200000);
  away.setPaintProperty('country-extrude-mexico', 'fill-extrusion-height', 400000);
  home.setPaintProperty('country-extrude-germany', 'fill-extrusion-height', 150000);
  home.setPaintProperty('country-extrude-sweden', 'fill-extrusion-height', 150000);
  away.flyTo({
     bearing: -67,
     center: [-102, 23.4996828],
     pitch: 56,
     duration: 2800,
     zoom: 3.825
  });
  break;...}

Here’s the init script for Scrollify and Mapbox:

function initMap(){   // Add Loading Animation
   homeMapContainer.addClass('is-loading');
   awayMapContainer.addClass('is-loading');   // Disable/Enable Interactions
   home.scrollZoom.disable();
   home.touchZoomRotate.disableRotation();
   home.dragPan.enable();
   home.doubleClickZoom.enable();
   home.on('load', function() {
    homeMapContainer.removeClass('is-loading');
   });
   
   away.scrollZoom.disable();
   away.touchZoomRotate.disableRotation();
   away.dragPan.enable();
   away.doubleClickZoom.enable();   away.on('load', function() {
      awayMapContainer.removeClass('is-loading');
   });});$(function() {
   $.scrollify({
      section: '.is-section',
      easing:"easeInOutQuad",
      scrollSpeed:1400,
      scrollbars:false,
      sectionName:false,
      setHeights:false,
      updateHash: false,
      overflowScroll:false,
      before:function(i) {
         var activeSlide = $(".is-slide.is-active");
         activeSlide.addClass("remove");
         $("[data-slide=" + i + "]").addClass("is-active");
         activeSlide.removeClass("remove is-active");         var activeSection = $('.is-section.is-active');
         activeSection.addClass('remove');
         $("[data-section=" + i + "]").addClass("is-active");
         activeSection.removeClass('remove is-active');
      },
      afterRender() {
         $.scrollify.update();
         $("[data-slide=0]").addClass("is-active");
         $("[data-section=0]").addClass("is-active");
      }
   })
})

After finalizing the content and the choreography, I optimized the layout I originally built to work responsively on mobile and desktop. Try resizing the browser and you’ll see the the map switch from a horizontal split to a vertical split.

You can also click on the vector maps of each country for an example of Mapbox’s flyTo({}) function.

<button onClick="flyToFlag_de()" class="fly-to-button">
   <img src="link/to/my/image.svg" class="team" alt="Team Flag" />
</button><script>
...
function flyToFlag_de() {
  home.flyTo({
    bearing: 0,
    center: [9.925, 50.75],
    pitch: 24,
    speed: 0.25,
    zoom: 5
  });
  home.setLayoutProperty('LAYER-NAME-STROKE', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-FILL', 'visibility', 'none');
  home.setLayoutProperty('LAYER-NAME-EXTRUDE', 'visibility', 'none');
}
...
</script>