DEV Community

Cate
Cate

Posted on

Embed Responsive Maps To Your Website - Mapbox GL API

Did you know that using maps on your website not only helps users find your location but also signifies trust in the credibility of your organization? Whether you are working on a side project or your web design client asked you to embed an interactive map on their site, there are many reasons why you would want to use one of the map APIs to accomplish that task. I recently used the Mapbox GL API on one of my projects, and here is my experience with it.

Initial Configuration

It's incredibly simple; with just a few lines of html, CSS, and JavaScript, you'll have an interactive map on your site in no time. Mapbox provides you with a default access token without the need for billing information. Their documentation provides one with clear, step-by-step instructions on how to get your map up and running.

Extensive Customization Possibilities

Mapbox provides its users with a cool feature known as Mapbox Studio. Here you can customize your map to your desired style. If you want to target a small area like your street or a bigger area like your city, Mapbox has got you covered. It also provides you with different map themes. If you like your map in dark mode or light mode, you won't need to code it from scratch. 

Controls

Mapbox comes with navigation controls such as zoom buttons and a compass to enable users to maneuver their way around the map. Another feature of Mapbox that I liked is the ability to add marker components to your map. You can embed default markers or customize ones using your own data. 

Last Thoughts

I just highlighted a few cool features of the Mapbox GL API that I used in my project, Hospital Finder, that is meant to help users locate nearby medical centers and directions in case of medical emergencies. 

Repo Link

Live Link 

Discussion (0)