I am using the Avada website builder to create a tab layout displaying the different police districts of Milwaukee.

The maps display perfectly on their own, but when put into a tabs the first tab displays correctly, but the rest look like this:
Example of funky map

I read that leaflet struggles sometimes with maps that are hidden and then shown and I have seen some solutions (such as adding js to redraw the map after being initialized). I unfortunately don’t know how to apply that to Avada, and/or I am doing something wrong.

HERE IS THE CODE(this is the template I work off of–I replace IDS & such for individual districts.)

If it’s relevant, the ID tabs follow this convention: #fusion-tab-district1, #fusion-tab-district2, and so on (to 7).

I looked at this:
Leaflet map not displayed properly inside tabbed panel

I can’t tell if I’m misunderstanding or it’s conflicting with Avada.

Let me know if there is anything else I can provide to help.