MapBox Demo using React and Vite

This is a simple demo to explore and test out Map Box. View Map

There are several things in this demo that I would suggest changing if you are going to use it for production.

• Only pull in the turf.js individual packages that are needed.
• Make the MapBox style be a local JSON file vs.the url. We are using the url for this demo as it is easy to update things in mapbox studio and see the changes instantly. Using JSON file keeps the map styled even if the MapBox server is not responding.

Local Install

In order to run this locally you will need your own MapBox and NPS keys:

• MapBox Account
• NPS Developer API Once you have both the keys you will need to create a copy of the .env.template file by running cp env.template .env. Then add your keys to the .env file.

Then run:

npm install
npm run dev

MapBox

This is based off of two tutorials from MapBox:

• Store Locator
• Sort Stores

MapBox Options that I pulled in:

• MapboxGeocoder
• NavigationControl
• GeolocateControl

Turf.js

I are using Turf.js to calculate the distance between MapboxGeocoder and GeolocateControl and the closest location. I use turf to create the bounding box (lat and long) around searched location and nearest location keeping the two location in the map view area.

React + Vite

This was built on the base Vite + React by running npm create vite@latest