dewert/reprojection-service.html

## reprojection-service.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Notification trigger event</title>
        <style type="text/css">

            #map {
                width: 800px;
                height: 600px;
            }

            #latlng-control {
                background: #ffc;
                border: 1px solid #676767;
                font-family: arial, helvetica, sans-serif;
                font-size: 0.7em;
                padding: 2px 4px;
                position: absolute;
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">

            var map;
            /**
             * LatLngControl class displays the LatLng and pixel coordinates
             * underneath the mouse within a container anchored to it.
             * @param {google.maps.Map} map Map to add custom control to.
             */
            function LatLngControl(map){
                /**
                 * Offset the control container from the mouse by this amount.
                 */
                this.ANCHOR_OFFSET_ = new google.maps.Point(8, 8);

                /**
                 * Pointer to the HTML container.
                 */
                this.node_ = this.createHtmlNode_();

                // Add control to the map. Position is irrelevant.
                map.controls[google.maps.ControlPosition.TOP].push(this.node_);

                // Bind this OverlayView to the map so we can access MapCanvasProjection
                // to convert LatLng to Point coordinates.
                this.setMap(map);

                // Register an MVC property to indicate whether this custom control
                // is visible or hidden. Initially hide control until mouse is over map.
                this.set('visible', false);
            }

            // Extend OverlayView so we can access MapCanvasProjection.
            LatLngControl.prototype = new google.maps.OverlayView();
            LatLngControl.prototype.draw = function(){
            };

            /**
             * @private
             * Helper function creates the HTML node which is the control container.
             * @return {HTMLDivElement}
             */
            LatLngControl.prototype.createHtmlNode_ = function(){
                var divNode = document.createElement('div');
                divNode.id = 'latlng-control';
                divNode.index = 100;
                return divNode;
            };

            /**
             * MVC property's state change handler function to show/hide the
             * control container.
             */
            LatLngControl.prototype.visible_changed = function(){
                this.node_.style.display = this.get('visible') ? '' : 'none';
            };

            /**
             * Specified LatLng value is used to calculate pixel coordinates and
             * update the control display. Container is also repositioned.
             * @param {google.maps.LatLng} latLng Position to display
             */
            LatLngControl.prototype.updatePosition = function(latLng){
                var projection = this.getProjection();
                var point = projection.fromLatLngToContainerPixel(latLng);

                // Update control position to be anchored next to mouse position.
                this.node_.style.left = point.x + this.ANCHOR_OFFSET_.x + 'px';
                this.node_.style.top = point.y + this.ANCHOR_OFFSET_.y + 'px';

                // Update control to display latlng and coordinates.
                this.node_.innerHTML = [latLng.toUrlValue(4), '<br/>', point.x, 'px, ', point.y, 'px'].join('');
            };


            function addWKTPolygonToMap(inPolygonString){
                //Extract response and load into array

                var startPoint = inPolygonString.lastIndexOf("(") + 1;
                var endPoint = inPolygonString.indexOf(")")

                var trimmedStr = inPolygonString.substr(startPoint, (endPoint - startPoint));
                var arrayPoints = trimmedStr.split(",");
                var arrayLatLng = [];

                for (var i = arrayPoints.length - 1; i >= 0; i--) {

                    var arrayCoords = arrayPoints[i].split(" ");
                    arrayLatLng.push(new google.maps.LatLng(arrayCoords[0], arrayCoords[1]));

                }

                bermudaTriangle = new google.maps.Polygon({
                    paths: arrayLatLng,
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35
                });

                bermudaTriangle.setMap(map);

            };

            /**
             * Called on the intiial pageload.
             */
            function init(){
                var centerLatLng = new google.maps.LatLng(30.3169444, -97.7427778);
                map = new google.maps.Map(document.getElementById('map'), {
                    'zoom': 12,
                    'center': centerLatLng,
                    'mapTypeId': google.maps.MapTypeId.ROADMAP
                });

                // Create new control to display latlng and coordinates under mouse.
                latLngControl = new LatLngControl(map);

                // Register event listeners
                google.maps.event.addListener(map, 'mouseover', function(mEvent){
                    latLngControl.set('visible', true);
                });
                google.maps.event.addListener(map, 'mouseout', function(mEvent){
                    latLngControl.set('visible', false);
                });
                google.maps.event.addListener(map, 'mousemove', function(mEvent){
                    latLngControl.updatePosition(mEvent.latLng);
                });
                google.maps.event.addListener(map, 'click', function(mEvent){


                    var marker = new google.maps.Marker({
                        position: mEvent.latLng,
                        map: map,
                        title: "Hello World!"
                    });

                    runWorkspaceJavascript(mEvent.latLng);

                });

            }

            function runWorkspaceJavascript(latLngObj){
                /*
                 Commonly available on the web, this function was taken from:
                 http://ajaxpatterns.org/XMLHttpRequest_Call
                 */
                function createXMLHttpRequest(){
                    try {
                        return new XMLHttpRequest();
                    }
                    catch (e) {
                    }
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                    }
                    alert("XMLHttpRequest not supported");
                    return null;
                }
                /*
                 Display the result when complete
                 */
                function onResponse(inObj){
                    // 4 indicates a result is ready
                    if (xhReq.readyState != 4)
                        return;
                    // Get the response and display it
                    alert(xhReq.responseText);

                    return;
                }
                /*
                 Create the XMLHttpRequest object
                 */
                var xhReq = createXMLHttpRequest();
                // Request Variables
                pHostName = "fmeserver.com"
                pUrlBase = "http://"+pHostName+"/fmedatastreaming/sharper/reprojection_demo.fmw?"
                pHttpMethod = "GET"
                // Create REST call
                pRestCall = pUrlBase +
                "?token=9fd352acd703691f67d63cf6ef1e60c7442a6389";
				pRestCall = pRestCall + "&YVALATTR="+ latLngObj.lng();
				pRestCall = pRestCall + "&XVALATTR="+ latLngObj.lat();
                var elem = document.fmeForm.elements;
                for (var i = 0; i < elem.length; i++) {
                    if (elem[i].type === "select-one") {
                        pRestCall += "&COORDSYS=" + elem[i].value;
                    }
                }

                // Send request
                xhReq.open(pHttpMethod, pRestCall, true);
                xhReq.onreadystatechange = onResponse;
                xhReq.send();
            }

            // Register an event listener to fire when the page finishes loading.
            google.maps.event.addDomListener(window, 'load', init);


            /**
             * This function takes the result returned from the REST API
             * and dynamically creates a combo box
             */
            function parseJSONResponse(inResult){
                var jsonDoc = JSON.parse(inResult);
                //Get the form, we will append the combo-box to this form.
                var container = document.forms['fmeForm'];
                //Get all parameter objects within the JSON. The parameter objects will
                //be used to populate the combo box.
                var parameters = jsonDoc.serviceResponse.parameters.parameter;
                for (i = 0; i < parameters.length; i++) {
                    // We only want to use the parameter if it is of type LOOKUP_CHOICE.
                    if (parameters[i].type === "LOOKUP_LISTBOX") {
                        //Create an empty select element. We will append the option
                        // elements to this element
                        var _select = document.createElement('select');
                        //Obtain the options object
                        var options = parameters[i].options.option;
                        for (j = 0; j < options.length; j++) {
                            //Create an option element
                            var _option = document.createElement('option');
                            //Set the text node to the display alias in the options object.
                            var displayNameNode = options[j].displayAlias;
                            var _text = document.createTextNode(displayNameNode);
                            //Set the value attribute to the parameter value. This is the value FME
                            //uses when it runs the translation.
                            _option.value = options[j].value;
                            //Append the text to the option and the option to the select tag. We now have something that looks like this
                            //<select>
                            //    <option value="fme_vlaue">Choice with alias value</option>
                            //    ...
                            //</select>
                            _option.appendChild(_text);
                            _select.appendChild(_option);
                        }
                        //Append the select elements to the form
                        container.appendChild(document.createTextNode(parameters[i].description + ': '));
                        container.appendChild(_select);
                        var br = document.createElement("br");
                        container.appendChild(br);
                    }
                }
            }

            /**
             * Called when the page first loads. Calls FME Server REST API and retrieves the XML.
             */
            function triggerRequestJSONCombo(){
                /*
                 Commonly available on the web, this function was taken from:
                 http://ajaxpatterns.org/XMLHttpRequest_Call
                 */
                function createXMLHttpRequest(){
                    try {
                        return new XMLHttpRequest();
                    }
                    catch (e) {
                    }
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                    }
                    alert("XMLHttpRequest not supported");
                    return null;
                }
                /*
                 Display the result when complete
                 */
                function onResponse(){
                    // 4 indicates a result is ready
                    if (xhReq.readyState != 4)
                        return;
                    // Get the response and cretae a form item
                    parseJSONResponse(xhReq.responseText);
                    return;
                }
                /*
                 Create the XMLHttpRequest object
                 */
                var xhReq = createXMLHttpRequest();
                // Request Variables
                pHostName = "fmeserver.com";
                pUrlBase = "http://" + pHostName + "/fmerest/repositories/sharper/reprojection_demo/parameters.json";
                pHttpMethod = "GET";
                // Create REST call
                pRestCall = pUrlBase +
                "?token=9fd352acd703691f67d63cf6ef1e60c7442a6389";
                // Send request
                xhReq.open(pHttpMethod, pRestCall, true);
                xhReq.onreadystatechange = onResponse;
                xhReq.send(null);
            }
        </script>
    </head>
    <body onload="triggerRequestJSONCombo()">
        <form name="fmeForm" method="post" enctype="multipart/form-data">
        </form>
        <div id="map">
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Notification trigger event</title>
	<style type="text/css">

	#map {
	width: 800px;
	height: 600px;
	}

	#latlng-control {
	background: #ffc;
	border: 1px solid #676767;
	font-family: arial, helvetica, sans-serif;
	font-size: 0.7em;
	padding: 2px 4px;
	position: absolute;
	}
	</style>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	<script type="text/javascript">

	var map;
	/**
	* LatLngControl class displays the LatLng and pixel coordinates
	* underneath the mouse within a container anchored to it.
	* @param {google.maps.Map} map Map to add custom control to.
	*/
	function LatLngControl(map){
	/**
	* Offset the control container from the mouse by this amount.
	*/
	this.ANCHOR_OFFSET_ = new google.maps.Point(8, 8);

	/**
	* Pointer to the HTML container.
	*/
	this.node_ = this.createHtmlNode_();

	// Add control to the map. Position is irrelevant.
	map.controls[google.maps.ControlPosition.TOP].push(this.node_);

	// Bind this OverlayView to the map so we can access MapCanvasProjection
	// to convert LatLng to Point coordinates.
	this.setMap(map);

	// Register an MVC property to indicate whether this custom control
	// is visible or hidden. Initially hide control until mouse is over map.
	this.set('visible', false);
	}

	// Extend OverlayView so we can access MapCanvasProjection.
	LatLngControl.prototype = new google.maps.OverlayView();
	LatLngControl.prototype.draw = function(){
	};

	/**
	* @private
	* Helper function creates the HTML node which is the control container.
	* @return {HTMLDivElement}
	*/
	LatLngControl.prototype.createHtmlNode_ = function(){
	var divNode = document.createElement('div');
	divNode.id = 'latlng-control';
	divNode.index = 100;
	return divNode;
	};

	/**
	* MVC property's state change handler function to show/hide the
	* control container.
	*/
	LatLngControl.prototype.visible_changed = function(){
	this.node_.style.display = this.get('visible') ? '' : 'none';
	};

	/**
	* Specified LatLng value is used to calculate pixel coordinates and
	* update the control display. Container is also repositioned.
	* @param {google.maps.LatLng} latLng Position to display
	*/
	LatLngControl.prototype.updatePosition = function(latLng){
	var projection = this.getProjection();
	var point = projection.fromLatLngToContainerPixel(latLng);

	// Update control position to be anchored next to mouse position.
	this.node_.style.left = point.x + this.ANCHOR_OFFSET_.x + 'px';
	this.node_.style.top = point.y + this.ANCHOR_OFFSET_.y + 'px';

	// Update control to display latlng and coordinates.
	this.node_.innerHTML = [latLng.toUrlValue(4), '<br/>', point.x, 'px, ', point.y, 'px'].join('');
	};



	function addWKTPolygonToMap(inPolygonString){
	//Extract response and load into array

	var startPoint = inPolygonString.lastIndexOf("(") + 1;
	var endPoint = inPolygonString.indexOf(")")

	var trimmedStr = inPolygonString.substr(startPoint, (endPoint - startPoint));
	var arrayPoints = trimmedStr.split(",");
	var arrayLatLng = [];

	for (var i = arrayPoints.length - 1; i >= 0; i--) {

	var arrayCoords = arrayPoints[i].split(" ");
	arrayLatLng.push(new google.maps.LatLng(arrayCoords[0], arrayCoords[1]));

	}

	bermudaTriangle = new google.maps.Polygon({
	paths: arrayLatLng,
	strokeColor: "#FF0000",
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: "#FF0000",
	fillOpacity: 0.35
	});

	bermudaTriangle.setMap(map);

	};

	/**
	* Called on the intiial pageload.
	*/
	function init(){
	var centerLatLng = new google.maps.LatLng(30.3169444, -97.7427778);
	map = new google.maps.Map(document.getElementById('map'), {
	'zoom': 12,
	'center': centerLatLng,
	'mapTypeId': google.maps.MapTypeId.ROADMAP
	});

	// Create new control to display latlng and coordinates under mouse.
	latLngControl = new LatLngControl(map);

	// Register event listeners
	google.maps.event.addListener(map, 'mouseover', function(mEvent){
	latLngControl.set('visible', true);
	});
	google.maps.event.addListener(map, 'mouseout', function(mEvent){
	latLngControl.set('visible', false);
	});
	google.maps.event.addListener(map, 'mousemove', function(mEvent){
	latLngControl.updatePosition(mEvent.latLng);
	});
	google.maps.event.addListener(map, 'click', function(mEvent){


	var marker = new google.maps.Marker({
	position: mEvent.latLng,
	map: map,
	title: "Hello World!"
	});

	runWorkspaceJavascript(mEvent.latLng);

	});

	}

	function runWorkspaceJavascript(latLngObj){
	/*
	Commonly available on the web, this function was taken from:
	http://ajaxpatterns.org/XMLHttpRequest_Call
	*/
	function createXMLHttpRequest(){
	try {
	return new XMLHttpRequest();
	}
	catch (e) {
	}
	try {
	return new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e) {
	}
	alert("XMLHttpRequest not supported");
	return null;
	}
	/*
	Display the result when complete
	*/
	function onResponse(inObj){
	// 4 indicates a result is ready
	if (xhReq.readyState != 4)
	return;
	// Get the response and display it
	alert(xhReq.responseText);

	return;
	}
	/*
	Create the XMLHttpRequest object
	*/
	var xhReq = createXMLHttpRequest();
	// Request Variables
	pHostName = "fmeserver.com"
	pUrlBase = "http://"+pHostName+"/fmedatastreaming/sharper/reprojection_demo.fmw?"
	pHttpMethod = "GET"
	// Create REST call
	pRestCall = pUrlBase +
	"?token=9fd352acd703691f67d63cf6ef1e60c7442a6389";
	pRestCall = pRestCall + "&YVALATTR="+ latLngObj.lng();
	pRestCall = pRestCall + "&XVALATTR="+ latLngObj.lat();
	var elem = document.fmeForm.elements;
	for (var i = 0; i < elem.length; i++) {
	if (elem[i].type === "select-one") {
	pRestCall += "&COORDSYS=" + elem[i].value;
	}
	}

	// Send request
	xhReq.open(pHttpMethod, pRestCall, true);
	xhReq.onreadystatechange = onResponse;
	xhReq.send();
	}

	// Register an event listener to fire when the page finishes loading.
	google.maps.event.addDomListener(window, 'load', init);


	/**
	* This function takes the result returned from the REST API
	* and dynamically creates a combo box
	*/
	function parseJSONResponse(inResult){
	var jsonDoc = JSON.parse(inResult);
	//Get the form, we will append the combo-box to this form.
	var container = document.forms['fmeForm'];
	//Get all parameter objects within the JSON. The parameter objects will
	//be used to populate the combo box.
	var parameters = jsonDoc.serviceResponse.parameters.parameter;
	for (i = 0; i < parameters.length; i++) {
	// We only want to use the parameter if it is of type LOOKUP_CHOICE.
	if (parameters[i].type === "LOOKUP_LISTBOX") {
	//Create an empty select element. We will append the option
	// elements to this element
	var _select = document.createElement('select');
	//Obtain the options object
	var options = parameters[i].options.option;
	for (j = 0; j < options.length; j++) {
	//Create an option element
	var _option = document.createElement('option');
	//Set the text node to the display alias in the options object.
	var displayNameNode = options[j].displayAlias;
	var _text = document.createTextNode(displayNameNode);
	//Set the value attribute to the parameter value. This is the value FME
	//uses when it runs the translation.
	_option.value = options[j].value;
	//Append the text to the option and the option to the select tag. We now have something that looks like this
	//<select>
	// <option value="fme_vlaue">Choice with alias value</option>
	// ...
	//</select>
	_option.appendChild(_text);
	_select.appendChild(_option);
	}
	//Append the select elements to the form
	container.appendChild(document.createTextNode(parameters[i].description + ': '));
	container.appendChild(_select);
	var br = document.createElement("br");
	container.appendChild(br);
	}
	}
	}

	/**
	* Called when the page first loads. Calls FME Server REST API and retrieves the XML.
	*/
	function triggerRequestJSONCombo(){
	/*
	Commonly available on the web, this function was taken from:
	http://ajaxpatterns.org/XMLHttpRequest_Call
	*/
	function createXMLHttpRequest(){
	try {
	return new XMLHttpRequest();
	}
	catch (e) {
	}
	try {
	return new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e) {
	}
	alert("XMLHttpRequest not supported");
	return null;
	}
	/*
	Display the result when complete
	*/
	function onResponse(){
	// 4 indicates a result is ready
	if (xhReq.readyState != 4)
	return;
	// Get the response and cretae a form item
	parseJSONResponse(xhReq.responseText);
	return;
	}
	/*
	Create the XMLHttpRequest object
	*/
	var xhReq = createXMLHttpRequest();
	// Request Variables
	pHostName = "fmeserver.com";
	pUrlBase = "http://" + pHostName + "/fmerest/repositories/sharper/reprojection_demo/parameters.json";
	pHttpMethod = "GET";
	// Create REST call
	pRestCall = pUrlBase +
	"?token=9fd352acd703691f67d63cf6ef1e60c7442a6389";
	// Send request
	xhReq.open(pHttpMethod, pRestCall, true);
	xhReq.onreadystatechange = onResponse;
	xhReq.send(null);
	}
	</script>
	</head>
	<body onload="triggerRequestJSONCombo()">
	<form name="fmeForm" method="post" enctype="multipart/form-data">
	</form>
	<div id="map">
	</div>
	</body>
	</html>