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

/**
 * 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);
}