-
Notifications
You must be signed in to change notification settings - Fork 3
/
postgis_viewer.htm
76 lines (71 loc) · 3.2 KB
/
postgis_viewer.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>