Skip to content

Instantly share code, notes, and snippets.

@robwelan
Created November 14, 2019 23:04
Show Gist options
  • Save robwelan/a1ad6a30583004dde397c256b1cc4494 to your computer and use it in GitHub Desktop.
Save robwelan/a1ad6a30583004dde397c256b1cc4494 to your computer and use it in GitHub Desktop.
import PropTypes from 'prop-types';
import React from 'react';
import MapGL, { Marker } from 'react-map-gl';
import PinDropIcon from '@material-ui/icons/PinDrop';
// Styles
import './map.css';
const token = process.env.GATSBY_MAPBOX_API;
const mapRef = React.createRef();
const Map = (props) => {
const {
businessName,
latitude,
longitude,
zoom,
} = props;
const viewport = {
latitude,
longitude,
projection: 'EPSG:4326',
zoom,
};
return (
<MapGL
ref={mapRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...viewport}
mapStyle="mapbox://styles/mapbox/streets-v9"
width="100%"
height="100%"
mapboxApiAccessToken={token}
>
<Marker latitude={latitude} longitude={longitude} offsetLeft={-20} offsetTop={-10}>
<PinDropIcon color="error" />
<span className="pin-label">
{businessName}
</span>
</Marker>
</MapGL>
);
};
Map.propTypes = {
businessName: PropTypes.string.isRequired,
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired,
zoom: PropTypes.number.isRequired,
};
export default Map;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment