CODEWITHSUNDEEP
c#silverlightbing-maps
David Archer
David Archer

Reputation: 1164

Creating Heat Maps for Bing Maps' Silverlight application

Looking for resources as much as anything. I have a nice, simple Silverlight-based Bing Maps application that puts pins into the map. Now I have a lot of pins, I'd like to instead create heat maps on-the-fly. I'm trying to look for resources that explain how to go about this, but can't find anything.

So, any ideas?

Upvotes: 5

Views: 3069

Answers (2)

RichardHowells
RichardHowells

Reputation: 9066

This is a good idea and it works great for a monochrome heat map. As Johan said the color intensity adds as the circles overlap. I'm adding mine from code. Here is the code I used...

Ellipse e = new Ellipse() { MaxWidth = 40, MaxHeight = 40 };
        e.Width = 40;
        e.Height = 40;
        e.Fill = new RadialGradientBrush(Color.FromArgb(128, 255, 0, 0), Color.FromArgb(0, 0, 0, 0));

...I'm very interested in how to extend this to a multi-color heat map that goes from 'cool' colors to 'hot' colors. At the moment I do not see how to do that. This article (http://mapsys.info/44010/heat-mapping-crime-data-with-bing-maps-and-html5-canvas/) has an idea for javascript in an HTML5 compliant browser. I don't know how to translate that to Silverlight.

Upvotes: 0

Johan Buret
Johan Buret

Reputation: 2634

You probably won't have much to do.

A quick way to generate the heat map would be to reskin the pushpin as a circle filled with a background with a transparency gradient, fully transparent on the edge and medium transparency at the other. As the circles stacks up, the color will be more intense.

EDIT

http://www.microsoft.com/maps/isdk/silverlight/#MapControlInteractiveSdk.Tutorials.TutorialCustomPushpin

And replacing the <m:Pushpin ... /> by

<Ellipse Width="40" Height="40" m:MapLayer.Position="48.8,2.1" m:MapLayer.PositionOrigin="Center">
  <Ellipse.Fill>
    <RadialGradientBrush>
      <GradientStop Color="#7FFF0000" Offset="0"/>
      <GradientStop Offset="1"/>
    </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>

Upvotes: 5

Related Questions