mapplet mini-HOWTO

This is an basic skeleton of how to setup the UMN mapplet. This accompanies the mapplet.readme file. This will enable the applet on any valid JPEG or GIF image. The possibilities are endless.

The main and authoritative mapplet HOWTO is at: http://mapserver.gis.umn.edu/doc36/mapplet-howto.html. This mini-HOWTO puts forth concepts on extending the mapplet.

The mapOver functionality in the applet was something I added in the Java source code to enable mouse x and y position as the user hovers the mouseover the image.

 X Hover
 Y Hover
    bbox vals
    point vals

JavaScript

Here's what you need to add to your JavaScript:

<SCRIPT LANGUAGE="JavaScript">
<!--
function mapOver(x,y) {
  // geographic coordinate translation goes here
  document.mapserv.mapOverX.value = x;
  document.mapserv.mapOverY.value = y;
  // option to window status bar output
  window.status = "x: " + x + " y: " + y;
}

function mapplet_apply(name, minx, miny, maxx, maxy, redraw) {
  document.mapserv.imgbox.value = minx + " " + miny + " " + maxx + " " + maxy;
  document.mapserv.imgxy.value = minx + " " + miny;
}

function mapplet_error(message) {
  alert(message);
}

//-->
</SCRIPT>

Form Values

Here's what you need to add to your form:

<FORM NAME="mapserv" ACTION="this.submit()">

<APPLET CODEBASE="/gis/mapserv/mapplet" CODE="mapplet.class" WIDTH="[mapwidth]" HEIGHT="[mapheight]" NAME="mapplet" MAYSCRIPT>
  <PARAM NAME="image"  VALUE="http://[host]/gis/mapserv/mapplet/19980721.jpg">
  <PARAM NAME="jitter" VALUE="1">
  <PARAM NAME="color"  VALUE="red">
  <PARAM NAME="thickness" VALUE="2">
</APPLET>

<INPUT TYPE="text" NAME="mapOverX">
<INPUT TYPE="text" NAME="mapOverY">
<INPUT TYPE="text" NAME="imgbox" VALUE="149.5 125.5">
<INPUT TYPE="text" NAME="imgxy" VALUE="-1 -1 -1 -1">

</FORM>

Enhancements / Layering

Simple layering of imagery can be acheived through Cascading Style Sheets (example here). However, working this into a Java Applet is difficult because the background of the applet assumes the native OS's colour, and cannot be made transparent. I used this approach in integrating OGC style layer request. This assumes that subsequent layers are transparent.

Adding some hooks to the Java applet can achieve this functionality. One can build an image request string, send it through the tag of the applet, which then writes the layer to the output image.

For example, adding to the existing applet in HTML, in a MapServer app:

<PARAM NAME="OGC_URL" VALUE="http://[host]/cgi-bin/mapserv/remoteGetMap.cgi?OGC_URL=http://clearinghouse1.fgdc.gov/scripts/ogc/ms.pl?WMTVER=1.0.0&STYLES=BLACK&REQUEST=map&LAYERS=coastline,elevation,roads,lakes,rivers,boundary,cities&BBOX=[minx],[miny],[maxx],[maxy]&WIDTH=[mapwidth]&HEIGHT=[mapheight]&FORMAT=GIF&SRS=EPSG:4326">

Note that this URL is a CGI script on the localhost, which fetches a URL from the FGDC clearinghouse. Applets cannot make network connections except to the host that they came from, so this is a small workaround to fetch the URL value from a service that can make network connections, such as LWP. This is transparent to the end user. A simple CGI script below does the trick:

#!/usr/bin/perl -w

# remoteGetMap.cgi

use strict;
use LWP::Simple;

my $image = $ENV{'QUERY_STRING'};

my @tmp = split /OGC_URL=/, $image;

my $content = get($tmp[1]);

print "Content-type:image/gif\n\n";

print "$content";

exit 0;

Then rendering this value through Java:

// in init()
s = getParameter("OGC_URL");
if (s.equals("no_layer") == false) {
  try {
    OGCurl = new URL(s);
  } catch(MalformedURLException e) {
      window.eval("mapplet_error('Applet error. Malformed image URL.');");
      this.stop();
    }
  OGCimg = getImage(OGCurl);
}

// in paint()
// function draw the image as background before the main image
if (OGCimg != null) {
  offScreenGraphics.drawImage(OGCimg,0,0,this);
}

To turn off this functionality, simply set the OGC_Layer param tag value to no_layer; the applet then ignores this input and processes as usual.

Here's the source code for the above example

StringTokenizer

One can integrate multiple OGC style layers in this fashion by passing multiple URL requests through this tag. Assuming a common delimiter in the OGC_Layer string, using Java's StringTokenizer class, one can split the tring into a loop and process accordingly within the applet.

Here's a code snippet assuming a delimiter of "DELIMITER" in the OGC_Layer param tag:

String delimiter = "DELIMITER";

StringTokenizer st = new StringTokenizer(OGCurl, delimiter);
while (st.hasMoreTokens()) {
// process accordingly
}

Infact, the delimiter can be added as an applet param to give the thin client more control with specifying delimiters as per their specifications and/or requirements.

Examples can be seen in the Working Demos area of this website.

Web Mapping / Spatial Data Warehousing Home