<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>GetFeatureInfo Popup</title>
<script type="text/javascript" src="http://160.97.12.223:8080/JsLib/OpenLayers-2.11/lib/OpenLayers.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://160.97.12.223:8080/JsLib/proj4js/lib/proj4js-combined.js"></script>
<script type="text/javascript" src="http://160.97.12.223:8080/JsLib/jquery-ui-1.8.17/js/jquery-1.7.1.min.js"></script>
<style>
/**
* CSS Reset
* From Blueprint reset.css
* http://blueprintcss.googlecode.com
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/**
* Basic Typography
*/
body {
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #222;
background: #fff;
margin: 1em 1.5em;
}
pre, code {
margin: 1.5em 0;
white-space: pre;
}
pre, code {
font: 1em 'andale mono', 'lucida console', monospace;
line-height:1.5;
}
a[href] {
color: #436976;
background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
color: #003a6b;
background-color: transparent;
font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
margin: 0;
padding-top: 0.5em;
}
h1 {
font-size: 130%;
margin-bottom: 0.5em;
border-bottom: 1px solid #fcb100;
}
h2 {
font-size: 120%;
margin-bottom: 0.5em;
border-bottom: 1px solid #aaa;
}
h3 {
font-size: 110%;
margin-bottom: 0.5em;
text-decoration: underline;
}
h4 {
font-size: 100%;
font-weight: bold;
}
h5 {
font-size: 100%;
font-weight: bold;
}
h6 {
font-size: 80%;
font-weight: bold;
}
.olControlAttribution {
bottom: 5px;
}
/**
* Map Examples Specific
*/
.smallmap {
width: 512px;
height: 256px;
border: 1px solid #ccc;
}
#tags {
display: none;
}
#docs p {
margin-bottom: 0.5em;
}
/* mobile specific */
@media only screen and (max-width: 600px) {
body {
height : 100%;
margin : 0;
padding : 0;
width : 100%;
}
#map {
background : #7391ad;
width : 100%;
}
#map {
border : 0;
height : 250px;
}
#title {
font-size : 1.3em;
line-height : 2em;
text-indent : 1em;
margin : 0;
padding : 0;
}
#docs {
bottom : 0;
padding : 1em;
}
#shortdesc {
color : #aaa;
font-size : 0.8em;
padding : 1em;
text-align : right;
}
#tags {
display : none;
}
}
@media only screen and (orientation: landscape) and (max-width: 600px) {
#shortdesc {
float: right;
width: 25%;
}
#map {
width: 70%;
}
#docs {
font-size: 12px;
}
}
body {
-webkit-text-size-adjust: none;
}
</style>
<script>
//OpenLayers.ProxyHost = "proxy.cgi?url=";
var map, info;
Proj4js.defs["EPSG:32633"] = "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ";
//extend_bounds = new OpenLayers.Bounds(-180, -90, 180, 90) // epsg 4326
area_extent_bounds = new OpenLayers.Bounds(587960.0,4327456.0,632427.0,4352398.0);
wwidth = window.screen.width;
cwidth = 300;
map_width = wwidth - cwidth - 13;
wheigth = window.screen.height;
$('#map').css('width', map_width+'px')
function getMaxResolution(){
return Math.round(Math.abs((area_extent_bounds.left - area_extent_bounds.right ) / map_width ));
}
proj = new OpenLayers.Projection("EPSG:32633")
function load() {
options = {
controls:[],
projection: proj,
units: "m",
numZoomLevels: 19,
maxResolution: getMaxResolution(),
maxExtent: area_extent_bounds,
}; // fine options
map = new OpenLayers.Map('map', options);
l_frane = new OpenLayers.Layer.WMS(" Frane", "http://160.97.12.223/cgi-bin/mapserv?MAP=/var/www/difsuolo_luci_mapfile/mapfile.map", {'layers': "Frane", 'transparent': "true", 'format': "image/png"});
l_mappa_base = new OpenLayers.Layer.WMS("WMS-Proxy Difsuolo", "http://160.97.12.223:8089/service?", {'layers': "pcn_minambiente_ortofoto_2006_UTM33", format:"image/jpeg", srs:"EPSG:32633"}, {singleTile: true, ratio: 1, transitionEffect: 'resize'}, {isBaseLayer: true} );
map.addLayers([l_frane, l_mappa_base]);
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://lewis/cgi-bin/mapserv?map=/var/www/difsuolo_luci_mapfile/mapfile.map',
title: 'Identify features by clicking',
infoFormat:'text/html',
click: 'true',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true
));
}
}
})
map.addControl(info);
info.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="load()">
<h1 id="title">Feature Info in Popup</h1>
<div id="tags">
WMS, GetFeatureInfo, popup
</div>
<p id="shortdesc">
Demonstrates the WMSGetFeatureInfo control for fetching information
about a position from WMS (via GetFeatureInfo request). Results
are displayed in a popup.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>