Giter VIP home page Giter VIP logo

accessmap-walksheds's Introduction

AccessMap Walksheds

Installation

Full deployment

This repo has a docker-compose-based deployment example.

1. Install docker and docker-compose

The only tools you need for a full deployment are docker and docker-compose. It is recommended that you allow your user to run docker by adding it to the docker group.

2. Acquire data

Get the transportation.geojson file representing the Seattle area. If you don't have direct access to this file, you can build one yourself using the accessmap-data repo.

Place transportation.geojson in deploy/data

3. Build assets

cd into the deploy directory and run

docker-compose -f docker-compose.build.yml up

and wait for all steps to complete

4. Run

Run docker-compose up and visit localhost:2015 in a browser. To run in daemon mode, use docker-compose up -d.

Web app alone (e.g. for development purposes)

accessmap-walksheds is a React-based web application. For an optimal development experience, it is often preferable to run the web app locally, for example so that you can benefit from a faster dev cycle and get features like HMR.

2. Set up environment variables

The web app needs to be informed of where it can retrieve data by setting some environment variables:

  • REACT_APP_MAPBOX_TOKEN: A Mapbox API token.
  • REACT_APP_TILESERVER: The root directory of an AccessMap tileserver.
  • REACT_APP_ROUTESERVER: The root directory of an AccessMap routing server (unweaver).

These environment variables can be exported directly into your environment or set in a .env file in the webapp directory (an example is available at .env.sample).

Mapbox API Token

You can retrieve this by making an account at mapbox.com.

AccessMap tileserver

accessmap-walksheds displays pedestrian network information using custom-built vector tiles and needs to be informed of their location. The easiest way to get access to a reliable tileserver is to use the docker-compose deployment example above: the tileserver will be available at http://localhost:2015/tiles, so you can set the environment variable:

REACT_APP_TILESERVER=http://localhost:2015/tiles
AccessMap routeserver

accessmap-walksheds shows interactive walkshed information about the pedestrian network under different pedestrian profiles. In order to do so, we need to get walkshed data based on that network. In this implementation, that walkshed data is created by the unweaver Python package, a flexible routing server.

The easiest way to get access to an unweaver routing server configured to work with accessmap-walksheds is to use the docker-compose deployment described in the first section, where the route server's root is http://localhost:2015/api/routing, so you can set the environment variable:

REACT_APP_ROUTESERVER=http://localhost:2015/api/routing

Install node dependencies

Run npm ci to get the exact dependencies used during development, as determined by the package-lock.json file.

Note: your system might need to have SQLite development headers installed, as web mapping packages sometimes need them to compile.

Run the web app

In dev mode

Run npm run start. The server will be running at localhost:3000.

In production mode

Run npm run build. This will create static assets in the build directory. To use them, you need to run a web server that points at that directory. The simplest way is to use Python:

python3 -m http.server

This will create a server at port 8000, so your website is available at http://localhost:8000.

You could also use node to do this, but you'll have to install a package:

npm install -g node-static
static -p 8000

accessmap-walksheds's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.