##
Overlaying Maps: 2

When superimposing map layers, the uppermost ones should be transparent to let the underlying ones show through. Transparency of maps and map layers can be set in many ways by MapServer at the server side. However, transparency can also be set by the browser on the individual images. This is a non standard CSS style item. To make an image half-transparent in Mozilla and IE, set its style item to respectively:

- <img style="moz-opacity:0.5"> (DHTML: img.style.MozOpacity = 0.5 )
- <img style="filter:alpha(opacity=50)"> (DHTML: img.filters.alpha.opacity = 50)

And now we can let the underlying 2000 map progressively show through the upper one from the 17th century
. The underlaying map can be made more or less transparent too
. Note that these changes in transparency are done solely in the browser; no interaction with the server is required, as long as the map extents remain the same. When zooming in, both maps are recomputed by the server at full opacity, sent back to the browser, and displayed there with the previously set transparency settings
. Note how unbelievably exact the 17th century map is when you toggle both maps on and off
. The only great alteration is the "Raadhuisstraat", one of the few break-throughs through the canal ring done in the 19th century
. That is as far as Amsterdam got in developing a boulevard system like Paris. Most canals and streets were left as they were
, although a few were made dry and put to better use
.
In Mapclient transparency values can be hard-coded in menu buttons, but they can also be generated by a slider
. Finally, note that, as before, the two layers are generated on different servers, so generating the whole map costs about as much time as producing one layer. This concept can be extended to as many layers as desired.