none
[UWP] Show infobox on a Map inside its boundaries RRS feed

  • Question

  • Hello,

    I'm developing a universal app (8.1) showing many icons on a map (I have to work with Bing.Maps and Windows.UI.Xaml.Maps either). Tapping on an icon will show a customized infobox, but the problem is that when the icon is near the map boundaries the infox is showed outside those boundaries and it seems "cutted" in a way.

    In other words my aim is to show the infobox pointing always at the icon but placed according to the icon position on the map (Above, on the left, below and so on).

    Is there a way to achieve it? Do I have to change the position of the infobox programmatically or is there another way to do it (a UIElement or a method like SetNormalizedAnchorPoint)?

    Thank you in advance,



    • Edited by xAenimax Thursday, February 4, 2016 4:58 PM
    • Moved by Fred Bao Friday, February 5, 2016 6:16 AM bing map sdk related
    Thursday, February 4, 2016 3:35 PM

Answers

  • I understand your question. You have to handle this programmatically, there is no out of the box functionality. You can do the following.

    1. Calculate the pixel coordinate of the pushpin and determine which quadrant of the map it is using the width/height dimensions of the map. To calculate the pixel coordinate using the maps TryLocationToPixel method.
    2. If the pushpins pixel location is in the top left corner of the map, position the infobox such that the bulk of it is either to the right, or below and to the right of the pushpin.
    3. If the pushpins pixel location is in the top right corner of the map, position the infobox such that the bulk of it is either to the left, or below and to the left of the pushpin.
    4. If the pushpins pixel location is in the bottom left corner of the map, position the infobox such that the bulk of it is either to the right, or top and to the right of the pushpin.
    5. If the pushpins pixel location is in the bottom right corner of the map, position the infobox such that the bulk of it is either to the left, or top and to the left of the pushpin.

    I wrote code to do this with the JavaScript version of Bing Maps a while back. You can find it here: https://bingmapsv7modules.codeplex.com/SourceControl/latest#BMv7Plugins/BMv7.CustomInfobox/scripts/V7CustomInfobox.js


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Friday, February 5, 2016 3:54 PM
    • Marked as answer by xAenimax Friday, February 5, 2016 3:57 PM
    Friday, February 5, 2016 3:54 PM

All replies

  • Hello xAenimax,

    >>Tapping on an icon will show a customized infobox, but the problem is that when the icon is near the map boundaries the infox is showed outside those boundaries and it seems "cutted" in a way.

    From your description, this issue is related with the BingMap Inforbox, I would help move it to the BingMap forum for getting a better support.

    PS: I also did some research about the inforbox and see it has a setLocation method to set the location on the map where the anchor of the infobox is attached. You may check this it.

    Regards.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

    Friday, February 5, 2016 6:14 AM
  • Hello ,

    thank you for you answer. Maybe my question is not well detailed or not clear, but my problem is the same in both cases, so I thought it'd be better to post in Developing Universal App. I am working with Windows 8.1 WinRT so there is no "native" Infobox. I haven't found any Infobox class.

    I have created a user control to show as a custom infobox like this sample code from here https://code.msdn.microsoft.com/windowsapps/Infoboxes-for-Native-51940eb0

    I have attached an example from my WP device https://flic.kr/p/DgGrhX

    Regards,

    Friday, February 5, 2016 10:37 AM
  • I understand your question. You have to handle this programmatically, there is no out of the box functionality. You can do the following.

    1. Calculate the pixel coordinate of the pushpin and determine which quadrant of the map it is using the width/height dimensions of the map. To calculate the pixel coordinate using the maps TryLocationToPixel method.
    2. If the pushpins pixel location is in the top left corner of the map, position the infobox such that the bulk of it is either to the right, or below and to the right of the pushpin.
    3. If the pushpins pixel location is in the top right corner of the map, position the infobox such that the bulk of it is either to the left, or below and to the left of the pushpin.
    4. If the pushpins pixel location is in the bottom left corner of the map, position the infobox such that the bulk of it is either to the right, or top and to the right of the pushpin.
    5. If the pushpins pixel location is in the bottom right corner of the map, position the infobox such that the bulk of it is either to the left, or top and to the left of the pushpin.

    I wrote code to do this with the JavaScript version of Bing Maps a while back. You can find it here: https://bingmapsv7modules.codeplex.com/SourceControl/latest#BMv7Plugins/BMv7.CustomInfobox/scripts/V7CustomInfobox.js


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Friday, February 5, 2016 3:54 PM
    • Marked as answer by xAenimax Friday, February 5, 2016 3:57 PM
    Friday, February 5, 2016 3:54 PM
  • Thank you very much Ricky,

    I already thought that this was the only solution but I needed a confirmation first.

    Friday, February 5, 2016 4:02 PM