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.