I have a simple mapserver test page which shows information from shapefiles (cities, rivers, lakes, points of interest) etc. The result is a static PNG image. I want to add a simple interface so users would not have to modify the URL manually.
Options that I want to provide:
- zoom in;
- zoom out;
- reset the map (back to default view with no zoom);
- center map;
- legend;
- scalebar;
- reference map;
- show information about an object user clicked.
I know that map properties can be changed via URL but I am not sure about the way to do it. What I'm thinking is adding buttons in the template file and using javascript onClick events. When buttons are clicked, JavaScript redirects happen and additional parameters and parameter values are assigned to the URL.
I have read http://mapserver.org/cgi/ and this is what I have come up with.
In the example given below, button "Change map size" succesfully changes map dimensions to 800 by 400. I know that a full page reload happens, that is ok with me.
Is this the intended way of providing a simple GUI to a mapserver page? I want to stick to mapserver CGI, and not use PHP/Python mapserver API.
template.html:
<!-- MapServer Template -->
<html>
<head>
<title>Mapserver Template HTML Document</title>
<script type="text/javascript">
function zoomIn()
{
console.log('zoomIn call');
}
function zoomOut()
{
console.log('zoomOut call');
}
function reset()
{
console.log('reset call');
window.location.assign("http://localhost:1025/cgi-bin/mapserv.exe?map=C:/MS4W/ms4w/apps/gis/mapfile.map")
}
function switchRegionVisibility()
{
console.log('switchRegionVisibility call');
window.location.assign("http://localhost:1025/cgi-bin/mapserv.exe?map=C:/MS4W/ms4w/apps/gis/mapfile.map")
}
function changeMapSize()
{
console.log('changeMapSize call');
window.location.assign("http://localhost:1025/cgi-bin/mapserv.exe?map=C:/MS4W/ms4w/apps/gis/mapfile.map&map_size=800+400")
}
</script>
</head>
<body bgcolor=#AAAAAA>
<h2>Template</h2>
<img src="[img]" border=1>
<hr>
<input type="button" onclick="zoomIn()" value="+" id="zoomIn" />
<input type="button" onclick="zoomOut()" value="-" id="zoomOut" />
<input type="button" onclick="reset()" value="Reset" id="reset" />
<input type="button" onclick="switchRegionVisibility()" value="Disable regions" id="switchRegionVisibility" />
<input type="button" onclick="changeMapSize()" value="Change map size" id="changeMapSize" />
</body>
</html>
Best Answer
After a lot of trials and errors, I have come up with solution which has this functionality:
I also wanted to show information about an object user clicked. But that can only be achieved with MapServer WMS, but I'm only using MapServer CGI.
Tested on mapserver 6.0.3 (as part of MS4W package) and also 6.4.3 (as part of OSGeo4W package).
Below are contents of mapfile and template files. I tried to cut them down to make them easier to understand.
mapfile.map:
template.html