My Problem

I'm currently displaying a layer image above a Google Maps base layer. I would like, when the user check/uncheck some checkboxes, that some parts of this image layer disappear, and the base layer appears instead these parts.
But I want the other parts still visible with the same opacity.


The image parts to hide are polygons. Those polygons are already generated as layers and are above my image layer. I could put a black background color to hide the wanted image parts, but it wouldn't display the base layer instead...
I'm stuck.

Solutions I thought about

I would like you to say me if that's possible and, if you can, how to do it.

I'm not asking for some code, I can do it myself, I'm just kind of a newbie at OpenLayers and I'd like someone to help me to understand how it works. Plus, I have to add functionnalities to an already written code so it's not very easy.

Here are data I have, I removed the ones which are not useful (this is only an example, empty data are usually filled with correct values).

The images :

images[id] = {
    name: "Image",
    image_date: '2012/08/25',
    image_path : 'static/path/to/image',
    width : '250',
    height : '250',
    georef_north : '',
    georef_south : '',
    georef_east : '',
    georef_west : ''

And the polygons :

polygons[id] = {

I'm getting them like that via WFS protocol like this :

layers['blockLayer'][i] = new OpenLayers.Layer.Vector("Block", {
        strategies: [new OpenLayers.Strategy.BBOX()],
        filter: VMMS.GIS.GetBlockFilter(i),
        protocol: new OpenLayers.Protocol.WFS({
            url:  "../vine/jsGeoserver",
            version: "1.1.0",
            featureType: "block",
            featureNS : urlGeoserver + dataStore ,
            featurePrefix : dataStore ,
            srsName: "EPSG:900913",
            //srsName: "EPSG:4326",
            geometryName: "block_geom",
            schema : urlGeoserver +"wfs/DescribeFeatureType?version=1.1.0&typename=" + dataStore +":block"

        projection : proj_spherMerc,
        //projection : proj_WGS84,
        styleMap : StyleBlockWithOpacity

First Solution

Why wouldn't we put the image layer in each polygon layer, and display only the layers we want to display ?

Would that work ? I'm not actually sure about that and I don't want to get into it if it's not realizable. Because I don't know if I can display an image IN a layer and not entire, and it has to be well placed in the map and in the layer... Though it seems to me it's doable.

Second Solution

Why wouldn't we display the base layer again above the image to hide some parts ? The image would still be here, but as the base layer would be on top of it, we wouldn't see it.

This solution seems to me even less doable, or, at least, very heavy.

An example image, it's what I'm currently displaying : There's the google maps base layer, then the image blue and green, and all forms are polygons layers above the image.

Thank you all for your answers !

  • 1
    is your image static (one image) or is it dynamic, generated from a database?
    – Mapperz
    Aug 21, 2012 at 16:20
  • The image is static, but it's not everytime the same (there is several images, and the user can dispaly the one he wants. But I would want to be able to apply some "filters" to this image, to display only some parts of it. Here's an example : Screenshot. All the drawn little polygons we can see are also available in OpenLayers layers. And I would like to hide some of them depending on options the user check. :) Aug 22, 2012 at 8:33

1 Answer 1


One way would be to host your image polygons as WMS using Geoserver, ArcGIS Server or something similar. Each image polygon representing a different feature.

Then use OpenLayers.Layer.WMS to add it as a layer in OpenLayers.

Then as the user clicks to hide them you provide the WMS layer with a filter which would only show the features/images you want by ID or some other property. like:

GeoServer Docs

http://<hostname>/wms?service=WMS&version=1.1.1&request=GetMap&....&cql_filter=IN ('id_1','id_2','id_3')

Here are some different ways you could modify the WMS filters:

  • I don't have any image polygons, I just have one entire image (.png, accessible via URL), that I display as a layer, and several polygons, totally separated of it, which are hosted with GeoServer. Aug 30, 2012 at 16:09
  • 1
    Can you create image polygons from your one entire image? You can use "clipping", extract by mask, or GDAL warp -crop_to_cutline. Then host them on GeoServer.
    – CaptDragon
    Aug 30, 2012 at 16:23
  • Yes, I could do that (if my boss is okay :D), but I don't know how to do that when the only things I have are the coords of the image and of the polygons... Do you think there's a way to do that just with coordinates ? Aug 30, 2012 at 16:30
  • 1
    The polygons are better or if the coordinates you speak of are polygon vertices rather than Bounding BOX then either way. Bounding box coordinates will be useless. The easiest way would be to use QGIS. Add both the polygon layer and your Image layer and use the clipping tool.
    – CaptDragon
    Aug 30, 2012 at 17:01
  • I just added the way I'm getting the polygons, I don't know if it makes any difference... Thanks for your help anyway, I'm very grateful. Aug 31, 2012 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.