13,095,218 members (87,790 online)
alternative version

Stats

36.3K views
22 bookmarked
Posted 30 Aug 2010

Bézier Curves in Bing Silverlight Maps

, 30 Aug 2010
 Rate this:
Connecting geographical locations on Bing Maps with Bézier curves

Introduction

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.

Background

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).

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

`P(t) = (1-t)<sup>3</sup>P<sub>1</sub> + 3(1-t)<sup>2</sup>tB<sub>1</sub> + 3(1-t)t<sup>2</sup>B<sub>2</sub> + t<sup>3</sup>P<sub>2</sub>`

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 the curve contains.

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

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.

Derivative:

```P'<sub>0</sub> = (P<sub>1</sub> - P<sub>0</sub>) / a
P'<sub>i</sub> = (P<sub>i+1</sub> - P<sub>i-1</sub>) / a   where  i in [1, n-1]
P'<sub>n</sub> = (P<sub>n</sub> - P<sub>n-1</sub>) / a```

Control Points:

```B1<sub>i</sub> = P<sub>i</sub> + P'<sub>i</sub> / 3
B2<sub>i</sub> = P<sub>i+1</sub> - P'<sub>i+1</sub> / 3```

Using the Code

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

```private PointCollection GetBezierPoints(PointCollection pts, double tension)
{
PointCollection ret = new PointCollection();

for (int i = 0; i < pts.Count; i++)
{
// for first point append as is.
if (i == 0)
{
continue;
}

// for each point except first and last get B1, B2. next point.
// Last point do not have a next point.
}

return ret;
}
```

To use the `PointCollection` returned from `GetBezierPoints` method in Silverlight, we need to build a `Path` with `BezierSegments` in it.

```private PathFigure GetBezierSegments(PointCollection pts, double tension)
{
PathFigure ret = new PathFigure();
ret.Segments.Clear();
ret.IsClosed = false;

var bzPoints = GetBezierPoints(_projectedPoints, tension);

// First point is the starting point.
ret.StartPoint = bzPoints[0];

for (int i = 1; i < bzPoints.Count; i += 3)
{
{
Point1 = bzPoints[i],       // B1 control point.
Point2 = bzPoints[i + 1],   // B2 control point.
Point3 = bzPoints[i + 2]    // P2 start / end point.
});
}

return ret;
}```

And use this `PathFigure` in the `MapBezier` as:

```// Create a new PathGeometry.
var pGeo = new PathGeometry();

// Add the Bezier PathFigure to the PathGeometry.

// Set data of the Path to the created PathGeometry.
((Path)EncapsulatedShape).Data = pGeo;```

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.

```<m:Map x:Name="myMap" CredentialsProvider="***">
<m:MapLayer x:Name="layerDurak" >
<local:MapBezier Tension="2" x:Name="plDurakGidis" Stroke="Orange"

StrokeThickness="3" Opacity=".6" Locations="{Binding MyLocations, Mode=OneWay}" />
</m:MapLayer>
</m:Map>```

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.

Share

 Software Developer Turkey
No Biography provided

You may also be interested in...

 Pro

 First Prev Next
 Fascinating but ... victorbos7-Sep-10 5:23 victorbos 7-Sep-10 5:23
 Re: Fascinating but ... Kerem Kat9-Sep-10 3:44 Kerem Kat 9-Sep-10 3:44
 Good Stuff Member 45654332-Sep-10 8:12 Member 4565433 2-Sep-10 8:12
 My vote of 5 Marcelo Ricardo de Oliveira31-Aug-10 8:27 Marcelo Ricardo de Oliveira 31-Aug-10 8:27
 Re: My vote of 5 Kerem Kat3-Oct-10 5:00 Kerem Kat 3-Oct-10 5:00
 I like it and gave at 5 Sacha Barber31-Aug-10 4:03 Sacha Barber 31-Aug-10 4:03
 Re: I like it and gave at 5 Kerem Kat31-Aug-10 7:24 Kerem Kat 31-Aug-10 7:24
 Last Visit: 31-Dec-99 18:00     Last Update: 22-Aug-17 18:47 Refresh 1