🔗 How to integrate leaflet maps into Phoenix LiveView in 2 easy steps

I have been working on a distribution management system that manages a sales agent network. It provides real-time visibility into dealers and merchants across countries, including their stock levels, to identify who’s running out of stock and act quickly to maximize sales.

To achieve that I used maps.

Before you continue,please take a moment to register for my upcoming book “Ash Framework for Phoenix Developers”to not miss its release this year and gain content that will supercharge your Phoenix projects with Ash framework.

It’s easier to spot stockouts on a map (with areas highlighted in red) than by scanning tabulated details. So, I integrated my Phoenix application with the Leaflet map library to achieve that.

And I want to show you how to do that in 3 steps:

1. How to add the Leaflet library to your Phoenix application.
2. How to add the map area and resize it in your LiveView.
3. How to use Phoenix colocated hooks to add the map in your LiveView.