NICFI Compare

Use a swipe interaction to display two sets of NICFI imagery side-by-side for easy comparison.

A common use case for NICFI imagery is to show a before-and-after comparison for a location, or to show changes over time. Rather than having viewers switch between two maps, a swipe interaction allows for more immediate visual comparison.

This template will help you kickstart your side-by-side web map with NICFI imagery. The core structure is similar to the NICFI Viewer template, with the difference that you are effectively creating two web maps with a swipe interaction in between them.

There are a few resources you'll need to get started:

• Sample code template
• A text editor tool (e.g. Atom, VSCode, JSFiddle, Glitch) to write and edit your code.‍
• Mapbox account and access token
• Planet NICFI API key
• A way to publish your web map online - check out these three options.

Open a text editor and create a file called index.html. Set up the document by downloading or copying the demo code into your new index.html file.

Without an access token, the rest of the code will not work.‍

Login or create a free Mapbox account. Find your access token on your Access tokens page or the main page you sign into your Mapbox account.

Note: We recommend using the URL restriction feature on the token to avoid token misuse and want to emphasize that only public tokens should be posted to public repositories. Find out more information about how to securely manage your access tokens.

// YOUR TURN: Add your Mapbox access token
   mapboxgl.accessToken = "{YOUR_MAPBOX_ACCESS_TOKEN}";

The template is set up with two map windows, split down the middle. The map on the left is the ‘beforeMap’ and the map on the right is the ‘afterMap.’

Each map is set to default load viewing the entire world. If you want the maps to load looking at a particular location, you can modify the 'center' and 'zoom' settings. The center point is a pair of longitude, latitude coordinates. Zoom ranges from 0 to 22, with 0 being the lowest zoom level (fully zoomed out) and 22 being the highest (fully zoomed in).

If you want to also set the map’s pitch (tilt angle) and/or bearing (the direction the view is facing) you can add those parameters below the 'zoom` line.'

If you’re not sure what numbers to use, try experimenting with the Location Helper demo.

// YOUR TURN: Set the center coordinates and zoom level for the 'before' map on the left
   const beforeMap = new mapboxgl.Map({
       container: "before",
       style: "mapbox://styles/mapbox/satellite-streets-v11",
       center: [2, -2],
       zoom: 2,
       hash: true
   });
   // YOUR TURN: Set the center coordinates and zoom level for the 'after' map on the right
   const afterMap = new mapboxgl.Map({
       container: "after",
       style: "mapbox://styles/mapbox/satellite-streets-v11",
       center: [2, -2],
       zoom: 2,
       hash: true
   });

Note: The template uses the Mapbox Satellite Streets basemap style to display underneath any NICFI imagery layered on top. You may modify this to any other Mapbox style, including a custom style, if needed.

To access NICFI imagery, you must register with Planet and be granted a NICFI API key. This is different from other Planet access keys that you may already have.

// YOUR TURN: Add your Planet NICFI API key
const NICFI_API_KEY = "{YOUR_NICFI_API_KEY}";

The template code includes a list of time periods available on the NICFI API. These appear as options in the drop-down menu for users to select between, on both the left and right maps. You can remove time periods or add other time periods that are available.

When the map first loads it will default to display the NICFI imagery from the most recent time period on this list (at the top of the list) in the right-side map, and the next most recent imagery on the list in the left-side map.

For example: If you want the left side map to only show the Dec 2015 - 2016 NICFI imagery and the right side map to only show the Dec 2020 imagery, then the first time period in your list should be "Dec 2020": "2020-12" and the second time period in your list should be "Dec 2015 - Jun 2016": "2015-12_2016-05".

You’ve made a web map! But it isn’t a webpage yet… to do that we need some way to host a webpage. There are many different ways to host a web map. You can add your code to a web page that you already manage, or you can explore web hosting options. Read this guide to learn how to publish your finished map on GitHub, Netlify, or Glitch.

Explore options to customize your web map further in the ‘Options’ in the NICFI Basic tutorial.

Need more help? Ask questions on Stack Overflow or contact Mapbox Support. If you are working on a social good project, contact the Mapbox Community Team.

Want to share what you’ve built? Tweet it with #builtwithmapbox