Download the following source as ArgoGIS_sample-1.html file, and run it on your web browser, FireFox, Chrome, Safari, Edge, etc.
Download the following source as ArgoGIS_sample-1.html file, and run it on your web browser, FireFox, Chrome, Safari, Edge, etc.
View the source codes of above sample application: ArgoGIS_sample-1.html
<!DOCTYPE html>
<html>
<head>
<title>ArgoGIS WMS Sample</title>
<!-- Open Layers are used in this sample -->
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var encWmsUrl = "https://enc.argogis.com/wms/wms_enc";
var userkey = "79139bc5d75c417190d7c84dfb2bc1a6"; // replace with your own user key
var targetEPSG = "EPSG:3857";
var projection = ol.proj.get(targetEPSG);
var preslibcolortable = "DAY"; // 'DAY', 'DUSK', 'NIGHT'
var preslibversion = "4.0"; // '3.2', '3.4', '4.0'
var shallowcontour = 30; // Shallow Depth
var safetycontour = 50; // Safety Depth
var deepcontour = 100; // Deep Detph
var layers = [
// Layer of Open Street Map
new ol.layer.Tile({
source: new ol.source.OSM()
}),
// Layer of ArgoGIS Charts
new ol.layer.Tile({
visible : true,
source: new ol.source.TileWMS({
matrixSet: targetEPSG,
projection: projection,
url: encWmsUrl,
params: {
DRAWOPTION : 8, //0:All, 1:Land Area, 2:Sea, 3:Sea Area, 4:Sounding, 8: All without Land
PRESLIBCOLORTABLE : preslibcolortable,
PRESLIBVERSION : preslibversion,
SHALLOWCONTOUR : shallowcontour,
SAFETYCONTOUR : safetycontour,
DEEPCONTOUR : deepcontour,
USERKEY : userkey
},
serverType: "mapserver"
})
})
];
// Central location: San Francsico
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-122.6335, 37.7696], projection),
zoom: 10
})
});
</script>
</body>
</html>