Adding custom pattern overlays on Google Maps

0
votes

I'm currently using Google Maps API and I'm open to try out other free map APIs to accomplish my task.

In one of the projects I'm working on, I need to be able to overlay multiple shape overlay layers on top of one another. My initial thought is to have the first overlay layer to use different shades of solid colors. For subsequent overlay layers, I plan to use different color-coded patterns... ex: the second overlay layer uses color-coded stripe pattern and another overlay layer uses color-coded checkerbox pattern. This way, I can stack these overlay layers to represent multiple things. For the first overlay layer, I'm able to create irregular shape boundaries using Polygon objects and I'm able to set different fill colors on the polygons depending on the associated values.

After digging around, it seems like the Polygon object in Google Maps API only accepts fill and stroke colors, and I don't seem to be able to set custom pattern on a Polygon object. I was hoping it will at least take a PNG pattern file but it doesn't. The closest things I could use is GroundOverlay object but that's not going to work for me because it accepts only 2 coordinates (top left and bottom right, I believe) whereas I need to create custom pattern overlays on irregular shapes.

Can I accomplish this using Google Maps API, or any other map APIs (Bing, Yahoo, etc)? Are there any third party APIs that allow me to integrate custom pattern overlays on Google Maps?

2
google-mapsmapoverlaybing-maps

2 Answers

1
votes

I don't believe any of the APIs you mention support patterned vector shape layers. The two options I can think of are:

  • To use fill colours that are semi-transparent. Let's say you have a layer that has semi-transparent red polygons, and another layer on top that has semi-transparent blue polygons - the area of overlap between them will be filled with the combined colour (i.e. purple in this case). Bing Maps certainly supports an alpha channel for polygon fills, and I suspect Google Maps does too.
  • Rather than using a vector shape layer, render your data as raster layers, using whatever fill pattern you want. Cut these layers into 256px x 256px tiles numbered according to the quadkey tile numbering system and place them on the map as custom tile layers. (i.e. the way that the built-in road map and aerial tiles are displayed). If you render your tiles as PNGs, you can stack several layers on top of each other and have transparent (or semitransparent) areas to show through the data in the layers underneath. Depending on what the source of your data is, you might find tools like Mapnik or Geoserver useful to create the tile layers.
1
votes

If you can live with just a stroke pattern, as opposed to a fill pattern, the latest version of the Bing maps sdk allows you to set the strokeDashArray when creating polygons. Maybe that will suffice for identifying the different shapes you have to overlay on the map.

Hope that helps...