We are encountering an issue related to how the map on our site is rendering. We are using MapSuiteMVCEdition 7 to render several maps on our website using an Open Street Map layer as the base layer and then rendering Overlays and Points on the map from our data. Everything is displaying as expected, however, we have encountered an issue relating to the interaction of the map with other elements of our site.
We are using Kendo UI from Telerik for our site. We have encountered an issue that we cannot resolve regarding the MapSuite map and the Kendo Menu that seems to be related to how the map is rendered. We are using the Kendo Menu to create a site menu for navigation which is rendered in a header and present on all pages. We are finding that the map always renders on top of the menu. We have tried to alter the z-index on our menu to be greater than the z-index of the map without success. One of my colleagues has also tried altering the placement of the menu and modifying numerous DOM elements via Google development tools. The only way he was able to get the menu to render completely on the map page was to remove the map. After spending about five hours on this he has come to the conclusion that the issue is related to how the map is rendered compared to other elements of the page. Is there something special that needs to be done to allow another element of the site to render over the map, at least temporarily?
My colleague is more familiar with the inner workings of Kendo UI than I am. I can ask him if you require anymore details regarding how the menu is rendering.
Map Rendering Issue With Regards to Other Page Elements
Hi Michael,
After we dig into this, we found the z-index of Kendo menu is too low, while z-index of our map can be nearly 999. Please check attached screenshot and set the z-index of Kendo menu items as 9999, the map will not cover the menu item.
BTW, seems the z-index value is set by Kendo control every time when menu popup. We need to reset the z-index when menu items are showing.
Regards,
Kevin
I will pass this information along to my colleague and update this question with the results, though it may be awhile.
Hi Michael,
Hope it would be helpful and waiting for your responce. Please feel free to let us know if you need any assistance.
Thanks,
Kevin
My colleague managed to solve the issue after a lot of trying. It came down to one line of code added to the setup of our custom menu:
that.nextItemZIndex = 1000;
The value in the normal Kendo code is 100. We appreciate the assistance.
Glad to hear you guys have resolved this, Michael. Any other question please feel free to let us know.
Thanks,
Kevin