Photo by Brett Zeck on Unsplash

Creating Custom Pins With React MapBox

Make them point on the right spot!

Iouri Sorokine
Dec 2 · 4 min read

MapBox allows lots of customisation, including the total freedom in designing own pins to spot locations on the map. As their official tech documentation shows, the pin is basically a div which is rendered on a location specified by coordinates, and the inside of the div can be tailored to fit any app. What we’ll focus on here is the exact location shown by our custom Marker if it is in form of a pin or pointing object.

Like in other map providers, the size of the pin remains exactly the same when zooming in and out, while the map expands or gets smaller. When creating custom pins for our project GemBox, we noticed an interesting phenomenon:

When zooming in, the exact location pointed by the pin changes

The legend explains it well, if you look carefully, the exact spot shown by the pin on the third pic is quite different from the first one. The issue has already been addressed by some devs, but it is possible to find maps that still have it.

The cause is simple: in MapBox, the coordinates of the pin are by default referring to the top-left corner of the div, so while zooming in and out, it is this corner that is anchored to the right location.

Depending on how your pin is designed, you’ll ave to play around with CSS, and change this spot to be on the bottom of the div or anywhere else where your pin points to.

Adjusting our custom pin

For our project we used MapBox for React, but the principle is exactly the same with standard DOM manipulations. The code of our pin component looks like this:

// top of the component
import { Marker } from "react-map-gl";
//in the render
<Marker
latitude={props.data.latitude}
longitude={props.data.longitude}
captureClick={false}
draggable={false}>
<div className=”custom-pin”
onClick={() => {props.openPopup(props.data);
}}>
<img src=”/images/diamond-icon-green.png” alt=”Gem” />
</div>
</Marker>

Marker is a component from MapBox package, it renders a div on the map, which in our example shall just contain an image. There are many optional attributes, including offsetTop and offsetLeft. We’ll play with these.

Let’s check how our pin shall look like: it is a square of 30px side and the point shall be at the bottom in the middle:

It’s getting clearer:

The result is:

// top of the component
import { Marker } from "react-map-gl";
//in the render
<Marker
latitude={props.data.latitude}
longitude={props.data.longitude}
captureClick={false}
draggable={false}
offsetTop={-30}
offsetLeft={-15}>
<div className=”custom-pin”
onClick={() => {props.openPopup(props.data);
}}>
<img src=”/images/diamond-icon-green.png” alt=”Gem” />
</div>
</Marker>
//in the CSS.custom-pin {
height: 30px;
width: 30px;
display: flex;
justify-content: center;
}
.custom-pin img {
width: 100%;
height: 100%;
}

The example below is a further version of the app, therefore styled in a totally different way, but it shows that with these adjustments, we have our pin always pointing at the right spot as we zoom in:

3 times the same pin with different zoom: the diamond points at the same spot

That’s it, we corrected our pin by setting the coordinates to the right point. MapBox for React allows a lot of customisation for its elements, so inspecting them in the browser with developer tools often helps to determine which way it is structured and how to deal with it.

More info about React Mapbox and Markers:

Have fun!

JavaScript in Plain English

Learn the web's most important programming language.

Iouri Sorokine

Written by

I write about code and my path to Full Stack React/Node developer. Ironhack alumni with background in apps Marketing

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade