WMS Javascript Library

A Web Map Server (WMS) will return a static map image if given the required parameters in the URL.
For example, the URL:
http://wms.jpl.nasa.gov/wms.cgi?VERSION=1.1.1&REQUEST=GetMap&LAYERS=BMNG&FORMAT=image/jpeg&bbox=20,10,80,45&height=150&width=200&srs=EPSG:4326&styles=
will return this image
However, this image is static and any change requires typing in a new URL.

The purpose of the WMS Javascript Library wmsmap.js is to facilitate the creation of dynamics maps using freely available WMS servers. For example to create the dynamic equivalent of the image above, include the javascript files, define the Layer object, create a new map object, and associate it with an html DIV element.

// define layer object
var myLayer = {
 URL: 'http://wms.jpl.nasa.gov/wms.cgi?',
 LAYERS: ['BMNG'],  
 FORMAT: 'image/jpeg',   
 BBOX: [20,10,80,45]
};
// create new map object with layer
var myMap = new WMap('map_div',[myLayer]);
 

Where map div is defined in the HTML as:
<div id='map_div' style='width:300px;height:200px></div>

The WMS Javascript Library provides an API to allow the creation of dynamic maps including simple zoom functionality, clickable googlemap-like overlays, and GetFeatureInfo queries by clicking the map (coming soon).
See the examples for details.

This EXACT code will create the pan-able map below
Try it: click and drag to pan the map

All of this is done without any server side scripts (no PHP or Perl) Two more lines of code adds zooming capabilities.

Includes

In addition, this code currently uses the incredibly useful prototype library.
Prototype may be overkill for the implementation in wmsmap.js, but provides a lot of tools for cross-browser web development.

This library also uses dragdrop.js and util.js from the script.aculo.us library, which is overkill and these may be removed if their functionality can be encompassed in a tighter script targetted for the dragging in wmsmap.js

Influences

This code borrows from ideas in:

• ka-Map
• google Maps API

Related Sourceforge Projects :

• msCross WebGIS: Mapserver Javascript AJAX Interface