How to Move Bing Maps Menu to the Right side of Screen


Tags: html,css,bing-maps,bing,bing-maps-api

Problem :

I'm using the Bing Maps API, which adds a menu bar to the top left of the screen: menu bar on left

I would like to mirror how it is now and have the bar on the right, with the compass furthest to the right, the zoom next, and the birds eye menu next. The current HTML is:

<div class="MicrosoftNav MapTypeId_be">
    <div class="OverlaysTL">
        <div class="NavBar_compassControlContainer">
            <a class="NavBar_button NavBar_toolButton NavBar_rotateLeft" href="#" title="Rotate left" uici="NB.CS.RotateLeft" style="visibility: hidden;">
            </a>
            <a href="#" title="Click to pan in any direction" uici="NB.CS.PanControl" class="NavBar_compass NavBar_compassFlat">N</a>
            <a class="NavBar_button NavBar_toolButton NavBar_rotateRight" href="#" title="Rotate right" uici="NB.CS.RotateRight" style="visibility: hidden;"></a>
        </div>
        <div class="NavBar_zoomControlContainer">
            <div class="NavBar_zoomDrop" style="position: absolute; display: none;">
               <div class="NavBar_zoom">
                   <div class="NavBar_zoomBar" style="position: absolute; overflow: hidden;">
                       <div class="NavBar_zoomBarBg"></div>
                       <div class="NavBar_zoomSlider" title="Move slider to zoom in or out" style="top: 97px;"></div>
                   </div>
               </div>
           </div>
           <a class="NavBar_button NavBar_toolButton NavBar_zoomOut" href="#" title="Zoom out" uici="NB.ZC.ZoomOut"></a>
           <a class="NavBar_button NavBar_toolButton NavBar_zoomIn" href="#" title="Zoom in" uici="NB.ZC.ZoomIn"></a>
       </div>
       <div class="NavBar_modeSelectorControlContainer">
           <span class="NavBar_separator"></span>
           <span class="NavBar_button NavBar_typeButton">
               <a class="NavBar_typeButtonLabel NavBar_MapType_be" href="#">Bird's eye</a>
               <span class="separator"></span>
               <a class="NavBar_dropIconContainer" href="#">
                   <span class="NavBar_dropIcon"></span>
               </a>
           </span>
       </div>
       <span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"></span>
   </div>
   <span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"></span>
</div>

Because of this I tried the following CSS:

#map-canvas > div > div.MicrosoftNav.MapTypeId_be > div{
    right: 0;
    position: absolute;
}

This resulted in: Menubar with attempted CSS

what would I have to do to get the mirror of the original?



Solution :

Technically the modifying the CSS of the Bing Maps controls is an undocumented/unsupported hack which could break if V7 were updated. So generally this is not recommended. The recommended approach is to hide the default navigation bar and create a custom control and float it over the map.

Note that the navigation bar grows to the right depending on what is being displayed (i.e. Birds eye, breadcrumb) which would make moving it to the right an issue. If you don't care about that then you can use the following CSS which will work for everything but the breadcrumb:

.MicrosoftMap .OverlaysTL {
    top: auto;
    right: 348px;
}

.NavBar_compassControlContainer {
    left: 240px;
}

.NavBar_zoomControlContainer {
    left: 190px;
}

.NavBar_modeSelectorControlContainer {
    left: 0px;
}

.MicrosoftNav .NavBar_separator {
    position: absolute;
    left: 180px;
}

    CSS Howto..

    How do I style a specific select option in HTML

    How to create an href that opens a div on screen? [closed]

    how to get background image present in other folder with css?

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    HTML – Show menu on hover

    Looping through my table, how do I know if the checkbox is checked?

    How to draw a circle css

    How to draw lines in ionic

    How to print the CSS stylesheet for PPI::HTML highlight? [closed]

    how i can fit text to an image with css

    How can I make sure redundant

    tags do not break styling?

    How/where to center Items on Webpage

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How can I make 3 circles with a different radius “stick” together? (with example image)

    How to add margin-top to Responsive Multi-Level Menu and not effect navigation animation?

    How to disable CSS style relatively to a certain parent tag?

    How to change ListView cell's text color in JavaFX using css

    How to show css div depending upon model value?

    How to make two separate, independent columns (using html and css)

    How to change css file of bx-slider, multiple sliders on a page [closed]

    How can I change this HAML format to normal CSS style?

    How to remove border in radial gradient so that it can mix well?

    How to control css of images on top of a full page semi-transparent overlay div

    How to use pure css selector to select hidden element

    How does one know exact pixel size / relationships between CSS elements?

    How to move box-shadow?

    How can I make these CSS absolute positions work in IE?

    How does one creates inner and outer triangles on a div with pure CSS?

    CSS: how to calculate margin inside a div for a fluid layout

    How do you create an arrow for sub navigation like this?