postgis_viewer.htm

﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- version 0.5 2023-03-28-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PostGIS Minimalist Spatial Query Viewer</title>
    <link rel="stylesheet" href="js/colorpicker/css/colorpicker.css" type="text/css" />
    <script src="js/jquery-3.6.4.min.js" type="text/javascript"></script>
    <!--http://www.eyecon.ro/colorpicker -->
    <script type="text/javascript" src="js/colorpicker/js/colorpicker.js"></script>
    <style>H1 {font-family:Verdana;color:midnight-blue;font-size:large}</style>
   
    <script type="text/javascript">
        //var postgis_handler = "GetRasterVB.ashx";
        //var postgis_handler = "GetRasterCS.ashx";
        var postgis_handler = "GetRaster.php";
        function showQuery() {
            //img holder
            txtimg = new Image();
            $(txtimg).on('load', function () {
                $("#result").prepend(this);
                $('#querylog').prepend('<hr/>' + $('#txtsql').val());
            }).on('error', function () {
        // notify the user that the image could not be loaded
                alert('error loading image');
            }).attr('src', postgis_handler + '?bvals=' + escape($('#txtbands').val()) + '&sql=' + encodeURIComponent($('#txtsql').val()) + '&spatial_type=' + $('#spatial_type').val() );
        }

        function clearResults() {
            $("#result").html("")
        }
        function clearQueryLog() {
            $("#querylog").html("")
        }
    </script>
</head>
<body>
	<h1>Minimalist PostGIS Spatial Query Web Viewer</h1> 
    <form><input type="hidden" id="txtbands"  value="255,0,0" />
    	<b>The Expression is of type:</b> <select id="spatial_type"><option value="geometry">Geometry</option><option value="raster">Raster</option><option value="raw">Raw</option></select>
        <table>
        	<tr><td><textarea id="txtsql" name="txtsql" runat="server" rows="5" cols="50">ST_Buffer('MULTIPOINT((1 2),(3 4),(5 6))'::geometry,1)</textarea></td>
        		<td><div id="colorSelector"><div></div></div></td>
        	</tr>
        </table>	
<script type="text/javascript">
	$('#colorSelector').ColorPicker({ flat: true,
		color: '#ff0000',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			if (!isNaN(rgb.r)) {
				$('#txtbands').val(rgb.r + ',' + rgb.g + ',' + rgb.b);
			}
		}
	});
</script>
        <input type="button" id="cmdShow" value="Show Query" onclick="showQuery()" />
        <input type="button" id="cmdClearResults" value="Clear Results" onclick="clearResults()" />
        <input type="button" id="cmdClearQueryLog" value="Clear Query History" onclick="clearQueryLog()" />
    </form>
    <table>
    <tr style='background-color:ThreeDDarkShadow;color:white'><th>Results</th><th>Query History</th></tr>
    <tr><td><div id="result" style="width: 400px; height: 500px;overflow-y: scroll" /></td>
    	   <td><div id="querylog" style='font-family:Courier;font-size:small;height:500px;width:450px;overflow-y:scroll'></div></td></tr>
    </table>


</body>
</html>