cot-blog-mapbox-map.jsx

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;