At a glance

walk this way is a minimalist tool where users can see how their daily commute affects their daily and yearly carbon footprint.

Live Link

Features

• Worldwide Google Map API integration
• Average C02 emitted based on how the user prefers to travel
• Custom carousel with cited facts based on the user's route
• Runner up for 1st place in Mintbean's December 2020 Social Justice Hackathon

Code Highlights

Google Maps Integration

One of the most challenging pieces of this hackathon project, yet simple in retrospect, the Google Maps API allows the user to see the entire globe. It also layers routes based on the user's mode of transportation, which is given information through props.

  const containerStyle = {
      width: '45vw',
      height: '81vh',
      borderRadius: '40px',
    };
    let { origin, directions} = this.props;

    let center = Object.keys(origin).length === 0 ? {lat: 40.7309, lng:-73.9973} : this.props.origin;

    return (
      <LoadScript
      googleMapsApiKey={key}
      libraries={["places"]}
      >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={15}
        onLoad={this.onLoad}
        >
          <DirectionsRenderer directions={directions} />
      
      </GoogleMap>
    </LoadScript>
  )
}

Google Routes Integration

walk this way offers the user the ability to find a route based on walking, biking, driving, or public transit. Using the Google Directions API and Google Geocode API, we were able to allow the user to search any destination that is connected by land. This includes cross country and international locations.

This was done by taking the adddresses that the user put in the origin and destination inputs, and then parsed through Google's Geocode API. After this, the route is given to Google Route API based on the state of the user's query (travel mode, origin latitiude/longitude, and destination latitude/longitude). This then updates the slice of 'direction' state, which is passed ddown through ownProps through to the above mentioned map container.

 Geocode.fromAddress(this.destination.value).then( res => {
          let {lat, lng} = res.results[0].geometry.location;
          this.setState({ destination:{lat: lat, lng: lng} })
          },
          error => {
            console.error(error);
          }
        ).then(() => {
          let {travelMode, origin, destination} = this.state;

            dService.route({
              origin: new google.maps.LatLng([origin.lat], [origin.lng]),
              destination: new google.maps.LatLng([destination.lat],[destination.lng]),
              travelMode: google.maps.TravelMode.[travelMode],
            }, (result, status) => {

              if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                  directions: result,
                  searched: true
                });
                this.calculateCarbon(this.state.directions.routes[0].legs[0].distance.text)
                this.toggleModal()
              } else {
                console.error(`error fetching directions ${result}`);
              }
            });

Carbon Dioxide Emissions Calculator

Using data from both the EPA and APTA, we were able to buid a function that calculates the emissions generated by the user's path updated by the distance travelled, whether that be through walking, biking, driving, or public transit.

    calculateCarbon(distance) {
        let miles = parseFloat(distance)
        let carNum = Math.ceil(404 * 2 * miles)
        let transitNum = Math.ceil(204 * 2 * miles)
        let bikeNum = 0 
        let walkNum = 0 
 
        this.setState({ 
            carNum: carNum,
            transitNum: transitNum,
            bikeNum: bikeNum,
            walkNum: walkNum
        })
        // Greenhouse Gas Data
        // https://www.epa.gov/greenvehicles/greenhouse-gas-emissions-typical-passenger-vehicle
        // https://www.apta.com/wp-content/uploads/Standards_Documents/APTA-SUDS-CC-RP-001-09_Rev-1.pdf
    }

Technologies

• Javascript
• Google Maps API / Google Cloud Platform
• React.js
• CSS / HTML

Group Members

• Drew Shroyer

  • GitHub
  • LinkedIn
  • AngelList

• JR McCann

  • GitHub
  • LinkedIn
  • AngelList