none
Bing V8 - Infobox not inheriting the Bing Theme style RRS feed

  • Question

  • Hi,

    We are migrating from Bing V7 to V8 and noticed few style issues with infobox.

    1. With V8 Infobox styles are not inline with the BingTheme styles. We get only the default style.

    2. With V8 Infobox is cut off at the map edges.

    Is there any solution for this? When can we expect it to get resolved?


    Friday, August 5, 2016 11:00 AM

Answers

  • As noted in the Bing Maps V7 to V8 migration guide, the Bing Theme module has been deprecated for a number of reasons. One of the primary reasons being that is that is caused many developers more headaches than it solved. Also, that module was meant to emulate the styles of the Bing Maps site. The Bing Maps site has changed drastically over the last 2 years and no longer has infoboxes.

    In regards to the infobox class being cut off at the map edges, this happens in V7 as well. The infobox is in the map and thus is restricted to the map space.

    There are a number of options for you. The first is to use HTML to define your infobox. This will allow you to customize the style of the infobox to anything you want, but it will still be cut off at the edges of the map. For example:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#addCustomInfobox+JS

    https://msdn.microsoft.com/en-us/library/mt750271.aspx

    Another option is to use the open source custom infobox module available here. This is easy to customize and all overflow outside the edges of the map.


    [Blog] [twitter] [LinkedIn]

    Friday, August 5, 2016 3:15 PM
  • Ah, ok. So it looks like this yet another bug in the deprecated Bing theme module. The Bing theme module actually floats it's own DIV over the map rather than customizing the base infobox template. This is how it got around the fact that the map hides overflown content. However, in some cases the infobox will appear in the middle of the no where outside of the map. Here is a screenshot I just took:

    The custom Infobox module I mentioned earlier will however allow you to overflow your infoboxes and will hide them when the pointer is no longer over the map.

    When using custom HTML you don't need actions, you can use regular HTML/JavaScript events.


    [Blog] [twitter] [LinkedIn]

    Monday, August 8, 2016 10:54 PM
  • Yes, that V7 custom infobox module is compatible with V8. A compatibility table is available here: https://bingmapsv7modules.codeplex.com/wikipage?title=Module%20Compatibility%20with%20Bing%20Maps%20V8

    [Blog] [twitter] [LinkedIn]

    Thursday, September 22, 2016 5:44 PM

All replies

  • As noted in the Bing Maps V7 to V8 migration guide, the Bing Theme module has been deprecated for a number of reasons. One of the primary reasons being that is that is caused many developers more headaches than it solved. Also, that module was meant to emulate the styles of the Bing Maps site. The Bing Maps site has changed drastically over the last 2 years and no longer has infoboxes.

    In regards to the infobox class being cut off at the map edges, this happens in V7 as well. The infobox is in the map and thus is restricted to the map space.

    There are a number of options for you. The first is to use HTML to define your infobox. This will allow you to customize the style of the infobox to anything you want, but it will still be cut off at the edges of the map. For example:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#addCustomInfobox+JS

    https://msdn.microsoft.com/en-us/library/mt750271.aspx

    Another option is to use the open source custom infobox module available here. This is easy to customize and all overflow outside the edges of the map.


    [Blog] [twitter] [LinkedIn]

    Friday, August 5, 2016 3:15 PM
  • Thanks a lot for immediate response.

    We did not have any infobox cut off at edges issue with V7. Maybe I think this was either because we were adding the infobox entity collection as a layer or because of the bing theme style.

    Attaching the screenshot below.

    1. Is there anyway to mimic the same (style and no cut-off edges) in V8 without spending effort on custom infobox?

    2. Can we add actions to custom infoboxes?




    • Edited by Nithya Jram Saturday, August 6, 2016 2:31 PM
    Saturday, August 6, 2016 2:10 PM
  • Ah, ok. So it looks like this yet another bug in the deprecated Bing theme module. The Bing theme module actually floats it's own DIV over the map rather than customizing the base infobox template. This is how it got around the fact that the map hides overflown content. However, in some cases the infobox will appear in the middle of the no where outside of the map. Here is a screenshot I just took:

    The custom Infobox module I mentioned earlier will however allow you to overflow your infoboxes and will hide them when the pointer is no longer over the map.

    When using custom HTML you don't need actions, you can use regular HTML/JavaScript events.


    [Blog] [twitter] [LinkedIn]

    Monday, August 8, 2016 10:54 PM
  • Another option is to use the open source custom infobox module available here. This is easy to customize and all overflow outside the edges of the map.


    [Blog] [twitter] [LinkedIn]

    Hi we are developing the ng2-bingmaps Angular 2 components for Bing Maps v8 API. We would like to use the "stock" info boxes, but with custom HTML in the description. I've talked to your support team, and they pointed me to this post. 

    I've tried to create custom HTML infoboxes, but the big downside is that I then would need to implement the close button as well. As the rendered HTML infobox is outside the Angular2 component, I cannot attach events...

    That open source repository, is that compatible with V8? As it says it's only for V7?


    Please remember to mark your question as answered & Vote helpful
    Check my blog or follow me on Twitter

    Tuesday, August 9, 2016 9:11 AM
  • Yes, that V7 custom infobox module is compatible with V8. A compatibility table is available here: https://bingmapsv7modules.codeplex.com/wikipage?title=Module%20Compatibility%20with%20Bing%20Maps%20V8

    [Blog] [twitter] [LinkedIn]

    Thursday, September 22, 2016 5:44 PM