Texture Mapping

Inspired by decorative inlaid stone globes we tasked ourselves with reproducing this cartographic style in a web application.  This post discusses the product of our experimentation and the techniques used.  Please note that the assignment of textures to countries is completely random and does not imply any mean whatsoever.

Click here to view the live app.

Click here to download the source code.

The first step was to look for a suitable map service containing country boundaries and, most importantly, a color map field for non-contiguous shading.  Fortunately we were able to reuse a map service created originally for the animated cartogram sample.  Data for this map service is derived from the Esri data and maps dvd.  Incidently, this app is using the iconic and somewhat unusual Goode homolosine map projection.

For textures were harvested content from deviantART, an online repository of digital artwork.  We collected eight textured images for three themes: wood, metal and clothing.  Please click the about this app button in the application to display content attribution.

The presentation of textured countries simply required a UniqueValueRenderer with a PictureFillSymbol for each color map value.  However, rather than using the standard PictureFillSymbol we used a custom fill symbol so that we could introduce custom behavior whenever the user moved his or her mouse over a country.  On mouse-over, a country will shift slightly to the south east, enlarge and display a white halo.  This gives the impression that the country is lifting out of place.

One known issue with this application is that an out of memory exception is occasionally thrown at large scales.  After a little experimentation it appears that the occurrence of this exception can be reduced if the white halo is removed from the custom symbol.  The white halo is achieved by applying a blur effect to cloned geometry.

Unlike WPF, Silverlight does not support image brush tiling.  This meant that textures could only be stretched to the geometric extent of each countries.  For geographically large countries this resulted in blurry textures at normal scales.

Lastly, we experimented with hardware accelerated graphics but there was no perceivable performance improvement.  In summary, the use of images for polygon fills can produce very attractive maps however the omission of image brush tiling in Silverlight can result in less appealing maps at large scales.

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

2 Comments

  1. samiamoz says:

    Nice map. A couple of quesitons; why do some countries “lift out”, yet still remain underneath the main map layer (Niger)? and, Greenland and Antarctica move southwest when they lift out, because they are spit by the projection(?), but why does the US behave the same?

    Cheers
    Sam

    • Richie says:

      Hi Samiamoz,

      Very good questions. Just moments ago I published an update that fixed both of these issues.

      The reason why some countries appeared not to lift-out is due to display order. Countries added to the map first had a better chance of having their movement obscured by surrounding countries. The fix just added was promoted highlighted countries to the top of the display order.

      The second issue you identified was the inequitable movement. As described in the blog posting, countries that are moused-over shift slightly to the south-east and enlarge by 5%. The problem is that geographically wide countries grew too much. The fix was to remove the scaling and just translate countries.

      Thank you for your feedback!

      Regards,
      Richie