search

NewSignature / us-map

An interactive map of the United States using Raphaël
BSD 2-Clause "Simplified" License
279 stars 184 forks source link

Fancybox Label Alignment #46

Closed ghost closed 9 years ago

ghost commented 9 years ago

Hey All,

Awesome plugin, love this thing! Running into a unique issue when using this map selector inside of a fancybox where the labels don't line up with their backing. I've added the map to the regular page and it functions perfectly but in the fancybox there seems to be some kind of initialization issue happening, please check out the image.

If there's any chance someone can give me a hand with this today it'd be hugely appreciated. usa-maps-fancybox-issue

jackvial commented 8 years ago

+1

LukeXF commented 8 years ago

I have this problem as well, I think it could be due to bootstrap or that the labels cannot be placed properly when then map is hidden.

LukeXF commented 8 years ago

Okay did some research:

The misalignment of the labels is caused by loading in the map when map isn't visible.

An example of this could be that you've loaded your map in a pop up, modal, carousel or simple the element just isn't visible on it's own because of your custom code.

To fix this, rather than initialing the map on page load, initialize it when the element becomes visible.

Using the setTimeout() function could help with this (because all animations/fades need to be completed before loading in the map.