Mapper is a map-based travel planner.
You'll need a Mapbox account and Mapbox Access Token to use Mapper. Click here to create an account.
- Fork/clone the repo, then in terminal enter "npm --install" to set up dependencies.
- Follow the instructions in the config.env file (add your key and update the file name to .env)
- In the terminal, enter "npm run start" to start Mapper.
Mapper was built with ReactJS, Mapbox, and Bootstrap.
Some challenges I ran into while building this app:
-
Mapbox depends on HTML5 canvas and WebGL, which React is not a fan of since it directly manipulates the DOM. Even with a well supported library (thanks react-map-gl!), getting them to play nice together was especially challenging for responsiveness. This was also a big reason for animations not being implemented in the MVP.
-
Making geoSpatial data / map view contextually relevant. I had hoped to be able to display a list of top points of interest/locations based on the current map view but it would have been a significant undertaking.
-
Spelling -- "itinerary", "latitude", "longitude" are very prone to typos when they're variable names.
Initial MVP User Stories were as follows:
- As a user, I set a list of locations to be displayed on the map.
- The application should draw a line between every 2 points and show the Itinerary on the map.
- Mark the Start Point with the Red dot.
Bonus:
- The user will be able to create a list of locations on the web page
Behind the scenes, when a user selects a location on the map, a marker is added to map and it's latitude and longitude are used to get additional information via the Mapbox Geosearch API. That additional information is then converted into the "common" name for the selected location and added to the itinerary.
- Improved test coverage
- Implement searching for a location via text
- Implement re-ordering of itinerary
- Implement route animations