none
Custom Infobox Close Button RRS feed

  • Question

  • I am following this example:

    https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#addCustomInfobox+JS

    How do I get this infobox to have a close button on it?

    Monday, December 18, 2017 9:46 PM

Answers

  • Add some HTML to create a button and then add a javascript function to it that closes the infobox. Here is a code sample that creates a completely custom infobox and also has a close button:
    http://bingmapsv8samples.azurewebsites.net/#Custom%20Infobox%20HTML%20Content

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Monday, December 18, 2017 10:30 PM
    • Marked as answer by DDL19 Tuesday, December 19, 2017 1:05 AM
    Monday, December 18, 2017 10:30 PM
  • in a round about way I was able to get this to work by moving this code block to the end of my JavaScript.
            function closeInfobox() {
                infobox.setOptions({ visible: false });
            }
    
        </script>

    I have some other rendering above this using a spatial data service with some map.setView() commands. My question is this. Is there a graphics rendering order I need to be aware of for ordering my code? I am not exactly sure why this change fixed my code.
    • Marked as answer by DDL19 Tuesday, December 19, 2017 12:29 PM
    Tuesday, December 19, 2017 1:05 AM

All replies

  • Add some HTML to create a button and then add a javascript function to it that closes the infobox. Here is a code sample that creates a completely custom infobox and also has a close button:
    http://bingmapsv8samples.azurewebsites.net/#Custom%20Infobox%20HTML%20Content

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Monday, December 18, 2017 10:30 PM
    • Marked as answer by DDL19 Tuesday, December 19, 2017 1:05 AM
    Monday, December 18, 2017 10:30 PM
  • in a round about way I was able to get this to work by moving this code block to the end of my JavaScript.
            function closeInfobox() {
                infobox.setOptions({ visible: false });
            }
    
        </script>

    I have some other rendering above this using a spatial data service with some map.setView() commands. My question is this. Is there a graphics rendering order I need to be aware of for ordering my code? I am not exactly sure why this change fixed my code.
    • Marked as answer by DDL19 Tuesday, December 19, 2017 12:29 PM
    Tuesday, December 19, 2017 1:05 AM
  • Not really. The above code will only work if the infobox has been created. If it hasn't been created yet, then calling that function would throw an error. Other than that, it shouldn't matter where in your code this is.

    [Blog] [twitter] [LinkedIn]

    Tuesday, December 19, 2017 1:29 AM