none
Building a Custom Dashboard RRS feed

  • Question

  • After reading through content on this site,  I have deduced that I can either manipulate the style(s) of the default VE dashboard or,  I can build  "Custom Controls"  to handle the dashboard customization.

    Is this inference correct?  Any opionions, suggenstions, places to get and artwork or help etc would be greatly appreciated...
    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:16 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, April 1, 2009 5:01 PM

Answers

  • Yes thats right. Personally we create our own dashboard for the following reasons:

    1) It means if MS update VE your controls dont change, this happened between versions 5 and 6 when the standard controls changed massively
    2) Theres only so much you can do with css and the default controls, and it might all break with the next release

    We use the asp.net ajax controls for our sliders and css etc for the simple buttons. You can see our customisations here:

    http://www.london-executive.com/propertybird/

    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    Wednesday, April 1, 2009 5:45 PM
    Moderator

All replies

  • Yes thats right. Personally we create our own dashboard for the following reasons:

    1) It means if MS update VE your controls dont change, this happened between versions 5 and 6 when the standard controls changed massively
    2) Theres only so much you can do with css and the default controls, and it might all break with the next release

    We use the asp.net ajax controls for our sliders and css etc for the simple buttons. You can see our customisations here:

    http://www.london-executive.com/propertybird/

    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    Wednesday, April 1, 2009 5:45 PM
    Moderator
  • Thanks for the clarification.

    I saw your url in another thread - impressive site - very similar in purpose to the one I am working on now.

    I have in fact been showing your site to my supervisor as an example of what I'm shooting for with a custom dashboard...

     

    seevo

    Wednesday, April 1, 2009 6:35 PM
  • Let us know if you need any help with the design / css consultancy etc
    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    Wednesday, April 1, 2009 9:03 PM
    Moderator
  • Unfortunately our consulting budget is very small for the next year...

    Thanks for the information thus far though...
    Thursday, April 2, 2009 1:18 PM
  • Brian:  How do you attach your custom control to the upper right?

    Earlier this week I created a custom control based on the code in the MSDN documentation. By adjusting the control div's style settings (set a pixel value for style.right, and set style.left to "auto"), I could position it to attach to the upper right in Firefox.  However this threw an exception in IE7.  The exception was occurring in the shim code when it copied these settings.  In the end I moved it to the left before the standard dashboard!


    (I also had a problem with the shim not resizing in IE7, but this was fixed by explicitly updating the shim size after changing the control's HTML)


    Richard


    Richard Marsden http://www.geowebguru.com http://www.mapping-tools.com
    Thursday, April 2, 2009 1:43 PM
  • You don't need to set CSS left:auto; if you have explicitly set a CSS right property. Just do something like this in the div that contains your controls:
    position: absolute;
    right: 0px;
    top: 120px;

    The shims are only necessary if you want to use 3D mode - in 2D mode you can simply position divs right on top of the map div.
    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Thursday, April 2, 2009 1:57 PM
    Moderator
  • I was missing the absolute, but the following still gives me a full-width control in FF3 and IE7:


    function AddLayerControl()
    {
      if (control == null)
      {
        control = document.createElement("div");
        control.id = "myControl";
        control.style.position = "absolute";
        control.style.top ="150px";
        control.style.right = "5px";
        control.style.border = "2px solid black";
        control.style.background = "White";
        setControlOpen();
    
    
        map.AddControl(control);
    //    addShim(control);
      }
    }

    setControlOpen() sets the innerHTML property.
    There are two modes with different innerHTML values according to whether the control is "open" or "closed" - hence the need to dynamically resize.

    Richard Marsden http://www.geowebguru.com http://www.mapping-tools.com
    Thursday, April 2, 2009 2:17 PM
  • It is a full width control because you haven't set the style.width property.
    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Thursday, April 2, 2009 2:23 PM
    Moderator
  • That fixes the width, but it is still positioned on the left - on both FF3 and IE7!

    The innerHTML does not contain any position formatting - the only styling involves colour and bold.

    The only I've found to get it on the right is to use left = "auto"  - and that only works on FF3.


    Richard Marsden http://www.geowebguru.com http://www.mapping-tools.com
    Thursday, April 2, 2009 4:13 PM
  • I'm not sure what you're doing, but I can assure you that it's perfectly possible to right align a floating div on top of a VE map - I just checked mine in IE 7/8, FF3, and Safari and they're all fine. Try the following:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
        <script type="text/javascript">
            var map = null;
            function getMap() {
                var map = new VEMap('divMap');
                map.LoadMap();
            }
        </script>
        <style type="text/css">
            #divContainer
            {
                position: absolute;
                right: 140px;
                width: 120px;
                top: 20px;
                z-index: 1000;
                border: solid 5px black;
            }
         </style>
    </head>
    <body onload="getMap();" style="width: 100%; height: 100%;">
        <div id="divContainer">
            <br />
            some text
            <br />
            some more text
        </div> 
        <div id='divMap' style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
    </body>
    </html>
    

    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Thursday, April 2, 2009 4:31 PM
    Moderator
  • It could be the dynamic style creation that I was using - cribbed from the documentation.

    I'll have a play around with the stylesheet definition like you have above.


    Richard Marsden http://www.geowebguru.com http://www.mapping-tools.com
    Thursday, April 2, 2009 4:51 PM
  • right offsets are sometimes tricky cross browser. Personally we never bother adding the control using the ve api as I dont really see any benefit to it, so all ours are possitioned in css like Tanoshimi's example


    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware
    Thursday, April 2, 2009 5:37 PM
    Moderator
  • A bit of dabbling later...

    It looks like the culprit is the VEMap's AddControl method!

    I basically converted it over to something like what you had - first the static CSS, then the div definition.

    I need to pretty things up a bit, but now it is on the upper right and works with both FF and IE  - thanks!


    Richard Marsden http://www.geowebguru.com http://www.mapping-tools.com
    Thursday, April 2, 2009 5:44 PM
  • Up and running with a basic custom dashboard - thanks for your tips.
    Thursday, April 2, 2009 7:23 PM
  • I stopped using the AddControl method because it added the control to the document as a whole, not to the map panel. When I resized the panel div, my controls stayed in place, whereas the Scale Bar and Copyright info in the lower right moved with the resizing. Now I am childAppend'ing the controls to the map panel after the map is loaded. There are issues now, of course, with the z-index of the controls.

    Can anyone suggest something that would work better?

    Thursday, April 28, 2011 11:59 PM