Aloft Map Demo

An example of how to use Aloft's map layers in a React application

Demo App

Setup

1. Open this project in CodeSandbox here.
2. Fork the repository if you'd like to save your changes in your CodeSandbox account.
3. Enter your Aloft API Token and your Mapbox Token when prompted.

App Features

Adjust map settings

• zoom
• style

###Adjust layer settings

• Toggle visibility
• Adjust styles
  • fill-color
  • fill-opacity
  • circle-color
  • circle-opacity
  • circle-radius
  • maxzoom
  • minzoom

Code Explanation

MainContainer.js controls the display of the main components, as well as loading the map layers and sources from the Aloft API.

SetupDialog.js configures the app with the required access tokens by setting them in localStorage

Map.js initiates an instance of react-mapbox-gl. This includes the important transformRequest property used to pass the Aloft API token to load the map sources.

MapContainer.js renders Map.js along with components from react-mapbox-gl to display a map with sources and layers. It also displays a Popup component when the user clicks a feature on the map.

RightPanelContainer.js renders the controls that allow the user to change properties on the map and its layers.