Event Map

this map is a component from the react open source library which raps react map gl.

installation

npm install --save react-map-gl

using component

class EventMap extends Component {
  latitude = parseFloat(this.props.campusInfo.lat);
  longitude = parseFloat(this.props.campusInfo.long);
  state = {
    viewport: {
      width: 350,
      height: 300,
      latitude: this.latitude,
      longitude: this.longitude,
      zoom: 13.5
    }
  };

  render() { 
    const { classes } = this.props;

    return (
      <ReactMapGL
        mapStyle={"mapbox://styles/mapbox/streets-v9"}
        mapboxApiAccessToken={API_KEY}
        {...this.state.viewport}
        onViewportChange={(viewport) => this.setState({ viewport })}>
        <Marker
          latitude={this.latitude}
          longitude={this.longitude}
          offsetLeft={-20}
          offsetTop={-10} >
          <LocationOnIcon className={classes.iconIm} />
        </Marker>
      </ReactMapGL>
    );
  }
}

export default withStyles(styles)(EventMap);

this component will render on the main page and will show the schoool that the event is being hosted on