Bézier Curves in Bing Silverlight Maps

Bézier Curves in Bing Silverlight Maps

Connecting geographical locations on Bing Maps with Bézier curves.

Download sample: MapBezier Silverlight Application


Bing Maps Silverlight Control library has a MapPolyline class for showing connected points on the map. I wanted my points to be smoothly connected but there wasn’t out-of-the-box support so I developed a custom control deriving from MapShapeBase class.

Bézier Curve on map.


Every developer who messed with Expression Blend or Gimp long enough knows by experimentation how a Bézier curve behaves. Basically a cubic Bézier curve has an initial point (P1), two control points (B1, B2) and a final point (P2).

Bézier Curve

Cubic Bézier Curve

The formula that defines a cubic Bézier curve is:

Cubic Bézier Curve

where t is in the interval [0,1].

Terms multiplying P1, B1, B2, P2 are called the basis functions for the cubic Bézier. Our points determine how much of these basis functions does the curve contains.

Basis Functions for Cubic Bézier Curve

Cubic Bézier Basis Functions

The thing is we need to calculate coordinates of the control points such that our points of interest are on the curve.

Polyline, Bézier, Catmull-Rom

Polyline, Bézier, Catmull-Rom

So how can we calculate these control points? After researching(read googling) I have landed on cardinal splines and Catmull-Rom splines. It appears that every control point of a Catmull-Rom spline is on the curve and it is also a Bézier curve which means we can use it as PathGeometry with a Silverlight Path object.

Calculating Control Points

If we rewrite formulas from the cardinal splines page as the following, we can easily calculate control points.

Point Derivative

Control Points:

Control Points

Fitted Bézier with Control Points Visible.

Fitted Bézier with Control Points Visible

Using the code

The method that calculates the Bézier Points is as the following. GetB1 and GetB2 are straight forward implementations of the aforementioned formulas.

You can use the MapBezier class just like MapPolyline and MapPolygon classes in your silverlight XAML file. See the attached sample for an example silverlight application.

Note: Bing Maps Silverlight SDK is needed for compiling the sample application.

Points of Interest

It was fun messing with the Bing Maps Silverlight Control toolkit and I hope MapBezier is what you are looking for.

If you liked this, vote the article at http://www.codeproject.com/KB/silverlight/MapBezier.aspx