Dan Hounshell asked me what’s my territory in response to my announcement about taking on the RIA Architect Evangelist Roll. I thought about just typing out the response, but then I realized that that would be very un-RIA of me and it would, as many standard HTML pages do, fail to really help people visualize where I’m working.
The first one that I thought of was a Virtual Earth map overlay. I used to think these were hard until Larry Clarkin showed me how easy these were to do. I’ll be doing a lot of these over time as I start doing mashups for events and the like. The hope is to start doing a GeoRSS feed at some point that will have a list of events that I’ll be at, where to find registration and the like. This has been in the plans for quite a while, the questions where to host it and the like are interfering with progress.
However, for right now, I’m just going to do the simple layer over Virtual Earth to show you the Central Region.
This was relatively simple to do. All of the code that you need to get started can be found on the Interactive SDK which makes this the best documented API I’ve seen Microsoft produce.
This is the code that I wrote. Notice the “…” which means that there’s about another 20 lines of those to make the central region shape. The hardest part of this one was getting all the latitude/longitudes right. I didn’t get it perfect but it’s close.
function AddCentralRegion()
{
var fillColor = new VEColor(0,0,255,0.2); //Transparent Bluevar centralRegion = new VEShape(VEShapeType.Polygon,
[new VELatLong(48.99989069893174, -104.04843181371691),// North West Corner
new VELatLong(41.0017229451484, -104.05321687459947),
new VELatLong(41.00233021312762, -102.05171227455139), //KS NW Corner
…
new VELatLong(49.38326680201004, -95.15361785888673),
new VELatLong(48.998803197833915, -95.15284538269043)
]);AddShape(centralRegion, fillColor);
map.SetCenterAndZoom(new VELatLong(38.47939467327643, -90.087890625), 4);
}function AddShape(shape, fillColor)
{
shape.HideIcon(); //Don’t need the pushpin
//Set the line color
var lineColor = new VEColor(0,0,0,1.0); //Black
shape.SetLineColor(lineColor);
//Set the line width
var lineWidth = Math.round(1);
shape.SetLineWidth(lineWidth);
//Set the fill color
shape.SetFillColor(fillColor);
//Set the info box
map.ClearInfoBoxStyles();
shape.SetTitle(“<h2>Heartland</h2>”);
shape.SetDescription(“<div>Heartland District</div>”);
//Add the shape the the map
map.AddShape(shape);
}
One small frustration was that I couldn’t figure out the JavaScript ordering and whatnot to get it to embed nicely in a blogpost. It really wants the call to load the map to be in the body’s onload call because that happens after the rest of the HTML has been loaded and rendered. That’s a little annoying and I’m going to figure out the issue and post a fix soon.