Our Friends
Recent Blog Posts RSS
ViaWindowsLive on Via Virtual Earth Blog
The new ViaWindowsLive community site has launched and features not only a definitive set of resources on all Live Services from Microsoft but also a special section on Virtual Earth including a new site gallery for you to upload your sites, new articles on Version 6, including getting started guide, an interactive quick guide, location finder and more. Subscribe to the VWL aggregated blog to stay in touch with everything Live Services related. Find all the great content from this site and much, much more. Explore how other Live Services can compliment Virtual Earth and your applications.
Version 5 URL changed - Error: 'VEMap' is undefined on Via Virtual Earth Blog
It has been reported that the old url to access the Version5 javascript for Virtual Earth no longer works. This is effecting sites worldwide.
The correct way to reference the Version 5 javascript is:
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
If you have been effected a forum thread has been started here
Silverlight Virtual Earth viewer on Via Virtual Earth Blog
With the launch of silverlight yesterday I was digging around and found this viewer for Virtual Earth by Greg Schechter. It does use the 1.1 alpha of silverlight. It gives some interesting ideas for where Virtual Earth could be headed. Certainly the demo of the performance of silverlight compared to javascript for processing showed a significant increase. This could be very useful.
And of course on the gamer front check this out by Andy Beaulieu and shoot down some UFO's over Birdseye images.
John.
So much new Virtual Earth Imagery Worldwide. on Via Virtual Earth Blog
I subscribe to all the VE blogs and recently the posts about updated imagery has been more and more frequent.
The latest is here and for myself downunder we saw three updates, Canberra, Newcastle and Uluru:
Derek Chan posts 3 Articles in a month! on Via Virtual Earth Blog
A big thank you to the efforts of Derek Chan who posted his third VE article today (he actually had it ready weeks ago but had to wait for Mr Bottleneck here at VVE ;) )
The 3 articles are all relivant to Version 5 of Virtual Earth and deal with the Mini Map, debugging javascript and now custom pins in routes.
All these can now be found in our articles section.
If you have something to contribute send us an email.
John (The bottleneck)
Virtual Earth 5 Custom Info box RSS
With the release of Version 5 of Virtual Earth we have been given the ability to have more control of the now officially named “info box” also known as the “pin popup” or “ero popup”.
The SDK says:
“Each VEShape object can store HTML content for a popup info box, and you can show/hide the info box programmatically, such as in the event handler for the shape. If you do not desire to use the default info box style you can clear it out and use your own customized CSS.”
So let’s take a look at what the setting “ClearInfoBoxStyles()” does for us.
Usage:
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.ClearInfoBoxStyles();
}
Without this line of code the html produced for the info box is as follows:
<div class="ero ero-leftBeak" style="visibility: hidden; top: 326.138px; bottom: auto;
left: 348.571px; right: auto; opacity: 1;">
<div class="ero-shadow">
<div class="ero-body">
<div class="ero-actionsBackground">
<div class="ero-previewArea">
<div class="firstChild">
<p />
<div class="VE_Pushpin_Popup_Title">
6434</div>
<div class="VE_Pushpin_Popup_Body">
CUNDEELEE</div>
</div>
</div>
<div class="ero-actions">
<ul />
</div>
<div class="ero-paddingHack" />
</div>
</div>
</div>
<div class="ero-beak" style="top: 7px;" />
</div>
With the line of code enable this is what is produced:
<div class="customInfoBox-with-leftBeak" style="visibility: hidden; top: 336.138px;
bottom: auto; left: 348.571px; right: auto; opacity: 1;">
<div class="customInfoBox-shadow">
<div class="customInfoBox-body">
<div class="customInfoBox-actionsBackground">
<div class="customInfoBox-previewArea">
<div class="firstChild">
<p />
<div class="VE_Pushpin_Popup_Title">
6434</div>
<div class="VE_Pushpin_Popup_Body">
CUNDEELEE</div>
</div>
</div>
<div class="customInfoBox-actions">
<ul />
</div>
<div class="customInfoBox-paddingHack" />
</div>
</div>
</div>
<div class="customInfoBox-beak" style="top: -3px;" />
</div>
Straight away we can see the standard ero styles disappear in favour of a “customInfoBox”. The actual HTML structure stays the same. In theory this is excellent news as you would assume we now have our own custom classes to play with in CSS, but unfortunately it does not quite work out.
From the SDK documentation we are given the following CSS template to follow:
/* Styles that apply to the info box's containing element whether it has no beak,
a rightBeak, or a leftBeak */
.customInfoBox-noBeak,
.customInfoBox-with-rightBeak,
.customInfoBox-with-leftBeak
{
position: absolute;
}
/* Offset the body for the drop-shadow and set the body background and border just for
starters (developers can change this easily) */
.customInfoBox-body
{
position: relative;
top: -5px;
left: -5px;
padding: 8px;
border: 1px solid #000;
background-color: #fff;
}
/* Apply a nice default drop-shadow after the default Virtual Earth info box styles are
cleared */
.customInfoBox-shadow
{
position: relative;
background-color: #ccc;
}
/* Sections of the info box that a developer could style if desired, but have no style
when the default Virtual Earth info box styles are cleared */
.customInfoBox-previewArea,
.customInfoBox-actionsBackground
{
}
/* Sections of the info box that should not be visible when the default Virtual Earth info
box styles are cleared */
.customInfoBox-actions,
.customInfoBox-paddingHack
{
display: none;
}
.customInfoBox-beak,
.customInfoBox-progressAnimation
{
visibility: hidden;
}
This is all well and good but we actually lose some of the basic style functionality like the “beak” that points from the shape to the info box. The div is in the HTML but this template doesn’t reflect the original ERO. Let look at what it has for styling:
.ero {
background-color:transparent;
border:0pt solid black;
color:#676767;
display:block;
font-size:1.2em;
position:absolute;
z-index:500 !important;
}
.ero-rightBeak {
padding:0pt 19px 0pt 0pt;
}
.ero-leftBeak {
padding:0pt 0pt 0pt 19px;
}
.ero-noBeak {
padding:0pt 4px;
}
.ero-beak {
height:34px;
position:absolute;
top:10px;
width:19px;
}
.ero-leftBeak .ero-beak {
background:transparent url(../../../../i/bin/1.3.20070327220207.22/ero/beakLeft.gif)
no-repeat scroll 0pt;
left:0pt;
}
.ero-rightBeak .ero-beak {
background:transparent url(../../../../i/bin/1.3.20070327220207.22/ero/beakRight.gif)
no-repeat scroll 0pt;
right:4px;
}
.ero-noBeak .ero-beak {
display:none;
}
.ero .ero-shadow {
background-color:#BFBFBF;
float:left;
position:relative;
}
.ero .ero-body {
background-color:#FFFFFF;
border:1px solid #888888;
left:-3px;
overflow:hidden;
position:relative;
top:-3px;
width:255px;
}
.ero .ero-previewArea {
background-color:#FFFFFF;
width:100%;
}
.ero .ero-previewArea p {
font-size:1.1em;
margin:0pt;
padding:0pt 12px 10px 0pt;
}
.ero .ero-previewArea div.firstChild {
margin:12px;
overflow:hidden;
}
* html .ero .ero-previewArea div {
}
.ero .ero-previewArea .title {
color:#000000;
font-size:1.1em;
font-weight:bold;
margin:0pt 0pt 8px;
}
.ero .ero-previewArea .ero-previewArea-image {
display:block;
float:left;
height:80px;
padding:3px 10px 5px 0pt;
position:relative;
width:80px;
}
.ero-actionsBackground {
background-color:#E4EDF3;
margin:4px;
}
.ero .ero-actions {
padding:4px 8px 0pt;
}
* html .ero .ero-actions {
padding-top:8px;
}
.ero .ero-actions ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
.ero .ero-actions ul a, .ero .ero-actions ul a:link, .ero .ero-actions ul a:visited {
color:#0088E4;
text-decoration:none;
}
.ero .ero-actions ul a:hover {
text-decoration:underline;
}
.ero .ero-actions ul li {
margin-bottom:4px;
}
.ero .ero-paddingHack {
font-size:8px;
height:8px;
width:1px;
}
.ero-progressAnimation {
font-size:0pt;
height:3px;
overflow:hidden;
position:absolute;
width:13px;
z-index:500;
}
.ero-progressAnimation div {
background-color:#54CE43;
font-size:0pt;
height:100%;
position:absolute;
width:3px;
}
.ero-progressAnimation div.frame0 {
left:-3px;
}
.ero-progressAnimation div.frame1 {
left:0pt;
}
.ero-progressAnimation div.frame2 {
left:5px;
}
.ero-progressAnimation div.frame3 {
left:10px;
}
So with a bit of reworking here is my attempt at creating the standard ERO for a custom info box:
.customInfoBox-noBeak,.customInfoBox-with-rightBeak,.customInfoBox-with-leftBeak
{border:0 solid black;color:#676767;display:block;font-size:1.2em;position:absolute;
z-index:500 !important;background:transparent}
.customInfoBox-with-rightBeak {padding:0 19px 0 0}
.customInfoBox-with-leftBeak {padding:0 0 0 19px}
.customInfoBox-noBeak {padding:0 4px}
.customInfoBox-body {border:1px solid #888;left:-3px;overflow:hidden;position:relative;
top:-3px;width:255px;background:#FFF}
.customInfoBox-shadow {float:left;position:relative;background:#BFBFBF}
.customInfoBox-previewArea {width:100%;background:#FFF}
.customInfoBox-previewArea p {font-size:1.1em;margin:0;padding:0 12px 10px 0}
.customInfoBox-previewArea div.firstChild {margin:12px;overflow:hidden}
.customInfoBox-previewArea .title {color:#000;font-size:1.1em;font-weight:bold;
margin:0 0 8px}
.customInfoBox-previewArea .ero-previewArea-image {display:block;float:left;height:80px;
padding:3px 10px 5px 0;position:relative;width:80px}
.customInfoBox-actionsBackground {margin:4px;background:#E4EDF3}
.customInfoBox-beak,.customInfoBox-progressAnimation {visibility:visible}
.customInfoBox-actions {padding:4px 8px 0}
* html .customInfoBox-actions {padding-top:8px}
.customInfoBox-actions ul {list-style-image:none;margin:0;padding:0;
list-style:none outside none}
.customInfoBox-actions ul a,.customInfoBox-actions ul a:link,
.customInfoBox-actions ul a:visited {color:#0088E4;text-decoration:none}
.customInfoBox-actions ul a:hover {text-decoration:underline}
.customInfoBox-actions ul li {margin-bottom:4px}
.customInfoBox-paddingHack {font-size:8px;height:8px;width:1px}
.customInfoBox-beak {height:34px;position:absolute;top:10px;width:19px}
.customInfoBox-with-leftBeak .customInfoBox-beak {background:transparent
url(http://maps.live.com/i/bin/1.3.20070327220207.22/ero/beakLeft.gif)
no-repeat scroll 0;left:0}
.customInfoBox-with-rightBeak .customInfoBox-beak {background:transparent
url(http://maps.live.com/i/bin/1.3.20070327220207.22/ero/beakRight.gif)
no-repeat scroll 0;right:4px}
.customInfoBox-noBeak .customInfoBox-beak {display:none}
.customInfoBox-progressAnimation {font-size:0;height:3px;overflow:hidden;position:absolute;
width:13px;z-index:500}
.customInfoBox-progressAnimation div {font-size:0;height:100%;position:absolute;width:3px;
background:#54CE43}
.customInfoBox-progressAnimation div.frame0 {left:-3px}
.customInfoBox-progressAnimation div.frame1 {left:0}
.customInfoBox-progressAnimation div.frame2 {left:5px}
.customInfoBox-progressAnimation div.frame3 {left:10px}
So now you have a template to follow that offers all the functionality of the original for you to edit to your liking but...
Those reading the styles very closely may have noticed the line:
.customInfoBox-beak,.customInfoBox-progressAnimation {visibility:visible}
Why is this in required? By default would it not be visible you ask? It would be except that the api.css has style information for the customInfoBox! I would have thought the point of the whole renaming to a custom style was so there was no style information to conflict with the developer!
Api.css includes:
.customInfoBox-noBeak, .customInfoBox-with-rightBeak, .customInfoBox-with-leftBeak {
position:absolute;
}
.customInfoBox-body {
background-color:#FFFFFF;
border:1px solid #000000;
left:-5px;
padding:8px;
position:relative;
top:-5px;
}
.customInfoBox-shadow {
background-color:#CCCCCC;
position:relative;
}
.customInfoBox-previewArea, .customInfoBox-actionsBackground {
}
.customInfoBox-actions, .customInfoBox-paddingHack {
display:none;
}
.customInfoBox-beak, .customInfoBox-progressAnimation {
visibility:hidden;
}
With this in place we are required to override the styles which is not only a pain but in Firefox will not consistently work. The developer’s styles can easily load first and then be overridden by the api.css.
Lastly if you run this code you will notice a serious bug, the beak does not disappear with the info box! What a pain.
Overall the concept is great, I have in previous versions of VE created info boxes from scratch without the fancy logic required to make them appear within the bounds of the map and screen effectively. A completely custom info box requires custom event handles to hide the box. The ability to completely customise a VE info box would allow any design to be applied utilising all the built in functional and no custom JavaScript code.
The issues are:
- why the styles exist in the api.css?
- why the beak is not programmatically hidden with the rest of the box?
Article contributed by John O'Brien (www.soulsolutions.com.au). Have you got something to contribute?