gaillota / velib-map-react

[ReactJS] Paris Velib map using JCDecaux API - 11/2016

Paris Velib Map

[ReactJS] Training with Velib API in Paris area

Technologies

• ReactJS
• React Google Maps (with Clusters)
• Bulma CSS
• Webpack
• Async fetch w/ Promise

Features

###/!\ This repo does not use Redux for state management.

However, it uses a 3-level bidirectional data flow:

1. The <Stations> component is a container wrapping two components: <Map> and <StationCard>.
2. <Stations> contains the handleMarkerClick function which is passed to the <Map> component as props, which passes it to the <GoogleMapWrapper> component, which also passes it to each <Marker> component created.
3. Then, when a user clicks on a marker, the handleMarkerClick function (passed through the nested Components above as props) is called with the marker as argument, allowing the <Stations> container to retrieve the station selected (marker clicked) and set it in its state.
4. The selected station set in the state is passed to the <StationCard> component, which can then display all the informations about the station.

Preview