https://github.com/npl22/map-my-jog
MapMyRun clone, built using Rails and React/Redux
https://github.com/npl22/map-my-jog
hiking runner running walking
Last synced: 7 months ago
JSON representation
MapMyRun clone, built using Rails and React/Redux
- Host: GitHub
- URL: https://github.com/npl22/map-my-jog
- Owner: npl22
- Created: 2017-05-17T00:08:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-21T21:24:19.000Z (almost 9 years ago)
- Last Synced: 2025-06-12T09:53:29.170Z (12 months ago)
- Topics: hiking, runner, running, walking
- Language: Ruby
- Homepage: https://www.mapmyjog.com
- Size: 4.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MapMyJog
[Link to live site](https://www.mapmyjog.com)
MapMyJog is full-stack web application clone of MapMyRun, using Ruby on Rails with a PostgreSQL database on the backend and React.js/Redux on the frontend. Users are able to map out running/walking/hiking routes and keep track of the total distance of the planned routes.
## Features and implementation
### Path creation
The core feature of this application is utilizing Google Maps APIs to mark and render running routes.
This map utilizes 3 APIs, the core Google Maps JavaScript API, the Directions Service API, and the Google Places Web Service API. Users can add markers to the map by clicking on it, and on each click, the app will get walking directions for the current route.
Some notable customizations this app uses for a smooth user experience are,
1) Autozoom turned off
2) Markers snap to nearest walkable path
3) Search by location or get current location
4) Custom markers and labels on map
5) Cumulative distance-display for all route legs
```javascript
initializeMap(initialPosition, zoom) {
const mapOptions = {
center: initialPosition,
zoom
};
this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
this.route = new Route(this.map, this.setState.bind(this));
this.addClickListener();
}
addClickListener() {
this.map.addListener('click', e => {
const lat = e.latLng.lat();
const lng = e.latLng.lng();
const waypoints = this.state.waypoints;
this.setState({ waypoints: [...waypoints, { location: { lat, lng } }]});
this.directions = this.route.getDirections(this.state.waypoints);
if (this.directions) { this.directions.setMap(null); }
});
}
```
## Future Updates
#### Saving Routes/My Routes Page
The next update will allow users to save routes and view them on a user profile page. This will display a thumbnail of the route and the title. Clicking on a route will show a route detail page with a blown up version of the route in addition to some other information.
#### Going on Runs
Besides mapping and saving routes, I want users to be able to record runs as well. Users would record the specific route they ran and the time it took them to complete the route.
#### Dashboard/Statistics
A great feature to have on the user profile page would be a dashboard that keeps track of a user's running statistics. I think that the dashboard on MapMyRun and other running sites can be greatly improved.