Show JSON + Simple maps

[sergio-gimenez]

En els dos casos es mostra el App.js

Simple JSON

import React, { useState } from 'react';

const App = () => {
  const [jsonData, setJsonData] = useState({
    name: "Some User.",
    age: 19,
    gender: "male"
  });

  return (
    <>
      <h2>Name : {jsonData.name}</h2>
      <p>Age : {jsonData.age}</p>
      <p>Gender : {jsonData.gender}</p>
    </>
  );
}
export default App;

Simple maps

import { Map, GoogleApiWrapper } from 'google-maps-react';

/*Add the Map Component to your render function */
render() {
    return (
        <Map
            google={this.props.google}
            zoom={8}
            style={mapStyles}
            initialCenter={{ lat: 47.444, lng: -122.176 }}
        />
    );
}

/*Edit your export default statement */
export default GoogleApiWrapper({
    apiKey: 'AIzaSyA85AZn35eZa6DwMyLhXQfSxM8nP3HB-nA'
})(MapContainer);

//Add styling
const mapStyles = {
    width: '100%',
    height: '100%',
};

[sergio-gimenez]

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false,  //Hides or the shows the infoWindow
    activeMarker: {},          //Shows the active marker upon click
    selectedPlace: {}          //Shows the infoWindow to the selected place upon a marker
  };
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
          lat: 41.387705,
          lng: 2.111793
        }}
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyA85AZn35eZa6DwMyLhXQfSxM8nP3HB-nA'
})(MapContainer);

[sergio-gimenez]

import React, { useState } from 'react';

const App = () => {

  function showWarnings(jsonData, mode) {
    for (var i in jsonData) {
      printable[i] = jsonData.mode.warnings[i]
    }
  }

  const [jsonData, setJsonData] = useState({

    "driving": {
      "mode": "driving",
      "start_description": "Carrer de Jordi Girona, 1-3, 08034 Barcelona, Spain",
      "end_description": "Catalunya, 08002 Barcelona, Spain",
      "distance": "6.0 km",
      "time": "20 mins",
      "start_lat": 41.3879622,
      "start_lon": 2.1125241,
      "end_lat": 41.38736,
      "end_lon": 2.1696958,
      "warnings": [],
      "co2_trip": 1.2151889686100223,
      "price": 0.683872579737242,
      "pollution_index": "No data available",
      "temperature": 8.52,
      "precipitation_percentage": 0.0,
      "precipitation_intensity": 0.0,
      "closes_charging_station": [
        41.388423,
        2.169394
      ],
      "closes_parking_for_PRM": [
        41.387254799999994,
        2.1684804
      ]
    },
    "walking": {
      "mode": "walking",
      "start_description": "Carrer de Jordi Girona, 1-3, 08034 Barcelona, Spain",
      "end_description": "Catalunya, 08002 Barcelona, Spain",
      "distance": "5.3 km",
      "time": "1 hour 3 mins",
      "start_lat": 41.3879622,
      "start_lon": 2.1125241,
      "end_lat": 41.38736,
      "end_lon": 2.1696958,
      "warnings": [],
      "co2_trip": 0,
      "price": 0,
      "co2_trip_car": 1.2151889686100223,
      "petrol_car_price": 0.683872579737242,
      "pollution_index": "No data available",
      "temperature": 8.52,
      "precipitation_percentage": 0.0,
      "precipitation_intensity": 0.0
    },
    "bicycling": {
      "mode": "bicycling",
      "start_description": "Carrer de Jordi Girona, 1-3, 08034 Barcelona, Spain",
      "end_description": "Catalunya, 08002 Barcelona, Spain",
      "distance": "5.8 km",
      "time": "17 mins",
      "start_lat": 41.3879622,
      "start_lon": 2.1125241,
      "end_lat": 41.38736,
      "end_lon": 2.1696958,
      "warnings": [],
      "co2_trip": 0,
      "price": 0,
      "co2_trip_car": 1.2151889686100223,
      "petrol_car_price": 0.683872579737242,
      "pollution_index": "No data available",
      "temperature": 8.52,
      "precipitation_percentage": 0.0,
      "precipitation_intensity": 0.0,
      "closes_parking_for_bike": [
        41.3878749,
        2.1696415
      ]
    },
    "transit": {
      "mode": "transit",
      "start_description": "Carrer de Jordi Girona, 1-3, 08034 Barcelona, Spain",
      "end_description": "Catalunya, 08002 Barcelona, Spain",
      "distance": "6.4 km",
      "time": "33 mins",
      "start_lat": 41.3879622,
      "start_lon": 2.1125241,
      "end_lat": 41.38736,
      "end_lon": 2.1696958,
      "warnings": [],
      "co2_trip": 0.19129302929713063,
      "price": 2.2,
      "co2_trip_car": 1.2151889686100223,
      "petrol_car_price": 0.683872579737242,
      "pollution_index": "No data available",
      "temperature": 8.52,
      "precipitation_percentage": 0.0,
      "precipitation_intensity": 0.0
    }

  });

  return (
    <>
      <h1>Mode : {jsonData.driving.mode}</h1>
      <p><b>Start Adress :</b> {jsonData.driving.start_description}</p>
      <p><b>End Adress :</b> {jsonData.driving.end_description}</p>
      <p><b>Distance :</b> {jsonData.driving.distance}</p>
      <p><b>Time :</b> {jsonData.driving.time}</p>
      <p><b>Start Coordinates :</b> {jsonData.driving.start_lat}, {jsonData.driving.start_lon}</p>
      <p><b>End Coordinates :</b> {jsonData.driving.end_lat}, {jsonData.driving.end_lon}</p>
      <p><b>Warnings :</b>

      </p>
      <p><b>CO2 emited :</b> {jsonData.driving.co2_trip}</p>
      <p><b>Travel expenses :</b> {jsonData.driving.price}</p>
      <p><b>Pollution index :</b> {jsonData.driving.pollution_index}</p>
      <p><b>Temperature :</b> {jsonData.driving.temperature}</p>
      <p><b>Precipitation percentage :</b> {jsonData.driving.precipitation_percentage}</p>
      <p><b>Precipitation intensity :</b> {jsonData.driving.precipitation_intensity}</p>
    </>
  );
}

export default App;