NICFI Viewer

Allow users to select NICFI imagery from multiple time periods in a drop-down menu.

Many users of NICFI imagery need to be able to compare imagery from particular time periods. One approach is to give viewers the option to choose between imagery options via a dropdown menu.

This template will help you kickstart your web map with NICFI imagery with the option to switch between imagery from different time periods. It is possible to add similar customizations as detailed in NICFI Basic.

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 to load the map viewing the entire world. If you want the map 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.

const map = new mapboxgl.Map({
       container: "map",
       style: "mapbox://styles/mapbox/satellite-streets-v11",
       // YOUR TURN: Set the center coordinates and zoom level for your map
       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. 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).

// YOUR TURN: Add or remove available time periods for NICFI imagery, from newer to older
     const PERIODS = {
       "Sep 2021": "2021-09",
       "Aug 2021": "2021-08",
       "Jul 2021": "2021-07",
       "Jun 2021": "2021-06",
       "May 2021": "2021-05",
       "Apr 2021": "2021-04",
       "Mar 2021": "2021-03",
       "Feb 2021": "2021-02",
       "Jan 2021": "2021-01",
       "Dec 2020": "2020-12",
       "Nov 2020": "2020-11",
       "Oct 2020": "2020-10",
       "Sep 2020": "2020-09",
       "Jun 2020 - Sep 2020": "2020-06_2020-08",
       "Dec 2019 - Jun 2020": "2019-12_2020-05",
       "Jun 2019 - Dec 2019": "2019-06_2019-11",
       "Dec 2018 - Jun 2019": "2018-12_2019-05",
       "Jun 2018 - Dec 2018": "2018-06_2018-11",
       "Dec 2017 - Jun 2018": "2017-12_2018-05",
       "Jun 2017 - Dec 2017": "2017-06_2017-11",
       "Dec 2016 - Jun 2017": "2016-12_2017-05",
       "Jun 2016 - Dec 2016": "2016-06_2016-11",
       "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