Pointer Location on a Map

Use MapBox With GatsbyJS (part two of two)
Published: 06-Dec-2019

Following on from the story so far: Use MapBox With GatsbyJS.

We'll first dive right into the code, starting with our CSS and then our JavaScript. We're using Material-UI as the main styling library by-the-way.

The CSS

.pin-label {
font-size: 0.7rem;
margin: 0;
position: relative;
top: -9px;
left: 2px;
}

There's nothing particulary magical about the CSS. Its job is to set the font size of the label that appears next to the pin (rendered in the map), and its margins and position.

The JavaScript

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;

First up we declare the usual suspects (PropTypes and React). Then we declare MapGL and Marker from react-map-gl and PinDropIcon from material-ui. These are all the assets we need to render our map.

After that we import our styles (yup, that tiny amount above). And, we grab our map box API token from our environment settings. This way, people can't nick your API token very easily.

We also create a mapRef using React.createRef. It's actually a little superfluous in the example provided. But, it does show you how to create a Ref in case your parent component needs to make use of it for some reason.

The props get passed in from the parent component. You'll find more details on this in the previous article. What you pass in is entirely up to you.

The viewport constant is pretty interesting. It uses the latitude and longitude and zoom passed in from props, and sets the projection. Which is a map thing.

And then we return our MapGL component and assign its props with the ref, the viewport, the preferred MapBox map style, some basic width and height settings and your MapBox API token.

Inside the MapGL component we add a marker which is centered to the latitude and longitude passed in (nice) plus a couple of offset options (which you can modify for your needs if necessary).

And within the Marker, we drop in our PinDropIcon with a preffered color, plus a span styled with the CSS we've already reviewed above. And within the span goes our businessname passed in from props.

Finally, propTypes are defined, and I'd say if you can understand the above, you'll know what's going on there.

Exporting the Map on line 56, and you're done. MapBox complete.

Pointer Location on a Map

Use MapBox With GatsbyJS (part two of two)
Published: 06-Dec-2019

Following on from the story so far: Use MapBox With GatsbyJS.

We'll first dive right into the code, starting with our CSS and then our JavaScript. We're using Material-UI as the main styling library by-the-way.

The CSS

.pin-label {
font-size: 0.7rem;
margin: 0;
position: relative;
top: -9px;
left: 2px;
}

There's nothing particulary magical about the CSS. Its job is to set the font size of the label that appears next to the pin (rendered in the map), and its margins and position.

The JavaScript

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;

First up we declare the usual suspects (PropTypes and React). Then we declare MapGL and Marker from react-map-gl and PinDropIcon from material-ui. These are all the assets we need to render our map.

After that we import our styles (yup, that tiny amount above). And, we grab our map box API token from our environment settings. This way, people can't nick your API token very easily.

We also create a mapRef using React.createRef. It's actually a little superfluous in the example provided. But, it does show you how to create a Ref in case your parent component needs to make use of it for some reason.

The props get passed in from the parent component. You'll find more details on this in the previous article. What you pass in is entirely up to you.

The viewport constant is pretty interesting. It uses the latitude and longitude and zoom passed in from props, and sets the projection. Which is a map thing.

And then we return our MapGL component and assign its props with the ref, the viewport, the preferred MapBox map style, some basic width and height settings and your MapBox API token.

Inside the MapGL component we add a marker which is centered to the latitude and longitude passed in (nice) plus a couple of offset options (which you can modify for your needs if necessary).

And within the Marker, we drop in our PinDropIcon with a preffered color, plus a span styled with the CSS we've already reviewed above. And within the span goes our businessname passed in from props.

Finally, propTypes are defined, and I'd say if you can understand the above, you'll know what's going on there.

Exporting the Map on line 56, and you're done. MapBox complete.