JavaScript and frames. JS-GIS is a JavaScript library; thus, it can only work in JS-enabled browsers. Frame support is also required for implementing a standard JS-GIS user interface. However, the JS-GIS data model could be also supported using static HTML without JS, although this would lead to a certain loss of functionalities. A frameless user interface could also be implemented. This will be a topic for the implementation of a future failsafe, lightweight, portable and more accessible JS-GIS interface.
Mantaining a status. Status persistence is needed since we want to allow the user to navigate through the maps in a seamless way, moving into geographic space as well into information space. Using frames and loading the JS-GIS API in the main frameset is one way to achieve a persistent status during a browsing session. The other way is saving the session in a cookie each time an update of the user interface is needed.
Using <DIV> for positioning images. DIV, along with style sheets, allows for absolute positioning of objects on the web page. Thus, it has been chosen as the standard way of drawing JS-GIS object on the web page.
Reloading pages to update user interface. Due to compatibility issues, no use of dynamic HTML (in the sense of changing a page's content on the fly) has been made; thus, reloading pages is the only way one can update the JS-GIS user interface.
Using toString() method. Every drawable JS-GIS object has a reimplemented toString() method which can be used to render the object on the page. Thus, once created, objects can be placed on the page with instructions like
document.write(parent.Map)
as the .toString() call is implied when the object has to be rendered as text.
As stated before, JS-GIS user interface is made of HTML pages; the JS-GIS file structure has been designed to be self-contained, allowing to embed the map navigation page into a dedicated frame of existing web pages. The publication can be viewed opening a single html file, which defines the main window.
The main window is a frameset, and includes all the JS-GIS API files, as well as the project and map object definitions written by the publishing program. It may contain the following frames:
as well as the following JavaScript files:
Each of these frames contains the corresponding HTML page which implements some functionality, like showing a map or the current position.
The map frame always contains the same file, conventionally mappage.htm, which shows the map to the user. This file is reloaded every time there's a need of updating the map. The file's body is usually very simple, simply writing Map and MapCursors object definitions on the page:
<body class="mappage"> <script LANGUAGE="JavaScript"> <!-- document.write(parent.Map.toString()) if (parent.MapCursors) document.write(parent.MapCursors.toString()) // --> </script> </body>
See the TProjectMap object reference for further detail.
The toolbar is a page containing map controls, i.e. forms or hypertext links which trigger JavaScript functions for changing the status of the Map page.
This is a very simple implementation, and makes use of the jsgis_mapctrls.js standard library:
<head>
<script language="javascript" src="jsgis_mapctrls.js"></script>
<link rel="StyleSheet" type="text/css" href="wsm.css">
</head>
<body class="toolbar">
<form>
<script language="javascript">
<!--
document.write('<span class="mc-caption">')
document.write(' <b>Zoom</b> ' + ctrlZoom())
document.write(' | <b>Theme</b> ' + ctrlTheme())
document.write(' | <b>Tool</b> ' + ctrlTool('Zoom +', 'Zoom -'))
document.write(parent.Project.name)
document.write('</span>')
//-->
</script>
</form>
</body>
You can fully customize the behaviour of the toolbar. Basically, you need to provide the following functionalities:
you can also add more controls, for example:
The script in the toolbar page should read the Map object status and draw its controls accordingly, i.e. disable the zoom + button if the Map current zoom level is already at the maximum zoom level, and so on.
Like the map frame, it contains a simple page where the Locator object is drawn:
document.write(parent.Locator.toString()
The locator is linked to its map object, so you just need to reload this frame when some changes occur to the Map. This is automatically done where no event handlers are defined for the Map object.
See the TLocatorMap object reference for details.
This is a general-purpose frame, in which is possible to load HTML pages on response of user query on the map. It may also show the map legend when the current map theme changes.
This frame may or may not be present: how to show map-linked information is a publication-specific issue.
As stated before, JS-GIS needs the following features in order to run properly:
JS-GIS 2.0 has been tested succesfully on the following browsers:
JS-GIS 2.0 doesn't actually work on the following browsers:
JS-GIS © 2001, 2002 by Luca S. Percich (mailto:luca.percich@reacoop.it)
Last updated: dec 26, 2002