How to add Vritual Earth API in the Live.com Gadget?

How to add Vritual Earth API in the Live.com Gadget?

• BerW

  I had the same issue myself when trying to develop my own gadget. I have found the best compromise is to just treat the gadget as a wrapper for a web page, similar to the Web Wrapper gadget sample in the SDK.

  http://microsoftgadgets.com/livesdk/docs/default.htm#EmbeddingawebpageasaGadget

  It's not a "pure" gadget, but I have found it easier to manipulate the map this way...

  
  

• ScipBe

  But where's the fun in writing a Yet Another Iframe Gadget You may have had an easier time getting your iframe gadget going, but I'll bet startlet had a more fun time trying to figure out how to pull in the VE controls and hook them up inside the gadget itself.

  I'm a huge fan of non-iframe, non-flash gadgets. Yes, you can do some neat stuff by wrapping some external web page or flash movie in a gadget, but that's just plain boring. I'd rather figure out how to get the same functionality without having to resort to the iframe hack.

  
  

• iljanated

  Yeah, it might be boring and lame but it works.

  Everyone's gadgets are going to be in an iFrame anyways. I work at MS and they won't even let me do inline gadgets! I'm very happy that he was able to get the VE map control to work inside a gadget natively. I banged my head on that for a day or so until I gave up on it.

  
  

• Pon t3h pony

  I think for now you'll be safe with the approach you have. mapcontrol.js is on its fourth version and as far as I can tell it hasn't changed behaviors in that time (at least not from v3 to v4, anyway). My main concern would be that you're including non-Atlasized code in your gadget, but since gadgets are sandboxed that shouldn't be an issue.

  Good job on figuring that out the reference issue. I look forward to see what you're going to do with this gadget.

  
  

• zaynun hammoud

  I'd be interested in hearing how you got the reference problem solved.

  For your "new VEMap('elementID')" question, are you asking how do you get an elementID to use Create a new div (var div = document.createElement("div");), add it to the DOM (p_elSource.appendChild(div);), and give it an id (div.id = "someid";). Then you should be able to use "someid" in the VEMap() constructor.

  
  

• Diffused Mind

  Hi,Toddos

  I also found the way try to create a "script" element and reference the VE api is not a good way. As if the connection is slow it will bring a "object null reference" problem. So I directly write the url in the gadget.xml's link list(just as you metioned). But I think your method is better. It solves my gadget's submition problem. Thanks a lot.

  
  

• Eric Twietmeyer

  Hi,

  The reference of VE API have been solved, but there is still a problem. Gadget seems different from the normal web page. How could I use "new VEMap('elementID')" to load a map in the Gadget

  Thanks,

  
  

• mhorton

  Thanks,Toddos

  It works now.

  For the reference problem, the "mapcontrol.js" just tries to write content "document.write("<script type='text/javascript' src='http://maps.live.com/veapi.ashx v=1.3.1115150037.31'></script>");". And as gadget doesn't allow use "document.write()", so I use javascript to create element "script" and add it to other element(such as a "div"). Then the reference problem is solved. But I don't think this is a good idea. Because it may be have some problems if "mapcontrol.js" changes its content.

  So, if you have better solution, pls tell me. Thanks.

  
  

• Stark77

  Getting back on topic :)

  I believe I've found a better, more live.com-like way of adding VE support to your gadgets.  Startlet's method is to add a new script element, which I tried to do using DOM methods but ran into problems referencing VE objects in my code after doing so.  Maybe I misunderstood startlet's instructions, but that's okay.  You still can't use mapcontrol.js directly since it does a document.write, but you can directly use the URL that it writes (as startlet mentioned).  Anyway, on to my method.

  At first, I figured I'd try referencing the VE SDK URL directly from gadget.xml.  That worked out beautifully, with one caveat -- there's no way a gadget will be accepted in the Gallery if you do that, as all references in gadget.xml must be locally relative.  I guess you could download the VE SDK yourself and publish it with your gadget, but I wouldn't recommend doing that.  Since that method worked but I can't use it due to Gallery concerns, I needed to find another way.  That's when I remembered that Web.Network.createRequest() allows you to pull more types than just XML.  Specifically, one of those allowed types is "Web.Network.Type.Script", which will download and load a javascript file from some URL.  Sounds perfect for our purposes, right   Absolutely!

  Here's how to do it:

  // DOM
  var m_mapDiv;

  // VE control
  var m_map;

  this.initialize = function(p_objScope)
  {
      m_mapDiv = document.createElement("div");
      p_elSource.appendChild(m_mapDiv);
      m_mapDiv.id = "mapDiv";
  
      var req = Web.Network.createRequest(
          Web.Network.Type.Script
          , "http://maps.live.com/veapi.ashx v=1.3.1115150037.31"
          , null
          , OnLoadVE
      );
  
      req.execute();
  
      Your.Gadget.Class.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
  };

  function OnLoadVE(response)
  {
      m_map = new VEMap("mapDiv");
      m_map.LoadMap();
  }

  You should probably do some error-handling in OnLoadVE, and "response" might have some useful bits in it as well (I haven't debugged in to figure out what's in response for Script types, yet), but this is working perfectly for me.

  
  

• Yves1

  Oh yeah, don't get me wrong.

  I think that "pure" gadgets are the best way to go if you can make it work. The gadget I am working on now is using an iframe because at the time I didn't know of a good way to get the VE control working natively.

  
  

• mayotas

  One other bit. If you want VE just for its geocoding abilities (ie, you don't want to actually display the map), wrap your map div in another one and set the wrapper's display style to "none" (might need to set "overfow: hidden" as well if labels start showing through). If you don't have the wrapper and just try to set the map div directly to "none", you will find that VE will continually unhide your div as you do different operations. Not really a good thing if you're trying to keep the map hidden and just use some lat/long values you got from a search.

  
  

• brian_tsim

  Shawn Clark - MSFT wrote:

  Yeah, it might be boring and lame but it works. Everyone's gadgets are going to be in an iFrame anyways. I work at MS and they won't even let me do inline gadgets! I'm very happy that he was able to get the VE map control to work inside a gadget natively. I banged my head on that for a day or so until I gave up on it.

  I work at MS as well, and while there are processes in place to get authorization for an inline gadget if you absolutely must, I prefer not to do that (external developers have to work within the third-party iframe, so I will as well so I can feel their pain and perhaps use my internal status to pass along feedback or bug reports that may not otherwise be heard).

  I don't really like the excuse that Yet Another Iframe Gadgets are "okay because you're already in an iframe anyway". Seems like a cop-out. But then I write gadgets in my spare time for fun so I'd rather enjoy the process of tracking down a difficult issue like integrating VE controls than just slapping up an iframe and calling it done. :)

  BTW, that's not a value judgement against anybody who does use the iframe method. It's a valid technique that has been used to good effect more than once (though it does lend itself to abuse -- in the time it takes me to build one well-written gadget, you could've posted 50 YAIGs up to Gallery). I'm simply saying that I'd never do it myself, nor could I see anybody else using it if they're into gadgets for fun (not profit).

  
  
• How to add Vritual Earth API in the Live.com Gadget?