none
How to add the div control in ajax bing map version 7.0 RRS feed

  • Question

  • Can anyone provide me the solution how to add the div control in ajax bing map version 7.0 as we did by using AddControl() method in ajax bing map version 6.3
    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:40 PM (From:Bing Maps: Map Control and Web services Development)
    Monday, May 23, 2011 5:48 AM

Answers

  • If you want to get something clean and reusable, you can take profit of the possibility of extension of the Map Control in V7:

    Microsoft.Maps.Map.prototype.addControl = function (elt) {
      var root = this.getRootElement();
      root.appendChild(elt);
    };
    
    Microsoft.Maps.Map.prototype.addUiControl = function (elt) {
      var root = this.getRootElement();
    
      var rootUiControls = document.getElementById("UiControls");
      if (rootUiControls == null) {
        rootUiControls = document.createElement('div');
        rootUiControls.setAttribute("id", "UiControls");
        rootUiControls.setAttribute("class", "CustomUiControls");
        rootUiControls.style.zIndex = 1000;
        root.appendChild(rootUiControls);
      }
    
      rootUiControls.appendChild(elt);
    }
    
     And here you will have those kind of possibilities:

    var link = document.createElement('a');
    link.innerHTML = "SAMPLE";
    link.setAttribute('href', 'http://www.bing.com');
    link.setAttribute('style', 'position:relative; width: 200px; height: 200px; top: 100px; z-index: 1000 !important;');
    
    map.addUiControl(link);
    

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, May 23, 2011 1:12 PM
    Moderator
  • Hello

    there is no longer any built in way to do this, but to be honest we never bothered using it when there was. Simply position your div control (dont put in inside the maps div) using css and give it a high enough z-index that it appears on top of everything else


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    Monday, May 23, 2011 6:54 AM
    Moderator
  • Another method is to simply create a second div and position it over the map using absolute positioning. In fact this has become the main way of overlaying custom controls by v6 customers and is why the AddControl method wasn't added in V7. The AddControl method was mainly in v6 because of the 3D control. Overlaying controls over that required wrapping the controls in an iframe because the 3D control used Active-X. Simply do something like this:

    <div style=';'>
       <div id='map' style=';width:800px;height:600px;'></div>
       <div style='; background-color:red;width: 200px;height:40px;top:100px;left:100px;'>Custom Control</div>
    </div>
    The forums remove the position values from the styles. The first two div's should have a relative position and the last one an absolute position.


    http://rbrundritt.wordpress.com



    Wednesday, March 26, 2014 10:35 AM
  • Unfortunately the control stays on top of everything which is not the right behavior I expected :-) I would love to see the bing maps menu on top of the custom control. However the drop down parts of the menu hides behind the control and even setting the z-index does not help as menu does inherit it from the map (as far I have seen when debugging the html code).

    While typing I thought of another solution. Add the control as the first element beyond the root element - similar to the solution provided by Nicolas Boonaert (z-Index became 1 ensuring then menu has a chance to get on top. However not sure if this will work with other browsers than IE.) This will allow me to leverage Bing capabilities extended by my own control :-)

    Thank you for your help!

    Microsoft.Maps.Map.prototype.addUiControl = function (elt) {
      var root = this.getRootElement();

      var rootUiControls = document.getElementById("UiControls");
      if (rootUiControls == null) {
        rootUiControls = document.createElement('div');
        rootUiControls.setAttribute("id", "UiControls");
        rootUiControls.setAttribute("class", "CustomUiControls");
        rootUiControls.style.zIndex = 1;
        root.insertBefore(rootUiControls, root.firstChild);
      }

      rootUiControls.appendChild(elt);
    }

    var link = document.createElement('a');
    link.innerHTML = "SAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLE";
    link.setAttribute('href', 'http://www.bing.com');
    link.setAttribute('style', 'p_o_s_i_t_i_o_n: a_b_s_o_l_u_t_e; width: 200px; height: 200px; top: 100px; z-index: 1 !important;');

    map.addUiControl(link);


    ((added p_o_s_i_t_i_o_n: a_b_s_o_l_u_t_e as it's being filtered out by the system when sending without _ characters))



    Saturday, March 29, 2014 6:29 PM

All replies

  • Hello

    there is no longer any built in way to do this, but to be honest we never bothered using it when there was. Simply position your div control (dont put in inside the maps div) using css and give it a high enough z-index that it appears on top of everything else


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    Monday, May 23, 2011 6:54 AM
    Moderator
  • If you want to get something clean and reusable, you can take profit of the possibility of extension of the Map Control in V7:

    Microsoft.Maps.Map.prototype.addControl = function (elt) {
      var root = this.getRootElement();
      root.appendChild(elt);
    };
    
    Microsoft.Maps.Map.prototype.addUiControl = function (elt) {
      var root = this.getRootElement();
    
      var rootUiControls = document.getElementById("UiControls");
      if (rootUiControls == null) {
        rootUiControls = document.createElement('div');
        rootUiControls.setAttribute("id", "UiControls");
        rootUiControls.setAttribute("class", "CustomUiControls");
        rootUiControls.style.zIndex = 1000;
        root.appendChild(rootUiControls);
      }
    
      rootUiControls.appendChild(elt);
    }
    
     And here you will have those kind of possibilities:

    var link = document.createElement('a');
    link.innerHTML = "SAMPLE";
    link.setAttribute('href', 'http://www.bing.com');
    link.setAttribute('style', 'position:relative; width: 200px; height: 200px; top: 100px; z-index: 1000 !important;');
    
    map.addUiControl(link);
    

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Monday, May 23, 2011 1:12 PM
    Moderator
  • Unfortuntately the solution above does not work very well as the z-index will ensure that every bing menu will not show up properly (at least what I would expect from an menu)
    Tuesday, March 25, 2014 7:51 PM
  • Another method is to simply create a second div and position it over the map using absolute positioning. In fact this has become the main way of overlaying custom controls by v6 customers and is why the AddControl method wasn't added in V7. The AddControl method was mainly in v6 because of the 3D control. Overlaying controls over that required wrapping the controls in an iframe because the 3D control used Active-X. Simply do something like this:

    <div style=';'>
       <div id='map' style=';width:800px;height:600px;'></div>
       <div style='; background-color:red;width: 200px;height:40px;top:100px;left:100px;'>Custom Control</div>
    </div>
    The forums remove the position values from the styles. The first two div's should have a relative position and the last one an absolute position.


    http://rbrundritt.wordpress.com



    Wednesday, March 26, 2014 10:35 AM
  • Unfortunately the control stays on top of everything which is not the right behavior I expected :-) I would love to see the bing maps menu on top of the custom control. However the drop down parts of the menu hides behind the control and even setting the z-index does not help as menu does inherit it from the map (as far I have seen when debugging the html code).

    While typing I thought of another solution. Add the control as the first element beyond the root element - similar to the solution provided by Nicolas Boonaert (z-Index became 1 ensuring then menu has a chance to get on top. However not sure if this will work with other browsers than IE.) This will allow me to leverage Bing capabilities extended by my own control :-)

    Thank you for your help!

    Microsoft.Maps.Map.prototype.addUiControl = function (elt) {
      var root = this.getRootElement();

      var rootUiControls = document.getElementById("UiControls");
      if (rootUiControls == null) {
        rootUiControls = document.createElement('div');
        rootUiControls.setAttribute("id", "UiControls");
        rootUiControls.setAttribute("class", "CustomUiControls");
        rootUiControls.style.zIndex = 1;
        root.insertBefore(rootUiControls, root.firstChild);
      }

      rootUiControls.appendChild(elt);
    }

    var link = document.createElement('a');
    link.innerHTML = "SAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLESAMPLE";
    link.setAttribute('href', 'http://www.bing.com');
    link.setAttribute('style', 'p_o_s_i_t_i_o_n: a_b_s_o_l_u_t_e; width: 200px; height: 200px; top: 100px; z-index: 1 !important;');

    map.addUiControl(link);


    ((added p_o_s_i_t_i_o_n: a_b_s_o_l_u_t_e as it's being filtered out by the system when sending without _ characters))



    Saturday, March 29, 2014 6:29 PM