GeoJason

Open source geo, web maps, etc.

Overlay Map Management With Google Maps API V3

Google Maps API v3 is a complete overhaul of the API v2 and is specifically designed to be faster and more applicable to mobile devices. Because of this some of the functionality from v2 isn’t available. For example with v2 removing all overlays from your map was as simple as calling the clearOverlays() method on your GMap object. At v3 developers are required to keep track of map overlays which includes Markers, Polygons, ImageMapTypes, etc. Gone are the days of creating random markers and using clearOverlays() to clean things up.

I have a project that deals specifically with ImageMapTypes being served from GeoWebCache. I needed a way to control layer visibility but with v3 there is no clearOverlays() method to hide these. My solution was to create an array to store the ImageMapTypeOptions for each layer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

overlayMaps = [
    {
        getTileUrl: function(coord, zoom){
            return 'http://gisapps.co.union.nc.us:8080/geoserver/gwc/service/gmaps?layers=uc%3Afema_flood_zones&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
        },
        tileSize: new google.maps.Size(256, 256),
        opacity: 0.7,
        isPng: true
    }, {
        getTileUrl: function(coord, zoom){
            return 'http://gisapps.co.union.nc.us:8080/geoserver/gwc/service/gmaps?layers=uc%3Asubdivisions&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true
    }
];

Once the page is loaded I loop through my overlayMaps array and push a null object into the map’s overlayMapTypes array for each item. These serve as placeholders for my ImageMapTypes.

1
2
3

for (i = 0; i < overlayMaps.length; i++){
    map.overlayMapTypes.push(null);
}

So, we’ve got our placeholders for our overlay maps. How do we create the ImageMapTypes and toggle their visibility? I have some checkboxes with ids that correspond to the order of objects in our overlayMaps array.

1
2

<input type="checkbox" id="0" class="layer" /><label for="0">Flood Zones</label>
<input type="checkbox" id="1" class="layer" /><label for="1">Subdivisions</label>

With some help from jQuery we handle the click events from these checkboxes and determine if they were checked or unchecked. If checked, we create a new ImageMapType. Otherwise, we remove it by setting the value to null.

1
2
3
4
5
6
7
8
9
10
11

$('.layer').click(function(){
    var layerID = parseInt($(this).attr('id'));
    if ($(this).attr('checked')){
        var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]);
        map.overlayMapTypes.setAt(layerID, overlayMap);
    } else {
        if (map.overlayMapTypes.getLength() > 0){
            map.overlayMapTypes.setAt(layerID, null);
        }
    }
});

I’m sure this probably isn’t the most efficient way of managing overlays but it worked for me. I welcome any comments or suggestions.

Comments