I have the following map file
MAP
PROJECTION
"init=epsg:4326"
END # PROJECTION
FONTSET "H:/mapserver/data/fonts/fonts.list"
EXTENT 19 33 30 42
IMAGETYPE "png24"
NAME "airways"
SIZE 1280 1024
WEB
METADATA
"wms_title" "Airways"
"wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe/wfs?"
"wms_enable_request" "*"
"wms_srs" "EPSG:4326"
"wms_format" "image/png"
END
END #WEB
LAYER
NAME "airways"
DATA "H:/mapserver/data/airways.shp"
TYPE LINE
LABELITEM "NAME"
PROJECTION
"init=epsg:4326"
END # PROJECTION
CLASS
NAME "airways"
LABEL
COLOR 255 255 255
TYPE TRUETYPE
FONT Vera
SIZE 7
ANTIALIAS TRUE
POSITION CC
ANGLE AUTO
STYLE
GEOMTRANSFORM 'labelpoly'
COLOR 0 0 0
END # STYLE
END # end of label
STYLE
COLOR 0 0 0
WIDTH 0.25
END # STYLE
END # CLASS
END # LAYER
END # MAP
and I'm using Openlayers 3 with following code
function Initialise() {
var sourceMQ = new ol.source.MapQuest({layer: 'osm'});
var layerMQ = new ol.layer.Tile({source: sourceMQ});
var wmsSource = new ol.source.ImageWMS({
url: 'http://localhost/cgi-bin/mapserv.exe?',
params: {
'SERVICE':'WMS',
'map': 'H:/mapserver/data/airways.map',
'LAYERS': 'airways',
'VERSION':'1.3.0',
'REQUEST':'GetMap',
'FORMAT':"image/png",
'TRANSPARENT':'true',
'CRS':'EPSG:4326',
'STYLES':'',
'WIDTH':'1920',
'HEIGHT':'1200',
'BBOX':'19, 34, 29, 42'
},
serverType: 'mapserver'
});
var wmsLayer = new ol.layer.Image({
source: wmsSource
});
var view = new ol.View({
projection: 'EPSG:4326',
center: [23.48, 37.55],
zoom: 7
});
var map = new ol.Map({
target: 'map',
layers: [layerMQ, wmsLayer],
view: view,
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: 'nautical'})
])
});
map.on('pointermove', getCoordinates);
}
function getCoordinates(evt) {
var out = ol.coordinate.toStringHDMS(evt.coordinate);
$('#coordinates').text(out);
}
The html code is
<h1>Open layers test</h1>
<hr>
<div id="map" class="map"></div>
<div id="coordinates"></div>
The css file that I use is
.map
{
height: 800px;
width: 1300px;
border: red thin solid;
}
#coordinates {
width: 100%;
height: 25px;
}
The request send to mapserver captured from Chrome developers tools is the following
http://localhost/cgi-bin/mapserv.exe?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&map=H:/mapserver/data/airways.map&LAYERS=airways&CRS=EPSG:4326&STYLES&WIDTH=1950&HEIGHT=1200&BBOX=29.970703125,14.23828125,43.154296875,35.66162109375
The image size that is requested is 1950 by 1200 but the div that the map lies in is 1300 by 800. If the div width is increased then the requested image width exceeds 2048 which is the maximum image dimension for mapserver. Also WIDTH and HEIGHT that are set in params in javascript are ignored.
So my question is how openlayers create the width and height request that is send to mapserver and how can I make openlayers send a request regarding width and height in correct limits.