Introducing the new Bing Maps beta

Greg Schechter — Mon, 07 Dec 2009 05:19:51 GMT

Well, I’ve been off the air for quite some time, and now have the opportunity to pop up and talk about what I’ve been working on lately. I made the switch from focusing on building platforms like Silverlight, WPF and the Desktop Window Manager to building an app built on such platforms – namely the Bing Maps site. It’s great way to be able to see what you’ve been working on from a different perspective, and exercise a different set of muscles.

Last week was an exciting one: we launched the beta of the new Bing Maps site, the first to use Silverlight. We don’t use Silverlight just for the sake of using it, but because it enables fantastic user-experiences and superior performance and fluidity. Chris Pendleton’s blog entry give a lot more detail on what we’ve released. Rather than repeating it here, I recommend just giving his entry a read. Meanwhile, I will provide some links to some cool examples here – check ‘em out:

Bird’s Eye view in Manhattan looking over Central Park West
Seattle’s Fremont neighborhood highlighting establishments via “What’s nearby”
A Photosynth, displayed in Bing Maps, of a famous sculpture of socialist workers in Tiananmen Square that I took back in May
Today’s Front Pages – from around the world
Current Tweets from downtown Chicago
Locally relevant blogging content from San Francisco

We’ve learned a lot in building the site, and we have lots of surprises and improvements up our sleeves for upcoming releases, functionality, and perf improvements. So stay tuned, and enjoy using Bing Maps!

Silverlight 1.1 VirtualEarth Viewer

Greg Schechter — Wed, 22 Aug 2007 06:38:04 GMT

Microsoft Live Search Maps (aka Virtual Earth) at http://maps.live.com, is fantastic web technology that just keeps on getting better and better with birds-eye views, persistent collections, directions, etc. However, given that its rendering is straight HTML and DHTML, the visual experience when zooming and panning is sometimes a little jarring in that you see black patches while tiles load, and tile layers pop instantly from one to the other during zooming.

The underlying graphics functionality in Silverlight provides an opportunity for a smoother viewing experience. And I've had fun writing a Silverlight 1.1 (note Silverlight 1.1 is still in its Alpha stage) that provides just that. You can find it, along with the source, at the Community Gallery on silverlight.net. Click on the screenshot to visit the app:

(Extra points if you can tell me where screenshot is from - other than Rob and Dave!)

This app asynchronously requests tiles from the VirtualEarth tile servers (important note about this below). Upon completion of the load, an animation is set up to fade the image from fully transparent to fully opaque, while the tiles below the image remain in place. This results in a very nice fade-in effect as you zoom in and out and move around. That and a continuous make for a great map browsing experience. (And going fullscreen in IE with F11 is just beautiful.)

Important Note: The URLs used to access the tile servers are not guaranteed to be supported by Microsoft and at any point are subject to change where they would no longer work. Production code should not take any dependency on these tile servers.

Have fun!

WPF, Silverlight and C# 3.0 object initializers

Greg Schechter — Sat, 19 May 2007 20:13:00 GMT

XAML is definitely the way to go whenever possible when you're writing WPF and Silverlight apps, due to its amenability to tooling, analyzability, side-effect-free-ness, etc. However, there are occasionally (or often, depending on what you're doing) times when you need to construct WPF and Silverlight objects via code, and pure XAML expression doesn't do the trick. A common example is when you're in a programmatic loop, and you need to generate an object on each iteration of the loop; or when you have something dynamically varying at runtime and you create based on that. Some of those situations may still work with XAML and databinding, but there are many times where you just want to back off to writing it straight in code.

Since XAML is really an object-initialization-and-property-setting language, consider how we write the following XAML in code:

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.Stroke>

</LinearGradientBrush>

</Rectangle.Stroke>

</Rectangle>

<TextBlock Width="172" Height="80" Canvas.Left="109" Canvas.Top="109" TextWrapping="Wrap"

FontFamily="Baskerville Old Face" FontSize="72" Foreground="Orange">Hello

</TextBlock>

</Canvas>

The canonical means for writing something like this in code is to go from the inside out, creating objects and store them in local variables, and then assigning them into the containing objects. So, the above would be constructed like this in C#:

public UIElement CreateMyObject(double cornerRadius, double strokeThickness,

string textString)

{

LinearGradientBrush fillBrush = new LinearGradientBrush();

fillBrush.StartPoint = new Point(0, 0.5);

fillBrush.EndPoint = new Point(1, 0.5);

fillBrush.GradientStops.Add(new GradientStop(Colors.White, 0.0));

fillBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.5));

fillBrush.GradientStops.Add(new GradientStop(Colors.Black, 1.0));

LinearGradientBrush strokeBrush = new LinearGradientBrush();

strokeBrush.StartPoint = new Point(0, 0.5);

strokeBrush.EndPoint = new Point(1, 0.5);

strokeBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));

strokeBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.5));

strokeBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));

Rectangle r = new Rectangle();

r.Height = 312;

r.Width = 396;

r.Fill = fillBrush;

r.Stroke = strokeBrush;

