This project has moved. For the latest updates, please go here.

How to display an image on the map

Jan 28, 2013 at 6:32 PM

Hello ClemensF,

what would be the best way to show an image on the map. I would like to display some kind of "heatmap".

The image needs to be attached to a location and has a known size in world coordinates. Zooming and panning the map should zoom an pan the image too.

The overall result should look like this example (implemented with the Google Maps API)

 

Michael Ewe,Germany

Coordinator
Jan 28, 2013 at 6:56 PM
Edited Jan 28, 2013 at 6:56 PM

You would usually create a specialized TileLayer or TileSource for that purpose. It would not only support panning, but also zooming.

Of course the image would have to be tiled according to the standard map tiling scheme. Image tiles could however be loaded from local files by their zoom level and x and y indices like in the following example:

<map:TileLayer SourceName="..." MinZoomLevel="..." MaxZoomLevel="..."
               TileSource="file://.../{z}/{x}/{y}.png"/>


Jan 28, 2013 at 7:16 PM

Many thanks for  your answer!

If i get you right, that means:

  1. the control is able to display more than one tile layer
  2. the bitmaps in my own tile layer could have some alpha channel settings, so that the "lower" map tiles will still be visible (to some amount)

Is that true?

 

-- Michael

Coordinator
Jan 28, 2013 at 10:42 PM

Yes, you could add multiple TileLayer instances to the TileLayers property. Each TileLayer may define an Opacity less than 1.

<map:Map ...>
    <map:Map.TileLayers>
        <map:TileLayer SourceName="OpenStreetMap" Description="� {y} OpenStreetMap Contributors, CC-BY-SA"
                        TileSource="http://{c}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
        <map:TileLayer SourceName="MyOverlay" TileSource="file://.../{z}/{x}/{y}.png" Opacity=".5"/>
    </map:Map.TileLayers>
    ...
</map:Map>

You may also want to take a look at the WPF sample application. It adds a TileLayer dynamically when the "Seamarks" CheckBox is checked.

Apr 8, 2013 at 3:58 PM
I too have a similar requirement for rendering a heatmap bitmap overlay on top of the base map layer. Unfortunately my heatmap changes by the minute so the approach above using a tileserver wont work as the tile wont be updated (i'm displaying expected emergency incidents for an ambulance trust). In the Bing version of my code I could provide a DataTemplate/ItemContainerStyle that specified the size of the item to be displayed as a rectangle, not just the location as a point. I'm working on a replacement called MapBitmap based on MapPolyline. Not sure if this approach is going to work just yet though. If it does I'll post the code.
Coordinator
Apr 8, 2013 at 5:42 PM
Marcus, in your case it would probably be best to create a class that is derived from MapOverlay, and (besides any internal updates) override the OnViewportChanged method to react on viewport changes.
Apr 8, 2013 at 9:16 PM
Actually I am using it for a heatmap display too.

I introduced a new class MapRectangle in my code.

The heatmap itself is calculated in memory and used as the brush for the MapRectangle. Using this approach I can achieve more than satisfactory speed in zooming and panning the map and the bitmap. The drawback to this approach is the required resolution of the bitmap. I have used bitmaps of more than 5000x5000 pixels (32 ARGB resulting in 100 MByte bitmap data) on a small scale desktop PC without accelerated graphics hardware with no problems.
Apr 10, 2013 at 4:56 PM
I have produced a MapBitmap object that allows you to specify a bounday and imagesource based on the code in MapPolyline. Is there a way I can share that with you.
Apr 10, 2013 at 9:10 PM
Edited Apr 10, 2013 at 9:10 PM
Sure, that stuff is pretty simple.

Unfortunatly I am not a git guru. And to be honest, I only have a vague understanding of how to organize such an effort via codeplex. What do you recommend for sharing and integrating your and/or my code with Clemens repository? Make a fork? Create a new repo?

I certainly can send you an E-Mail with my files (and learn something about git and the services offered by codeplex ;-)
Apr 11, 2013 at 11:09 AM
I created a fork "BitmapsandZoom" and added you in.. I'll make the code changes today if I get a chance..
Apr 11, 2013 at 9:54 PM
Splendid, when I get back home, I will include my changes...
Coordinator
Apr 12, 2013 at 7:03 PM
The newest XAML Map Control version, 1.2.0, contains a MapRectangle class, with South, North, West and East properties which specify the respective borders in world coordinates. It can be filled like a normal Rectangle control, of course also with an ImageBrush. A derived MapImage class has a Source property (like the Image control) and sets such an ImageBrush.

The updated sample applications show how to use MapImage.
Apr 13, 2013 at 11:47 AM
Just checked out the latest version from codeplex

Clemens's new classes almost exactly match, what I have done myself. My own MapRectangle had a Center in world coordinates and an Extend in meters. The final world coordinates for the rectangle were calculated with the Vincenty formulae. Anyway: the new class by Clemens is a perfect fit.

In my opinion creating a fork for this topic is not neccessary any more...

Thanks Clemens!
Apr 15, 2013 at 10:36 AM
I added the fork anyway as I did this over the weekend. It adds a specific MapBitmap control. I found I had to add some translations as the image was always inverted. I'll take a look at the imagebrush way of doing things.

I also added in ZoomToBoundary in that fork - I think that request was in a previous post - it works quite well for me.

Marcus
Coordinator
Apr 15, 2013 at 6:35 PM
Edited Apr 15, 2013 at 6:37 PM
Marcus, now that you added this fork you may consider to remove your previous one, called ZoomToExtent. That one seems to be obsolete now.
Apr 16, 2013 at 11:17 AM
Done....