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.
- 🗺 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
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
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.