I'm struggling to get a WMS feed to work, the feed is explained here:
https://software.ecmwf.int/wiki/display/MACSUP/Accessing+public+CAMS+WMS+products
An example URL to retrieve a layer is:
https://apps.ecmwf.int/wms/?token=public&request=GetMap&layers=composition_aod550,grid,foreground&width=600&bbox=-180,-90,180,90
However, I'm not sure how to get the Open Layers 3 WMS API to read this layer in, i'm currently doing:
var layer_to_return = new ol.layer.Tile({
preload: Infinity,
visible: true,
source: new ol.source.TileWMS(({
url: 'https://apps.ecmwf.int/wms/',
params: {'LAYERS': 'composition_aod550', 'token':'public'},
serverType: 'geoserver',
crossOrigin: 'anonymous'
}))
});
map.addLayer(layer_to_return);
Which seems to include most of the URL, except for the 'grid' element and the bounding box. I'm not sure why it won't get rendered in OL3.
I just got this working by tweaking two things:
the HTTPS was giving me a cross-origin problem
then, the tile server was returning unknown projection (the URL request defaults to EPSG:3587)
In case it helps you, for reference, both of those I worked out by: adding your code to an ol3 map; trying to load it; using the browser dev tools to see the URL of the tile requests being generated; opening one of those URLs in a separate tab; reading the error message in the XML returned from the WMS server.
I had a look at the capabilities file on the website you link to, and it seemed to suggest EPSG:4326 would work. So I tried this and it worked:
var layer = new ol.layer.Tile({
preload: Infinity,
visible: true,
source: new ol.source.TileWMS({
url: 'http://apps.ecmwf.int/wms/',
params: {'LAYERS': 'composition_aod550', 'token':'public'},
serverType: 'geoserver',
crossOrigin: 'anonymous',
projection: 'EPSG:4326'
}),
opacity: 0.5
});
Note that I've added an opacity of 0.5. This is so you can overlay it over another map source to see the country boundaries, such as an open street map.
I've put a working example here, with the transparency:
http://www.freytag.org.uk/snippets/cams.html
Related
I have a GeoServer and would like to only provide layers via WMS to a user who has a user account. This is ok to set up on the GeoServer side in that you can enable Basic Authentication and then pass the credentials as part of the URL.
This works fine in Firefox, unfortunately this ability has been removed for many browsers now, as basic authentication is deprecated in the URL.
So setting a URL with:
https://MY_USER_NAME:MY_PASSWORD#www.BLAH.com
No longer works.
So I am left scratching my head as to how to provide credentials on the client side when making an OL3 WMS request. There appears to be a lack of documentation on this.
Typically my WMS calls look like this:
WMS_layer = new ol.layer.Tile({
preload: Infinity,
visible: true,
opacity:0.7,
extent: ol.proj.transformExtent([-1.194, 51.880, -1.111, 51.930], "EPSG:4326", "EPSG:3857"),
source: new ol.source.TileWMS(({
url: 'https://www.my-geoserver.co.uk/geoserver/' + workspace + '/wms',
params: {'LAYERS': workspace + ':' + layer_name, 'TILED': true, 'VERSION': '1.3.0'},
projection: projection,
serverType: 'geoserver',
FORMAT: 'image/jpeg'
}))
});
So, as I can no longer add user name and password to the URL, how can I pass the authentication across. I can use authentication headers as one solution, but how can I send an authentication header via the WMS call within OL3?
I've heard mention that people tend to use a Proxy on the server side to handle the XHR request, I have no idea where to start with this either!
Since we are using the OpenLayers 3 framework to make our calls to...in my case MapServer...
//******* MapServer water Layer ***************
var Water = new ol.layer.Tile({
name: 'Water',
source: new ol.source.TileWMS({
url: mapServerPath.ResponseString + 'MappingWater.map&',
params: { 'LAYERS': 'Water', 'FORMAT': 'image/png', 'TILED': true },
serverType: 'mapserver'
})
});
control.map.addLayer(Water);
How do we make this call CORS enabled so that the canvas does not get tainted?
Thanks in advance for your help!!
Set crossOrigin: 'anonymous' on the source as a config option, and make sure you have CORS headers enabled on your MapServer instance (at the webserver level).
I would like for a "Vumop" layer to appear in
http://www.4dprostor.cz/nesvacily-vumop.html
I tried with the following code (OL9 v3.9.0):
var Vumop = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://geoportal.vumop.cz/wms_vumop/zchbpej.asp',
params: {'LAYERS': 'tro',
'TILED': true}
})
});
The URL is correct, the name of the layer is correct, the CRS is correct. Everything works correctly in QGIS.
Anybody know what's wrong?
The response given when OpenLayers tries to load the tiles is a WMS error, containing:
msWMSLoadGetMapParams(): WMS server error. Invalid CRS given : CRS must be valid for all requested layers. msProcessProjection(): Projection library error. no options found in 'init' file
Changing the CRS from EPSG:3857 to EPSG:4326 returns a tile. Does the WMS server not support EPSG:3857?
I'm trying to rewrite a small outreach application made in OL2 which uses a base layer to show the ocean topography provided by the GEBCO WMS service.
When I do:
var gebco = new ol.layer.Image({
source: new ol.source.TileWMS( ({
url: 'http://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?',
params: {'LAYERS': 'GEBCO_LATEST', 'VERSION':'1.1.1','FORMAT': 'image/png'} }) ),
serverType: 'mapserver'
});
the layer is not added. I have looked through firebug to see
the request and while it seems to be correct the answer is a white tile with the BBOX set by Ol3. If I request directly to the map server with the BBOX [-180,-90,180,90] (or any other geographical extent) the server returns correctly the image. Then if I try to force the LayerWMS with such geographical coordinates in params:{} (i.e ..,'BBOX':'-180,-90,180,90',... ) the layer still does not load.
To show the layer I just do:
mapa = new ol.Map({
target: 'map',
renderer:'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'}),
visible: true
})],
view: new ol.View({
center: ol.proj.transform([-10.0, 41.0],'EPSG:4326', 'EPSG:3857' ),
zoom: 4
})
});
mapa.addLayer(gebco);
I would appreciate any explanation to understand what is happening. In fact, the rest of WMS layers are added correctly, so I presume it could be related with such mapserver, but honestly I'm not very experimented with OL and map servers.
I'm trying to add a layer into an Openlayers 3 map. This one is which I want to insert:
new ol.layer.Image({ name: 'cartografia', style: 'cartografia', visible: true, source: new ol.source.ImageWMS({ url: 'http://www.geo.euskadi.net/arcgis/services/U11_AGS_WMS_Cartografia/MapServer/WMSServer?', params: { 'LAYERS': '1', 'STYLES': 'default' }, serverType: 'geoserver' }) })
When I go to the webpage I can see the XML, but I'm not able to insert the layer
What I'm doing wrong?
I had a look at this WMS and everything seems fine. I did notice however that no error was been thrown if I had my projection set to 3857. This is not supported by this WMS for the layer you mentioned. Make sure that you are using a supported projection for the desired layer on the WMS.
<Name>1</Name>
<Title>Itzalak / Sombras MDT LIDAR 2012 5000</Title>
<Abstract>Itzalak / Sombras MDT LIDAR 2012 5000</Abstract>
<CRS>CRS:84</CRS>
<CRS>EPSG:4326</CRS>
<CRS>EPSG:23030</CRS>
<CRS>EPSG:25830</CRS>
You can see a example of a map uisng 4326. In the link below,
http://openlayers.org/en/v3.1.1/examples/epsg-4326.html
I added the layer using the following code to a map using EPSG: 4326,
var test = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://www.geo.euskadi.net/arcgis/services/U11_AGS_WMS_Cartografia/MapServer/WMSServer',
params: {
'LAYERS': '1'
}
})
})
And I got the following result over Spain.
Another problem is "serverType: 'geoserver'", because the WMS is not hosted by GeoServer, but ESRI ArcGIS Server.
If You leave the serverType undefined and set projection: 'EPSG:4326' in the View Options, Your code will work.