developmentseed / gl-director

GL Director, an interface to easily generate terrain flyovers for your app using Mapbox GL JS

Mapbox GL Director

An interface to easily generate terrain flyovers for your app using Mapbox GL JS

Installation and Usage

The steps below will walk you through setting up your own instance of the project.

Install Project Dependencies

To set up the development environment for this website, you'll need to install the following on your system:

• Node (see .nvmrc) (To manage multiple node versions we recommend nvm)
• Yarn Package manager

Install Application Dependencies

If you use nvm, activate the desired Node version:

nvm install

Install Node modules:

yarn install

Usage

Config files

All the config files can be found in app/assets/scripts/config. After installing the projects there will be 3 main files:

• local.js - Used only for local development. On production this file should not exist or be empty.
• staging.js
• production.js

The production.js file serves as base and the other 2 will override it as needed:

• staging.js will be loaded whenever the env variable DS_ENV is set to staging.
• local.js will be loaded if it exists.

The following options must be set: (The used file will depend on the context):

• value - Description

Example:

module.exports = {
  value: 'some-value'
};

Starting the app

yarn serve

Compiles the javascript and launches the server making the site available at http://localhost:9000/ The system will watch files and execute tasks whenever one of them changes. The site will automatically refresh since it is bundled with livereload.

Deployment

To prepare the app for deployment run:

yarn build

or

yarn stage

This will package the app and place all the contents in the dist directory. The app can then be run by any web server.

gl-director's Issues

Feature request: support more than two camera points

App currently allows two shots and animates between the two locations. Adding additional camera points would open the door for more impressive animations.

Feature request: Export video

There seems to be some ability now to generate hi-res mp4 video from GL JS maps: mapbox/mapbox-gl-js#10172

It would be super cool if we could add an option to export video here.

If this seems interesting, am happy to take a look.

Feature request: enable place labels

Enable users to toggle place labels on flyovers, and include in exports.

Camera bumps over terrain

When I generate a flyover using GL Director, it appears smooth. Yet when I export and download the generated code, the camera appears to bump along the terrain.

Here’s a screen capture of the animation in Director:
https://davemaps.com/assets/vid/mapbox-3d-flyover-campbell.mp4

And here’s the same scene once exported, demonstrating the “bumpy” camera:
https://campbell-river-flyover.glitch.me/

App crashes right after selecting an example (or without selecting an example)

Hey there!

For me, the deployed app at https://developmentseed.org/gl-director/ is crashing after the first step, i.e. after selecting an example or dismissing the “Select an example” modal. I could reproduce this in Firefox and Vivaldi/Chrome.

The following error message is shown:

Oh Snap :'( Something went wrong
This on us, and we'll fix it as soon as possible

Error: Style is not done loading

Video.mov

Feature request: Enable globe projection

The new globe projection is available in Mapbox v2.9.1: https://docs.mapbox.com/mapbox-gl-js/example/globe/