Website: https://nst.guide
Open source website for exploring National Scenic Trails, starting with the Pacific Crest Trail.
This uses Deck.gl and React Map GL to render the map. React Map GL is essentially a wrapper around the base Mapbox-GL-JS to allow it to work well with React. Deck.gl is a set of extensions on React Map GL to render cool geospatial visualizations with Web GL. Note that here there are two separate rendering layers: Deck.gl and React Map GL have no knowledge of what the other is displaying. The only tie between them is Deck.gl keeping track of the map location state.
Using both Deck.gl and React Map GL allows me to use the best features of each. Deck.gl enables cool 3D stuff, including hopefully 3D terrain visualizations in the near future. However Deck.gl doesn't render vector tiles as nicely as Mapbox does. Rendering vector tiles with Mapbox allows me to get the benefits of their smaller file sizes while also easily inserting new layers in between the existing style stack, so that I can insert new layers underneath existing labels.
Because I use each program for rendering, I need to be able to pick objects from
each source. I currently first call Deck.gl, and if it finds any objects under
the cursor return those. If not, send the x, y position of the cursor to React
Map GL/Mapbox GL and run queryRenderedFeatures to find the object rendered at
that position with the Mapbox rendering.
I generate map layers from several different sources using code in the nst-guide/data repository. Check out that repository or its documentation website for more information about how I generate the data for each layer.
This project is an intermediate step in hopefully developing a free, open source navigation app for the Pacific Crest Trail built on React Native. In order to support free offline maps without needing to worry about API fees, I generated my own vector topographic maps using OpenStreetMap data, USGS elevation data for the contours and Terrain RGB tiles, and USDA National Agriculture Imagery Program (NAIP) data for the aerial tiles.
More information about the map style and how to generate your own data is available on the style repository: nst-guide/osm-liberty-topo.
This website is made with React, GatsbyJS, Deck.gl, and React Map GL. I use Semantic UI React for the UI.
If you're interested in contributing to the project, check out the backlog of issues, or just read through the code and tell me in an issue how to improve it! I'm relatively new at front-end development, so there's a lot that could be improved!
To get started, assuming you have the Gatsby CLI installed:
git clone https://github.com/nst-guide/web
npm install
gatsby developnpm installto install dependenciesgatsby developto run a hot-reloading development servernpm run buildto build the project and save locallynpm run deployto build the project and upload to S3 (which I use for hosting)