This page is one of the MapGuide Community CodeSamples. Visit the CodeSamples page to view more!

Displaying a watermark over the map in the AJAX viewer

NOTE: MapGuide Open Source 2.3 will support watermarks natively, eliminating the need for this code sample.

This page contains code from the MapGuide-users mail list, showing how to place a watermark over the map in the AJAX viewer. The code was submitted to the mailing list by Stuart Jones:

<script type="text/javascript">
 * Place a tiled image between the map and the scale slider
 * to represent a watermark on the map. The image is expected to have a 
 * transparent background.
 * @doc       The document object.
 * @elName    The name of the element before which the watermark will be put.
 * @imageUrl  The URL of the map image used for the watermark.
ShowWatermark: function(doc, elName, imageUrl) {

        if (!doc) return;
        if ((!elName) || (!doc.getElementById(elName))) return;
        if (!imageUrl) return;

        // Create a DIV to hold the watermark.
        var watermark = doc.createElement('div');

        // Assign the passed-in background image URL.
        // = 'url(' + imageUrl + ')';

        // This value is very important. It must be less than the lowest z-index
        // value used by the scale slider (which happens to be 4 at the time of 
        // writing.
        // = '3';

        // The rest of the styles.
        // TODO: Make this more sustainable. External CSS?
        // = 'absolute'; = '100%'; = '100%'; = 0.5; = 'alpha(opacity=50)';

        watermark.setAttribute('id', this.WATERMARK_ID);

        // Insert it into the DOM. 
        var el = doc.getElementById(elName);
        el.parentNode.insertBefore(watermark, el);
Last modified 5 years ago Last modified on Feb 6, 2013 1:11:46 PM