r.StrokeThickness = strokeThickness;

r.RadiusX = cornerRadius;

r.RadiusY = cornerRadius;

TextBlock t = new TextBlock();

t.TextWrapping = TextWrapping.Wrap;

t.FontFamily = new FontFamily("Baskerville Old Face");

t.FontSize = 72;

t.Foreground = Brushes.Orange;

t.Text = textString;

t.SetValue(Canvas.LeftProperty, 109.0);

t.SetValue(Canvas.TopProperty, 109.0);

Canvas c = new Canvas();

c.Children.Add(r);

c.Children.Add(t);

return c;

}

This certainly works, but it has the downside of taking something that's fundamentally declarative, and adding assignment to it solely because we need to refer to the objects we just created as we assign its properties. This approach also encourages the inside-out construction of objects, making it harder to see the forest through the trees.

Enter C# 3.0 (coming in the "Orcas" release), with its "object initializer" feature. Object initializers are particularly good for the sorts of objects that get built up in WPF and Silverlight -- namely objects that are created and then have properties assigned. Not coincidentally, this is precisely the pattern used for XAML-exposed objects as well.

Here's a canonical example of construction of a Point without and with object initializers (not using any parameterized constructors):

Without:

Point pt = new Point();

pt.X = 3.0;

pt.Y = 4.0;

With:

Point pt = new Point() { X = 3.0, Y = 4.0 };

Now we can take our C# and convert it to use object initializers, resulting in this:

public UIElement CreateMyObject(double cornerRadius, double strokeThickness,

string textString)

{

return new Canvas()

{

Children =

{

new Rectangle()

{

Height = 312,

Width = 396,

Fill = new LinearGradientBrush()

{

StartPoint = new Point(0,0.5),

EndPoint = new Point(1, 0.5),

GradientStops =

{

new GradientStop(Colors.White, 0),

new GradientStop(Colors.Blue, 0.5),

new GradientStop(Colors.Black, 1),

}

Stroke = new LinearGradientBrush()

{

StartPoint = new Point(0,0.5),

EndPoint = new Point(1, 0.5),

GradientStops =

{

new GradientStop(Colors.Black, 0),

new GradientStop(Colors.Red, 0.5),

new GradientStop(Colors.White, 1),

}

StrokeThickness = strokeThickness,

RadiusX = cornerRadius,

RadiusY = cornerRadius

new TextBlock()

{

TextWrapping = TextWrapping.Wrap,

FontFamily = new FontFamily("Baskerville Old Face"),

FontSize = 72,

Foreground = Brushes.Orange,

Text = textString,

}

};

}

Here, objects can be created outside-in, there's no possibility of creating unwanted "side-effects" here by needing to deal with temporary local variables. Finally, C# Intellisense in Visual Studio helps out even more in object initializer expressions -- by only displaying properties that can be set (no methods), and by not displaying properties that have already been set in the expression. So for instance when I'm typing FontSize in the above, Intellisense won't prompt with FontFamily, since this has already been set the line before.

There is one major problem with the object-initializer version I show above: it doesn't deal with the attached properties (Canvas.Top and Canvas.Left) that both the XAML and the first C# example have. C# doesn't have direct language support for attached properties, so this is a situation where we do need to have a compromise approach -- using object initializers to create as large a chunk as possible, then setting attached properties imperatively, then using the results in another object initializer expression. The following takes that approach as it creates a TextBlock with object initialization syntax, sets some attached properties, and then uses the result in another object initializer expression.

public UIElement CreateMyObject(double cornerRadius, double strokeThickness,

string textString)

{

TextBlock textBlock = new TextBlock()

{

TextWrapping = TextWrapping.Wrap,

FontFamily = new FontFamily("Baskerville Old Face"),

FontSize = 72,

Foreground = Brushes.Orange,

Text = textString,

};

textBlock.SetValue(Canvas.LeftProperty, 109.0);

textBlock.SetValue(Canvas.TopProperty, 109.0);

return new Canvas()

{

Children =

{

new Rectangle()

{

Height = 312,

Width = 396,

Fill = new LinearGradientBrush()

{

StartPoint = new Point(0,0.5),

EndPoint = new Point(1, 0.5),

GradientStops =

{

new GradientStop(Colors.White, 0),

new GradientStop(Colors.Blue, 0.5),

new GradientStop(Colors.Black, 1),

}

Stroke = new LinearGradientBrush()

{

StartPoint = new Point(0,0.5),

EndPoint = new Point(1, 0.5),

GradientStops =

{

new GradientStop(Colors.Black, 0),

new GradientStop(Colors.Red, 0.5),

new GradientStop(Colors.White, 1),

}

StrokeThickness = strokeThickness,

RadiusX = cornerRadius,

RadiusY = cornerRadius

textBlock

}

};

All told, C# 3.0 object initializers make programmatic construction of WPF and Silverlight objects much more pleasant.

Greg Schechter's Blog : Silverlight

Introducing the new Bing Maps beta

Silverlight 1.1 VirtualEarth Viewer

WPF, Silverlight and C# 3.0 object initializers