Openlayers webapps
From DreamsteepWiki
SAMPLE DATA TO GET RUNNING WITH
SAMPLE URL
http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/foobar/htdocs/foo.map&layer=states&mode=map
SIMPLE MAPFILE
MAP
IMAGETYPE PNG24
EXTENT -97.238976 41.619778 -82.122902 49.38562
SIZE 400 300
SHAPEPATH "../data"
IMAGECOLOR 22 2 22
LAYER
NAME states
DATA "states_ugl"
STATUS ON
TYPE POLYGON
OPACITY 50
CLASS
NAME 'defualt'
STYLE
COLOR 255 0 0
OUTLINECOLOR 0 255 255
WIDTH 220
END
END
END
END
SIMPLE OPENLAYERS HTML FILE
MAPSERVER LAYER IN OPENLAYERS
<pre>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MapServer Layer</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.MapServer( "local", "http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/foobar/htdocs/foo.map", {layers: 'states'}, {gutter: 15});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
}
</script>
</head>
<body onload="init()">
<div id="title">MapServer Layer</div>
<div id="tags"></div>
<div id="shortdesc">Shows MapServer Layer</div>
<div id="map" class="smallmap"></div>
</body>
</html>
CODE TO DETECT BROWSER TYPE AND RESPOND ACCORDINGLY
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Metroplanning Fantastic Maplication </title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var browserCode = OpenLayers.Util.getBrowserName();
switch (browserCode) {
case "opera":
browserName = "Opera";
break;
case "msie":
browserName = "Internet Explorer";
break;
case "safari":
browserName = "Safari";
break;
case "firefox":
browserName = "FireFox";
break;
case "mozilla":
browserName = "Mozilla";
break;
default:
browserName = "detection error"
break;
}
//##########################################//
if (browserName!="Internet Explorer" && browserName!="FireFox" && browserName != "Safari")
{
alert("Warning : Must be viewed in Chrome, Firefox ,or Internet Explorer")
}
//##########################################//
if ( browserName=="FireFox")
{
window.open('http://127.0.0.1/open/examples/jasper_open/run_firefox.html');
window.close('http://127.0.0.1/open/examples/jasper_open/app_start.html')
}
//######//
if (browserName=="Safari" )
{
window.open('http://127.0.0.1/open/examples/jasper_open/run_chrome.html');
window.close('http://127.0.0.1/open/examples/jasper_open/app_start.html')
}
//######//
if (browserName=="Internet Explorer")
{
window.open('http://127.0.0.1/open/examples/jasper_open/run_microsoft.html');
window.close('http://127.0.0.1/open/examples/jasper_open/app_start.html')
}
//##########################################//
</script>
</head>
<body >
<p>
Detecting browser type...
</p>
<p>
This page will launch the mapplication
</p>
<p>
Be sure to disable popup blockers for this site.
</p>
</body>
</html>
QUERY DATA EXAMPLE FROM WMS
MAP WITH WMS QUERY
MAP
NAME mytestmap
IMAGETYPE PNG24
EXTENT -94.036389 30.888094 -93.937035 30.927913
SIZE 400 300
SHAPEPATH "../data/projected"
IMAGECOLOR 100 132 122
#FONTSET
PROJECTION
"init=epsg:4326"
END
WEB
#HEADER
#FOOTER
#TEMPLATE
IMAGEPATH "/ms4w/apps/jasper/htdocs/tmp"
IMAGEURL "/tmp/"
END
LAYER
NAME plats
DATA "plats_subdiv"
STATUS ON
TYPE POLYGON
OPACITY 100
TOLERANCE 5
#HEADER "/ms4w/apps/jasper/htdocs/jasper_header.html"
#FOOTER "/ms4w/apps/jasper/htdocs/jasper_footer.html"
TEMPLATE "/ms4w/apps/jasper/htdocs/content_template.html"
METADATA
"wms_title" "alltest debug "
"wms_srs" "EPSG:4326"
"ows_include_items" "all"
"wms_feature_info_mime_type" "text/html"
"queryable" "true"
#"wms_featureinfoformat" "text/html"
#"searchfield" "DO"
#"fields" "DO:DO"
END #metadata
CLASS
NAME 'defualt'
STYLE
COLOR 20 200 0
OUTLINECOLOR 255 0 0
WIDTH 220
END
END
END
END
QUERY A SHAPEFILE VIA LOCAL WMS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SelectFeature Control on multiple vector layers</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script src="../lib/WMSGetFeatrueInfo.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
//////////////////////////////////////////////
///default ol wms
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
map.addLayers( [ol_wms]);
///local vector layer
layer2 = new OpenLayers.Layer.MapServer( "localnonwms", "http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/jasper/htdocs/jasper.map", {layers: 'plats'}, {gutter: 15});
map.addLayer(layer2);
///local jasper wms (this is the query data)
layerwms = new OpenLayers.Layer.WMS('jasper', "http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/jasper/htdocs/jasper_wms.map", {layers: 'plats'}
//{transparent: true, format: 'image/png'},
//{isBaseLayer: false, singleTile: true}
);
map.addLayer(layerwms);
//////////////////////////////////////////////
///setup click callback
map.events.register('click', map, function (e)
{
findLayerClick(e)
});
//////////////////////////////////////////////
//Build a URL string to make a query to mapserver
function findLayerClick(event) {
mouseLoc = map.getLonLatFromPixel(event.xy);
//this builds a query to send to mapserver via url
var url = layerwms.getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml", //# /
STYLES: "",
BBOX: map.getExtent().toBBOX(),
X: event.xy.x,
Y: event.xy.y,
//INFO_FORMAT: 'text/plain',
QUERY_LAYERS: 'plats',
FEATURE_COUNT: 1,
WIDTH: map.size.w,
HEIGHT: map.size.h}
);
// alert(url) //this is the actual query string
OpenLayers.loadURL(url, '', this, show_popup ); //show_popup //OR// show_browser
Event.stop(event);
}
////////////////////
function show_browser(response) {
alert(response.responseText);
}
////////////////////
//create a popup from response
function show_popup (response) {
var popup_info = response.responseText
//var doce = response.responseXML.documentElement;
// var PCode = doce.getElementsByTagName('PCode')[0].firstChild.data;
// var SCode = doce.getElementsByTagName('SCode')[0].firstChild.data;
// popup_info = "<font size=2><b>Project: </b>" + PCode +
// "<br>System Code: " + SCode + "</font>";
//if (popup != null) {
// popup.destroy();
// popup = null;
// }
//popup.setBackgroundColor("#bcd2ee");
// popup.setOpacity(.7);
popup = new OpenLayers.Popup.AnchoredBubble("mypopup",
mouseLoc,
new OpenLayers.Size(250,120),
popup_info,
null,
true);
map.addPopup(popup);
popup.events.register("click", map, popupDestroy);
}
////////////////////
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
////////////////////
// map.zoomToMaxExtent();
bounds = new OpenLayers.Bounds( -94.036389, 30.888094 ,-93.937035, 30.927913 );
map.zoomToExtent(bounds);
}
</script>
</head>
<body onload="init()">
<h1 id="title">this sucks</h1>
<p id="shortdesc">
</p>
<div id="map" class="smallmap"></div>
<div id="status"></div>
<br >
<textarea rows="10" columns="100" id="text">code some nodes ...</textarea>
<br />
</body>
</html>
EXAMPLE WITH BUTTONS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Event Handling</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#panel {
margin: 5px;
height: 30px;
width: 200px;
}
#panel div {
float: left;
margin-left: 5px;
width: 25px;
height: 25px;
border: 1px solid gray;
}
#output {
position: absolute;
left: 550px;
top: 40px;
width: 350px;
height: 400px;
}
div.blueItemInactive {
background-color: #aac;
}
div.blueItemActive {
background-color: #33c;
}
div.orangeItemInactive {
background-color: #ca6;
}
div.orangeItemActive {
background-color: #ea0;
}
div.greenItemInactive {
background-color: #aca;
}
div.greenItemActive {
background-color: #3c3;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script src="jasper_testapp.js" </script>
</head>
<body onload="init()">
<h1 id="title">BETA Jasper Map</h1>
<div id="tags">
</div>
<p id="shortdesc">
<p>
Blue button changes zoom
</p>
<p>
Green button clears log and sets view to jasper
</p>
<p>
Orange button clears log
</p>
</p>
<div id="map" class="smallmap"></div>
<div id="panel"></div>
<textarea id="output"></textarea>
<div id="docs"></div>
</body>
</html>
JAVASCRIPT FOR ABOVE HTML
var map, panel , map2;
////////////////////////////// //////////////////////////////
function init(){
// define custom map event listeners
function mapEvent(event) {
log(event.type);
}
function mapBaseLayerChanged(event) {
log(event.type + " " + event.layer.name);
}
function mapLayerChanged(event) {
log(event.type + " " + event.layer.name + " " + event.property);
}
//////////////////////////////
map = new OpenLayers.Map('map');
// 'map',{ eventListeners: {
// "moveend": mapEvent,
// "zoomend": mapEvent,
// "changelayer": mapLayerChanged,
// "changebaselayer": mapBaseLayerChanged
// } });
//////////////////////////////
//////////////////////////////
///local vector layer
layer2 = new OpenLayers.Layer.MapServer( "localnonwms", "http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/jasper/htdocs/jasper.map", {layers: 'plats'}, {gutter: 15});
map.addLayer(layer2);
///local jasper wms (this is the query data)
layerwms = new OpenLayers.Layer.WMS('jasper', "http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/jasper/htdocs/jasper_wms.map", {layers: 'plats'}
);
map.addLayer(layerwms);
//////////////////////////////
//////////////////////////////
panel = new OpenLayers.Control.Panel(
{div: document.getElementById("panel")}
);
// define custom event listeners
function toolActivate(event) {
keithtest(event);
log("activate " + event.object.displayClass);
}
function toolDeactivate(event) {
log("deactivate " + event.object.displayClass);
}
// Multiple objects can share listeners with the same scope
var toolListeners = {
"activate": toolActivate,
"deactivate": toolDeactivate
};
var blue = new OpenLayers.Control({
type: OpenLayers.Control.TYPE_TOGGLE,
eventListeners: toolListeners,
displayClass: "blue"
//twat: "itchey"
});
var orange = new OpenLayers.Control({
type: OpenLayers.Control.TYPE_TOGGLE,
eventListeners: toolListeners,
displayClass: "orange"
});
var green = new OpenLayers.Control({
type: OpenLayers.Control.TYPE_TOGGLE,
eventListeners: toolListeners,
displayClass: "green"
});
///////////////////////////
// add buttons to a panel
panel.addControls([blue, orange, green]);
map.addControl(panel);
///////////////////////////
///
var vmap = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
///
var landsat = new OpenLayers.Layer.WMS(
"NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}
);
///
map.addLayers([vmap, landsat]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.zoomToMaxExtent();
bounds = new OpenLayers.Bounds( -94.036389, 30.888094 ,-93.937035, 30.927913 );
map.zoomToExtent(bounds);
///////////////////////////
///////////////////////////
///setup click callback
map.events.register('click', map, function (e)
{
findLayerClick(e)
});
//////////////////////////////////////////////
//Build a URL string to make a query to mapserver
function findLayerClick(event) {
mouseLoc = map.getLonLatFromPixel(event.xy);
//this builds a query to send to mapserver via url
var url = layerwms.getFullRequestString({
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml", //# /
STYLES: "",
BBOX: map.getExtent().toBBOX(),
X: event.xy.x,
Y: event.xy.y,
//INFO_FORMAT: 'text/plain',
QUERY_LAYERS: 'plats',
FEATURE_COUNT: 1,
WIDTH: map.size.w,
HEIGHT: map.size.h}
);
//alert(url) //this is the actual query string
OpenLayers.loadURL(url, '', this, show_log ); // show_log //show_popup //OR// show_browser
Event.stop(event);
}
////////////////////
function show_browser(response) {
alert(response.responseText);
}
////////////////////
function show_log(response){
write("output",response.responseText)
}
//create a popup from response
function show_popup (response) {
var popup_info = response.responseText
popup = new OpenLayers.Popup.AnchoredBubble("mypopup",
mouseLoc,
new OpenLayers.Size(250,120),
popup_info,
null,
true);
map.addPopup(popup);
//popup.events.register("click", map, popupDestroy);
}
//alert(read("output"))
}//END OF INTI
///////////////////////////
///////////////////////////
//read text from an html window
function read(TAGNAME) {
textstr = document.getElementById(TAGNAME).value;
return textstr
}
///
//read text from an html window
function write(TAGNAME,TEXT) {
document.getElementById(TAGNAME).innerHTML = TEXT ;
}
///
function clear_log(){
write("output","");
}
//###############################///
//RAN ON BUTTON ACTIVATION , SORTS OUT TYPE OF CONTROL
function keithtest (eventx){
//
if (eventx.object.displayClass =="green")
{
bounds = new OpenLayers.Bounds( -94.036389, 30.888094 ,-93.937035, 30.927913 );
map.zoomToExtent(bounds);
clear_log();
}
//
if (eventx.object.displayClass =="orange")
{
// bounds = new OpenLayers.Bounds( -94.036389, 30.888094 ,-93.937035, 30.927913 );
// map.zoomToExtent(bounds);
clear_log();
}
//
if (eventx.object.displayClass =="blue")
{
bounds = new OpenLayers.Bounds( -92.036389, 28.888094 ,-93.937035, 30.927913 );
map.zoomToExtent(bounds);
}
}
///////////////////////////
function log(msg) {
document.getElementById("output").innerHTML += msg + "\n";
}
