Active travel provision and potential in planned and proposed development sites.
This assumes you're running this on Apache.
# Enter your webserver's files area
cd /var/www/
# Clone the repo
git clone https://github.com/cyipt/actdev-ui
cd actdev-ui
# Clone the library within the repo
yarn install
# Add an Apache configuration
sudo cp -pr .apache-vhost.conf.template /etc/apache/sites-available/actdev.conf
sudo a2ensite actdev
sudo service apache2 restart
# Add local host
sudo sh -c "echo '127.0.0.1 actdev' >> /etc/hosts"
# Copy the config template and add API keys
cp .config.js.template .config.js
# Use a text editor of your choice to add the API keys to the config file
# Open your web browser at http://actdev/
The structure of the code is simply a file /js/actdev.js (launched in /index.html) which simply:
- Declaratively defines the overall map settings, e.g. start position, default basemap, API keys, etc.
- Declaratively defines each layer and their properties, e.g. data sources, styling, etc.
- Loads the underlying library, Mapboxgljs.LayerViewer, supplying the settings and layer definitions.
The LayerViewer library does all the heavy lifting and aims to provide a very featureful, flexible and asyncronous handling of multiple data layers, while not requiring large amounts of data to be loaded up-front as static files.
To make changes/additions to layers, amend /js/actdev.js, which contains the layer declarations.
The layer definitions can include any of the properties supported by the underlying library.
To add a new layer, simply:
- In
/js/actdev.js, add the new layer and its parameters - In the layout file,
/index.html, add in a new menu entry in the menu<nav>section - In the layout file,
/index.html, add a panel in<div id="sections">which provides some explanation
To amend an existing layer, simply:
- In
/js/actdev.js, update the parameters required
GPL3.
University of Leeds and CycleStreets Ltd, 2021.