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.
// 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:
Related Sourceforge Projects :