Skip to content
  • Home
  • Work
  • About
  • Blog
  • Contact

Visio and Bing (Virtual Earth)

John Goldsmith's profile image

John Goldsmith

06 March 2009
  • Save as Web Page

VisioAndVEHeader

I've recently been involved in a WPF based project that utilises Microsoft Virtual Earth and I thought it would make an interesting exercise to combine this with Visio's Save As Web output.

The live demo showes how clicking a shape, containing a latitude and longitude string, can update a Virtual Earth map embedded in the toolbar panel on the left hand side.

I'm not going to go into lots of detail about how to use Virtual Earth as the main purpose of this post is to demonstrate how to connect it to Visio web output, but if you want to find out more then here are a few links to get you going:

  • Live Services - Microsoft Virtual Earth
  • Virtual Earth Interactive SDK
  • MSDN - Virtual Earth Map Control SDK 6.2

Adding a widget

Visio's Save as Web 'toolbar' panel contains a series of widgets that are all kept in the widgets.htm file.  The selection available depends on which items were checked in the Publishing options section of the Save As Web dialog as Visio generated the files:

PublishingOptions

Each widget follows a roughly similar pattern using a table to hold a title bar and content that can be expanded and collapsed.  Once the content has been initialised it is added to a collection of widgets and it's then just a case of wiring up the new widget content to respond to changes made by the user.

Latitude and longitude

It strikes me that a good point to connect the Virtual Earth map (widget) and our shapes is when the details table gets updated (in CreatePropTable function in frameset.js) as it's at this stage that the shape data is being interrogated.  The code, therefore, looks for a shape data name of visVELatLong and if it finds it passes the associated value string to the map.

Ok, so that's quick overview, but following is a walkthrough of how to add the functionality to your own files.

Walkthrough - Part 1 (original Visio document)

  1. Add a shape data row (custom property) named visVELatLong to each master or shape that you want to receive map functionality.  (Note - The label cell must be blank or also named visVELatLong.)
  2. Add latitude and longitude data in the value cell in the following format:

    latitude,longitude,zoom 51.392351,-1.326599,12
    Note - the final zoom level figure is optional and if included must be an integer between 1 and 19.  (You can see the zoom level in operation in the above demo by clicking on the 'Group' shape.  All other shapes do not contain a zoom setting and so default to zoom level 4.)
  3. Save the Visio document and then click File / Save As Web Page... (ensuring you click the Publish button on the subsequent dialog).

Walkthrough - Part 2 (widgets.htm)

  1. Open your widgets.htm file in a text editor and search for the following div tag (this assumes that you included Search in your Publishing options above):

    <div id="divSearch" class="holder">
  2. Paste in the code from this text file, just above the div tag you've just found.
  3. Now navigate back up the same file to find the page's load function and add the GetMap() funtion as below:

    function load()
    {
      parent.g_WidgetsLoaded = true;
      if (parent.g_LoadingWidgets)
      {
        parent.g_LoadingWidgets = false;
        parent.location.reload();
      }
    }
    //Load VE map
    GetMap();
  4. Continue up the file again until you find the ToggleAll function and then add the following code below the comment, just inside the function's final brace:

    if(this.PNZ)
    {
      OpenCloseFunc(this.PNZ)
    }
    // Include VE widget in toggle
    if (this.Map) {
      OpenCloseFunc(this.Map)
    }
  5. Finally head right up to the top of the file, and inside the main script block, add a variable for the map itself:

    <script type="text/jscript" language="jscript">
    var g_VEMap = null;
        var imgMin = new Image();
  6. Save the file and close.

Walkthrough - Part 3 (frameset.js)

  1. Open your frameset.js file in a text editor and search for the CreatePropTable function.  Near the bottom of the function add the code (that's right, in blue) that calls the map function:

    strCPHTML += strValueText + "</TD></TR>";
      }
    
      //Set map lat long if correct shape data found
      if (frames[0].g_VEMap != null) {
        if (strLabelText === "visVELatLong") {
          frames[0].SetVEMapLocation(strValueText);
        }
      }
    }
    
    if(strCPHTML != "")
    {
      strCPHTML = strStartTable + strCPHTML + strEndTable;
    }
    else
    {
      strCPHTML = "No Details Available.";
    }
  2. Save the file and close.

Wrap up

So I hope that gives a reasonable base for adding Virtual Earth functionality to Visio's Save As Web output.  There's obviously plenty of scope for extending this with pushpin and route data, for example, and if that sounds interesting then you might also want to check out a couple of posts from David Parker in which he deals with how to use KML based data with Visio:

  • Moving Between Visio and KML
  • Importing KML Files into Visio

Johannes Kebeck, of Bing Maps fame, has recently written great post on integrating Floorplans and Photosynth on Bing Maps using Visio.]

Change log

  • 01 November 2024 Removed live demo link as no longer hosting.

  • 21 July 2014 Updated Johannes Kebeck's post link to web archive one.

  • 26 April 2010 Added link to Johannes Kebeck's post.

Microsoft MVP Logo

John has been a Microsoft MVP, in the award categories of Visio and M365, since 2008.

Visio Blogs

  • Bill Morein (via Wayback Machine)
  • Chris Castillo (via Wayback Machine)
  • Chris Hopkins (via Wayback Machine)
  • David Parker
  • Eric Rockey
  • Jesse Phillips-Mead
  • John Marshall
  • Michel LAPLANE (FR)
  • Nikolay Belyh
  • Saveen Reddy (via Wayback Machine)
  • Visio Guy
  • Visio [Product] Blog
  • Visio Insights (via Wayback Machine)

Visio Resources

  • Developing Microsoft Visio Solutions
  • Visio Stencils at ShapeSource
  • Microsoft Visio YouTube Playlist
  • Visio (Product site)
  • Office 2010 Engineering
  • Visio 2016 SDK (Download)
  • Visio JavaScript API reference
  • VisioMVPs.org
Contact

visualSignals ltd
31 Riverview Grove
London, W4 3QL
United Kingdom

+44 (0) 208 078 9120

Around the Web

Copyright © visualSignals ltd 2025

Mastodon