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: ​http://n2.nabble.com/Watermarking-a-Map-td1085166.html

<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.
        //
        watermark.style.backgroundImage = '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.
        //
        watermark.style.zIndex = '3';

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

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

        //
        // Insert it into the DOM. 
        //
        var el = doc.getElementById(elName);
        el.parentNode.insertBefore(watermark, el);
}
</script>