I am trying to call an wms using openlayers. I have wrote the code but somehow I think I am missing something here.
My code is :
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<title>OpenLayers WMS</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var projection = new ol.proj.Projection({
code: 'EPSG: 4326',
extent: [-179106.47, 3835054.33, 1457898.22, 4881225.40]
});
// wms
//http://172.61.25.57:8080/geoserver/arcs_charts/wms?service=WMS&version=1.1.0&request=GetMap&layers=arcs_charts%3A1239-0&bbox=-4.0%2C58.28333333333333%2C0.1985833333333341%2C61.41675&width=768&height=573&srs=EPSG%3A4326&format=application/openlayers -->
// source
var layerSource = new ol.source.TileWMS({
url: 'http://172.61.25.57:8080/geoserver/arcs_charts/wms?',
params: {'VERSION': '1.1.0',
'LAYERS': 'arcs_charts:1239-0',
'TILED': true,
'bbox': [-4.0,58.28333333333333,0.1985833333333341,61.41675], // GeoServer bbox or extent in EPGS: 5255 - read from url in GeoServer WMS
'CRS': 'EPSG:4326',
'HEIGHT': 573,
'width':768,
'FORMAT': 'application/openlayers'},
serverType: 'geoserver',
});
// layer
var layerLayer = new ol.layer.Tile({
layer:'nameOfLayer',
visible: false,
preload: Infinity,
source: layerSource
});
// view
var olview = new ol.View({
projection: projection,
center: ol.proj.fromLonLat([37.41, 8.82]),
extent: projection.getExtent(),
zoom: 1.5
})
// map
var map = new ol.Map({
target: 'map',
renderer: 'canvas', // Force the renderer to be used
view: olview,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
layers: [layerLayer],
controls: ol.control.defaults(),
logo: false
});
</script>
</body>
</html>
Thanks for looking over my code. Any suggestions will be great help Thanks in advance!