Vincent B.
Sep 18, 2018 · 2 min read

Motivation 🤓

At MeilleursAgents, we use a lot of maps to display real estate prices and market activity in a meaningful way for our users. We first used Google Maps and then decided to move to Mapbox because of the sudden price increase last May, making an opportunity from necessity.

After a quick search, we tried the Uber Mapbox GL React wrapper but found some strange behaviors with map controls and fullscreen display with our markers and layers. So we decided to develop a library from scratch, having an open-source release in mind.

Features 🚀

react-mapbox-wrapper in action with maps’s control, custom marker, radius and popup on hover
  • 🗺 Render a Mapbox Map as a React component
  • 🏠 Add a marker as React Component
  • 💬 Add a popup on a marker with ease
  • ⭕️ Add a circle as a layer
  • 🎚Add map controls from props
  • 🌍 Use the underlying Mapbox API
  • 🛠 Some helpers for GeoJSON layer management

Usage 🤩

We have battle-tested our library on a large browser selection for our main form (visible on desktop only), with a simple use case. Our customer dashboard has a wider range of features :

  • displaying GeoJSON
  • layers with more markers
Usage with radius, 30 markers and our custom map style
Usage with custom maps’s control, GeoJSON layer, fitBounds and radius as marker

Roadmap 🚧

We plan to add more customizations from props, provide a larger Mapbox API support and enhance our documentation with code samples.

We started developing the library with React 16, but because of future deprecations - notably componentWillReceiveProps - we’ll release a React 17-compliant version.

We may have missed something huge, do not hesitate to fill a feature request on Github, we promise we’ll take a look at it.

Try it out!

react-mapbox-wrapper is already production-ready. We are new to the open-source world and eager to get feedback from the community. Check out our examples and give it a try!

Btw, if you are interested in joining MeilleursAgents, we are hiring! Take a look at our job board to see if there’s a position you’re interested in!

MeilleursAgents Engineering

MeilleursAgents Engineering Teams (Product, Web & Data Teams)

Thanks to Natan Danous

Vincent B.

Written by

Enthusiast dev, golang and JS.

MeilleursAgents Engineering

MeilleursAgents Engineering Teams (Product, Web & Data Teams)

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