Developers please see current milestones here:
https://github.com/Greenstand/treetracker-web-map/milestones
Big picture UX/UI challenges are tracked at:
https://github.com/Greenstand/treetracker-web-map/issues?q=is%3Aissue+is%3Aopen+label%3AUX%2FUI
Displays location and details of all trees that have been tracked.
Live map is at www.treetracker.org
For more details see the [Tree Tracker Web Map Wiki] (https://github.com/Greenstand/treetracker-web-map/wiki)
We provide a development environment through docker that can run on your local environment. You can also develop locally without docker if you are willing to install Postgres and postGIS (see 'Developing locally without docker' below)
To run docker on a local machine, you will have to install Docker first. Docker is a linux container technology, so running it on Mac or Windows requires an application with an attached linux VM. Docker provides one for each OS by default.
You can alternatively install Docker for Mac using homebrew, using the following command
$ brew cask install docker
Docker for Windows Please note Docker for Windows only works for Windows 10 Enterprise and Windows 10 Pro editions.
To install on linux, you can run sudo apt-get install -y docker-ce but there is additional setup to verify keys, etc.
Because of the application architecture, it is absolutely necessary to have NodeJS for package management. Here are the following methods of installation for the most popular operating systems.
Download it from the official website, here
To install NodeJS on MacOS, run this command:
- brew install node
To install NodeJS on Ubuntu, run the following commands:
- sudo apt-get update
- sudo apt-get install nodejs
- sudo apt-get install npm
- nodejs -v
Clone this repository
git clone git@github.com:Greenstand/treetracker-web-map.git
cd treetracker-web-map
Run the setup script. This script installs node modules, builds docker containers, and starts them
./dev/setup.sh
Install the server's config.js file in the folder server/config/. You can get this file by asking another contributor for it on Slack.
Install the client's config.js file in the folder client/js/. You can get this file by asking another contributor for it on Slack.
You can now view the treetracker web map at http://localhost:8080 Note: For older OS (eg. win7, win8) Docker toolbox should be used and the app can be viewed on http://192.168.99.100:8080
To stop the dev environment use
./dev/down.sh
To start the dev environment back up use
./dev/up.sh
Now to view the map. Goto client folder than to js folder, next make a new file and name it config.js and copy the content in config.js.example and paste it in config.js .(If required make the necessary adjustment to address (eg. http://192.168.99.100:8080) else you are ready to view the map)
Just edit as you normally would to view changes in your development environment.
- Install postgres
- Install postGIS
- Create a database named 'treetracker'
- Import our developer seed into your database. Seed can be downloaded at https://developer-resources.sfo2.cdn.digitaloceanspaces.com/treetracker_developer_seed.sql.gz
- Configure server/src/config/config.js to point to your local database
- Install node modules, run npm i in server/ folder
npm i
- Install supervisor globally
npm i -g supervisor
- Run server.js with CORS restrictions lifted
NODE_ENV=dev supervisor server.js
- Open client/js/config.js from the project root. It should contain only the following 2 lines
var configTreetrackerApi = 'http://localhost:3000/';
var sentryDSN = null;
- Open the index.html file of the webmap in a web browser. Use file:/// protocol, not a localhost address.
- Make sure all npm modules are installed under client and server.
cd client
npm i
cd server
npm i
- Start the server
cd server
npm run dev
- Start the client
cd client
npm run dev
- Open the web map in the browser with URL: http://localhost:3001
NOTE both server and client support hot code loading, means the server would automatically refresh after files were modified. But at this point, in the browser, we can not automatically refreshing the web map after files changed, need to refresh the web page manually. But no need to restart the client service, cuz the bundle.js generated by webpack has been re-compiled for the service. We are thinking about make refreshing web map page automatically, any help is welcome!
Our docker-compose settings for volume mounting don't work out of the box for at least some versions of Windows. Please see this thread for more information, and update this document with usage details if this solves your issue.
On Windows, the easiest way to develop and debug Node.js applications is using Visual Studio Code. It comes with Node.js support out of the box.
https://code.visualstudio.com/docs
Ubuntu: docker-compose - command not found:
- $ sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
- $ sudo mv ./docker-compose /usr/bin/docker-compose
- $ sudo chmod +x /usr/bin/docker-compose
docker-compose - permission denied:
- cd to /usr/bin
- Enter command sudo chmod 777 docker-compose
docker: Got permission denied while trying to connect to the Docker daemon socket
- $ sudo groupadd docker
- $ sudo usermod -aG docker $USER
Version in "./dev/docker-compose.yml" is unsupported.
- confirm docker-compose is installed
- $ docker-compose -v
- If docker-compose is installed:
- $ sudo curl -L https://github.com/docker/compose/releases/download/1.24.0/docker-compose-`uname -s
-uname -m` -o /usr/local/bin/docker-compose - $ sudo chmod +x /usr/local/bin/docker-compose
- if docker-compose is not installed:
- $sudo apt-get install docker-compose
Error: Failed to load resource: the server responded with a status of 404 (Not Found) map.js:18 Uncaught ReferenceError: configTreetrackerApi is not defined at map.js:18
Solution: To Solve this issue, go into the client/js folder, and either change the file config.js.example to config.js, or copy it into a file of the same name.
For performance and UX purposes, since this map needs to deal with an enormous amount of trees, a clustering strategy is used to group those trees, showing information in a way that is more digestible for the end-user.
Although this feature is already implemented, performance optimizations are a work in progress.
When there is a need to tweak the clusterization behavior, the cluster radius and zoom can be overridden specifying query strings. For example, if you need to load the map with an initial zoom level of 15, and a radius of 0.001 you will access it like this:
dev.treetracker.org?zoom=15&clusterRadius=0.001
To find the correct value for the cluster radius in a given zoom level, play with some ranges between 0.1 and 0.00025. However, feel free to experiment however you like.
When these values are overridden, you can zoom and drag the map freely, while keeping the same clusterization behaviors.
Another useful tool to use in conjunction with this is the web browser's console (in Chrome or Firefox, hit F12 to open it). Whenever the map is updated, current zoom level and cluster radius used will be output to the console, so you have a better idea of what is going on.
Future:
- Filters and Statistics
- View photo together with tree data
- View planter profile.
We use Jest to build tests.
- To test client
cd client
npm test
- To test server
cd server
npm test