Mapbox Quick Launch is a workflow that creates a situational awareness dashboard. It enables users to connect to their internal data sources, collaboratively annotate the map, and share knowledge with their stakeholders. Quick Launch works out of the box in both online and offline environments and can be customized to fit any use case.
These instructions will create a development version of the dashboard and set up a live-reloading local environment. To deploy into production, see Deployment. If you need a fully offline development environment, you can download a ZIP file from Releases that includes all development dependencies.
Quick Launch provides the following functionality:
- Connection to Mapbox.com OR Mapbox Atlas
- Search Bar
- Swappable base styles (defaults below)
- Mapbox Streets
- Mapbox Light
- Mapbox Dark
- Mapbox Satellite
- Drag-and-Drop data
- Geojson
- Shapefiles
- CSV
- KML
- Annotations: Draw your own shapes and add metadata
To begin development, you will need the following:
You will need a valid Mapbox token to make requests to Mapbox APIs with a public (pk) token scope. Sign up for Mapbox here and find your access token here. If you are developing against Atlas, you will need the token provided from your Atlas dashboard. Atlas Search is required for offline geocoding to function.
There is sample geojson data provided in the data folder. Quick Launch supports KML, CSV, geoJSON, or Shapefiles via drag-and-drop.
If you wish to use Mapbox or Atlas hosted tilesets - either add them to a style and update the chosen style or add the tilesets to the map programatically.
map.addLayer({
"id":"layerid",
"type":"layertype",
"source":{
type:'vector',
url:'mapbox://tilesetid'
},
"source-layer":"source",
[...]
})You must have Node v8.15+ installed.
For development purposes only, you will need to have Docker installed. Docker is used to start a local MongoDB instance. This instance WILL NOT preserve data if you choose to shut it down.
For more persistent storage, you may choose to install Mongo directly.
For production use, or if you do not wish to use Docker, you must install MongoDB v4.0.3+. For instructions on installing Mongo in your environment, consult the MongoDB documentation.
For development, this dashboard will run a Dockerized version of Mongo. You can use this in the production version of your application, but we recommend you deploy an independent version to avoid data loss.
The version of MongoDB used in the Docker container is MongoDB Community edition. This is free-to-use and features are documented on the MongoDB website.
To use enterprise features, you must procure your own MongoDB Enterprise license and update the Quick Launch accordingly. Mapbox will not provide MongoDB support.
srcconfig.js: Initial configuration script to build your custom dashboard.app.js: Server script to communictate with MongoDb.- template: folder that contains templated HTML and Javascript files for dashboard.
- vendor: folder that contains static JS and CSS files for offline dashboard functionality.
data- Contains sample
data.geojsonfor testing drag-and-drop functionality.
- Contains sample
If you wish to develop in a fully offline environment, please download QuickLaunchOffline.zip from Releases. Then skip to Step 3.
- Clone this repository
git clone [email protected]:mapbox/quickLaunch.git
cd quickLaunch- Install Dependencies
npm ci- Run the initial config
npm run config
The Favicon and Logo are optional and do not affect the functionality of Quick Launch.
This will update the template code and produce a development-ready version of the dashboard, as well as start the Dockerized MongoDB. If you would like to verify that MongoDB is running, run curl localhost:27017 and you should see the following:
- Start the website server and application server
npm startYour application will auto-compile and a browser window will open at http://localhost:1234
If you are using Mapbox.com as your endpoint, the layer toggle will work as shown below. If you are using Atlas, you will need to swap the layers and IDs to styles hosted in Atlas.
IDs and labels are found in index.html. The respective button id will be the text used to swap out layers in index.js shown below.
<div id="basemap-toggle" class="p12 flex-parent w325">
<button id="streets" class="btn btn--pill btn--pill-stroke btn--red btn--pill-hl txt-s flex-child--grow">Streets</button>
<button id="light" class="btn btn--stroke btn--pill-stroke btn--red btn--pill-hc txt-s flex-child--grow">Light</button>
<button id="dark" class="btn btn--stroke btn--pill-stroke btn--red btn--pill-hc txt-s flex-child--grow">Dark</button>
<button id="satellite-streets" class="btn btn--stroke btn--pill-stroke btn--red btn--pill-hr txt-s flex-child--grow">Satellite</button>
</div>To update layer toggling with Atlas styles, update the following code in index.js.
function switchLayer(layer) {
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("btn--pill");
buttons[i].classList.add("btn--stroke");
}
const layerId = layer.target.id;
layer.target.classList.remove("btn--stroke");
layer.target.classList.add("btn--pill");
//Update the line below with Atlas style IDs
//Example: mapbox://styles/atlas-user/layerid
map.setStyle("mapbox://styles/mapbox/" + layerId + "-v9");
}If you are using Atlas Search, you will need to update the gl-geocoder settings in order to point to the correct endpoint.
map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
origin: <AtlasURL>
}));During the build process, you may see the following image in your terminal.
This is a warning related to the build tool, and can safely be ignored at this time.
Quick Launch can be configured to work with Atlas and Mapbox.com. In the case of Atlas, this dashboard assumes that Atlas has been installed, is running, and the URL is known.
To build for production, you will need to run npm run build. This will compile all your code and move it to the build folder. This folder will exist prior to running the build command, as the development compiler will output data to that folder.
However, this code is not optimized, so you should run build before deploying.
Once building has completed, you can move the contents of the build folder to its final destination and serve it with the web server of your choice.
You can also serve the Quick Launch directly by running npm run deploy instead of npm run build. This will build and start a static web server at port 5000.
If you choose to run the entire application from the build directory (following npm deploy) then you may to know the external IP address of the host. To print this infomation run node network.js from the root of this repository.
If you prefer to run the application in your own infrastructure, follow these guidelines:
- The web application must include all the files found in
build. As long as they are consolidated, the application can be served by any static site service. - The Mongo middleware can be found in
build/app. This can be moved, but you must also includenode_modulesin order for it to run. - MongoDB (or any MongoDB-compliant API) can run anywhere. You must remember to alter the middleware to reference the correct endpoint. This can be done in configuration or edited by hand afterwards.
- Mapbox.com / Mapbox Atlas: Platform
- Mapbox GLJS: Rendering
- Docker: Development Environment
- MongoDB: Database
- TurfJS: Geospatial Processing
- Mapbox GL Geocoder: Search
- axios: HTTP
- csv2geojson: File Conversion
- shapefile: File Converstion
- express: Application server
- parcel: Development & Deployment
- Zeit serve: Static web server
Mapbox Solutions Architecture
This project is licensed under the BSD-3-Clause License - see the LICENSE.md file for details