In order to include interaction to my OpenLayers 3 raster layer, I would like to use something similar to the HTML <area> tag (http://www.w3schools.com/tags/tag_area.asp). The aim is to click on certain regions on a raster layer (without projection) to trigger an event.

I haven't found anything on the web and would like to hear your experiences, comments etc.

One idea so far is to use an <img> with a transparent gif image (1x1 px) and then extended over the map extent.

<img src="/img/transparent.gif" width="1024" height="1024" usemap="#mapImg">
<map id="mapImg">
    <area id='area1' shape='poly' coords='...'>
    <area id='area2' shape='poly' coords='...'>
    <area id='area3' shape='poly' coords='...'>

1 Answer 1


Create an invisible JSON layer that you put on top of the raster layer. Then use the OL3 map click event to get the coordinate of the click and thus the corresponding clicked area.

Note that you dont need a projection with real world coordinates. You can simply pretend your raster layer has WGS84 coordinates and then draw geojson layers on it.

see fiddle http://jsfiddle.net/n66nxdbo/3/ for a Leaflet example.

  • thanks for your suggestions. The assignment of a projection might cause problems since my raster layer (so far, only) works with a "zoomify" projection: gis.stackexchange.com/questions/159201/…
    – fidelfisch
    Aug 31, 2015 at 12:57
  • See my update of your example fiddle: jsfiddle.net/vb53xz20/3 . I see no problem adding a GeoJSON layer on top of that.
    – til_b
    Aug 31, 2015 at 13:29
  • thanks again! When I first tried it, I could not find the shape of the geoJSON layer and therefore, I thought it did not work. Now, I spotted it at the very edge of my tile map and the technique looks very promising. The thing is that I already have the the coordinates for the shapes were I want to click on, however they are somehow misplaced and need to get scaled up (a kind of georeferencing for geoJSON). I have some hundreds and therefore, have to find a way for automatization...
    – fidelfisch
    Aug 31, 2015 at 15:03
  • 1
    phew, georeferencing the geoJSON file was not so easy and I had to do it semi-automated. Nevertheless, it works now. if I find a smooth way to get it done, I will post it here. Thanks again
    – fidelfisch
    Sep 1, 2015 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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