<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ENC Charts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body
{
margin: 0;
}
#map
{
width: 100%;
height: 100%;
}
</style>
<script src="openlayers/OpenLayers.js"></script>
<script type="text/javascript" language="javascript">
var map, popup, measureControls, measurePopup;
var openTableHtml = '<table class="popupTable">';
var openTableRowHtml = '<tr>';
var openTableCellHtml = '<td>';
var closeTableCellHtml = '</td>';
var closeTableRowHtml = '</tr>';
var closeTableHtml = '</table>';
function init()
{
function updateLatLonEvent(event)
{
if (popup != null)
{
var mapExtent = map.getExtent();
document.getElementById('txtWidth').value = map.getSize().w;
document.getElementById('txtHeight').value = map.getSize().h;
document.getElementById('txtMinX').value = mapExtent.left;
document.getElementById('txtMaxX').value = mapExtent.right;
document.getElementById('txtMinY').value = mapExtent.bottom;
document.getElementById('txtMaxY').value = mapExtent.top;
var widthPixel = map.getSize().w - 280;
var heightPixel = map.getSize().h - 300;
popup.moveTo(new OpenLayers.Pixel(widthPixel, heightPixel));
}
}
var options = {
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
handlerOptions: {
style: "default", // this forces default render intent
persist: true
}
};
//map = new OpenLayers.Map('map', options);
map = new OpenLayers.Map('map', {
eventListeners: {
"moveend": updateLatLonEvent
}
}, options);
var enc_wms = new OpenLayers.Layer.WMS("erwer wer",
"http://localhost:1530/WMS/wms.ashx",
{ layers: 'ENC' },
{ singleTile: true, isBaseLayer: false, transitionEffect: 'resize', ratio: 1 });
var world_map = new OpenLayers.Layer.Image(
'World',
'http://localhost:1530/WMS/MapData/Worldcity.jpg',
new OpenLayers.Bounds(-180, -90, 180, 90),
new OpenLayers.Size(1000, 500),
{ isBaseLayer: true, visibility: false }
);
map.addLayers([world_map, enc_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
//ExportImage Button
var exportImageButton = new OpenLayers.Control.Button(
{
title: 'Export Image Options',
trigger: function() { AddPopup(); },
displayClass: "exportImage"
});
//Help Button
var helpButton = new OpenLayers.Control.Button(
{
title: 'Help',
trigger: function() { window.open('http://osdwiki.fugro/?title=Electronic_Navigation_Charts') },
displayClass: "helpControl"
});
customButtonPanel.addControls([generateButton]);
customButtonPanel.addControls([exportImageButton]);
customButtonPanel.addControls([measureToolButton]);
customButtonPanel.addControls([helpButton]);
map.addControl(customButtonPanel);
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
function AddPopup()
{
var mapExtent = map.getExtent();
var widthHtml = '<input id="txtWidth" type="text" class="popupItemWidth" value=' + map.getSize().w + ' /><br />';
var heightHtml = '<input id="txtHeight" type="text" class="popupItemWidth" value=' + map.getSize().h + ' /><br />';
var minXHtml = '<input id="txtMinX" type="text" class="popupItemWidth" value=' + mapExtent.left + ' /><br />';
var maxXHtml = '<input id="txtMaxX" type="text" class="popupItemWidth" value=' + mapExtent.right + ' /><br />';
var minYHtml = '<input id="txtMinY" type="text" class="popupItemWidth" value=' + mapExtent.bottom + ' /><br />';
var maxYHtml = '<input id="txtMaxY" type="text" class="popupItemWidth" value=' + mapExtent.top + ' /><br />';
var dropDownLodHtml = '<select id="selectLevelOfDetail" class="popupItemWidth">' +
'<option selected value="Default">Default</option>' +
'<option value="General">General</option>' +
'<option value="Coastal">Coastal</option>' +
'<option value="Approach">Approach</option>' +
'<option value="Harbour">Harbour</option>' +
'<option value="Berthings">Berthings</option>' +
'</select>';
var layerControlHtml = '<select id="layerS57" class="popupItemWidth">' +
'<option selected value="Default">Default</option>' +
'<option value="OffshoreLandData">Offshore and Land Data</option>' +
'<option value="OffshoreData">Offshore Data</option>' +
'</select>';
var exportHtml = '<br /><input id="ButtonExportImage" type="button" size="10" value="Export Image" onclick=ExportImageOptions(); />';
var popupContentHTML = openTableHtml
+ openTableRowHtml
+ openTableCellHtml + 'Width(Pixels): ' + closeTableCellHtml
+ openTableCellHtml + widthHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Height(Pixels): ' + closeTableCellHtml
+ openTableCellHtml + heightHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Min Longitude: ' + closeTableCellHtml
+ openTableCellHtml + minXHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Min Latitude: ' + closeTableCellHtml
+ openTableCellHtml + minYHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Max Longitude: ' + closeTableCellHtml
+ openTableCellHtml + maxXHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Max Latitude: ' + closeTableCellHtml
+ openTableCellHtml + maxYHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'Level of detail: ' + closeTableCellHtml
+ openTableCellHtml + dropDownLodHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + 'S57 Layer Control: ' + closeTableCellHtml
+ openTableCellHtml + layerControlHtml + closeTableCellHtml
+ closeTableRowHtml
+ openTableRowHtml
+ openTableCellHtml + exportHtml + closeTableCellHtml
+ closeTableRowHtml
+ closeTableHtml;
var center = mapExtent.getCenterLonLat();
if (this.popup == null)
{
this.popup = new OpenLayers.Popup();
this.popup.setBorder("2px solid");
this.popup.setSize(new OpenLayers.Size(270, 270));
this.popup.setContentHTML(popupContentHTML);
this.popup.setOpacity(0.65);
this.popup.addCloseBox();
map.addPopup(this.popup);
this.popup.show();
}
else
{
this.popup.setContentHTML(popupContentHTML);
this.popup.toggle();
}
var widthPixel = map.getSize().w - 280;
var heightPixel = map.getSize().h - 300;
this.popup.moveTo(new OpenLayers.Pixel(widthPixel, heightPixel));
}
</script>
</head>
<body onload="init()" bgcolor="#A1BDC4">
<div id="map">
</div>
</body>
</html>