smackthat/plants-of-the-world

An interactive Earth with plant zones and information using the Trefle API and MapBox GL.

plants-of-the-world's Issues

D3js Earth globe

Make a D3js Earth globe using React. Just the basic functionalities, extra functionality (like tiles, layers, etc.) will be specified in other tickets.

Functionalities:

• Should parse a map from GeoJSON
• Should be able to rotate the globe
• Should be able to zoom the globe
• Should be able to zoom on the chosen region

Lazy load plants images in plants list

Load images upon entering the viewport.

Setup client API request caching

Making requests to the Trefle API oughta be cached, because loading already once loaded resources is unnecessary and costly. It is best to avoid this sort of traffic. Implement a client side API cache.

The Nodejs backend

Build a backend for the app by using Nodejs and Express. Should serve as a proxy to the Trefle API, so the API secret token is kept secret. Also, in production mode serves the client side build.

Functionalities:

• Should handle request that gets all the plants for a selected region from the API.
• Should handle a request that gets single plant's info.
• Should get distribution zones for selected plant.
• Should serve the client build in production.

User should be able to view plant information

There should be a list of plants and a view for viewing the specific properties of one plant.

Functionalities:

• Create a list view
• Create a single item view

Single plant view: showing selected information on the globe

Eg. clicking "Show places where this plant grows" (or something) would highlight all the corresponding regions on the map. Also "Show where extinct", "Show where introduced", etc.

Implement Material UI

To make it look prettier 'n all.
Oughta have:

• A scrollable list with image thumbnails and titles (plants list)
• The scrollable list should have paging (the plants from Trefle come in batches of 20)

Refactor project structure

Client side code in its own folder and vice versa for the backend code. Also, separate components into own files, and API call logic, etc.

Convert code to Typescript

Because so much cleaner. Javascript ugly is. Ugh.

This oughta be done quite early.

Convert the map GeoJSON to TopoJSON

This might make it more optimized (and faster for rendering). Find a way to optimize the file size.

Map layers

Including lakes and rivers, vegetation zones, habitated areas., etc. Just need to find data sources for these (shapefiles, GeoJSON, csv, whatever).

Maybe vector tiles from MapBox etc.?