I am creating a web page with Leaflet to access a WMS server.
The issue I have is that I access a paying WMS server that is "counting" the number of requests I make.
In the first attempt I made, since the default tileSize was 256px each of my requests generated 16 tiles requests and so I was "deducted" 16 requests on my account.
I then tried to modify my code as follow :
var wmsserver = L.tileLayer.wms('http://wmsserver/wms?', {
layers: 'mix:precip_24h:mm' ,
format: 'image/png',
tileSize: window.screen.width,
version: '1.3.0',
transparent: true,
});
Now I still have 2 requests logged, and the result on the screen is a little bit shifted.
There must be a cleaner way to do this.
Related
I am trying to add to my leaflet map a layer with current weather. For that I am using this leaflet plugin https://github.com/buche/leaflet-openweathermap that is using this call:
https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={API key}
The free version of OWM is offering 60 calls per minute, the problem is that every time that I zoom or drag the map 12 petitions to the API are being requested. I thought the free version with the 60c/m should be more than enough for my app, but as soon I zoom few times the API key gets blocked. Is there a better way to work around this?
The more tiles your map requests, the sooner you reach the limit. In order to reduce the amount of tiles requested (with a cost to user experience), consider limiting zoom/drag options.
// change options according to your needs
let mapOptions = {
zoomControl: false,
scrollWheelZoom: false,
boxZoom: false,
dragging: false
}
let map = L.map('map', mapOptions);
I am currently working on a GIS holding a large amount of layers (up to 20 / 30).
The map is rendering tiles in a really slow way.
It was previously written with OpenLayers 2.x, and we didn't face this performance bottleneck.
Our layers are using WMS sources & tiles, which are declared as follow
function createTileLayer(options){
let source = new ol.source.TileWMS({
url: serverURL, // Our GeoServer instance
params: {
'LAYERS': options.id
'BGCOLOR': options.backgroundColor,
'TRANSPARENT': options.transparent,
'VERSION': options.version,
'FORMAT': 'image/png'
},
serverType: 'geoserver',
projection: 'EPSG:2100', // Managed by Proj4J
transition: 0
});
let layerTile = new ol.layer.Tile({
source: source,
visible: options.visible,
});
return layerTile;
}
The map declaration in itself is quite simple:
let map = new ol.Map({
target: document.getElementById('app'),
layers: Layers, // All the layers we created before
view: new ol.View({
center: ol.proj.fromLonLat([5.497853028599662, 34.82203273834541]),
zoom: 18,
projection: 'EPSG:2100'
}),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
renderer: 'canvas'
});
}
Problem with this approach is that the browser seems to spend far too much time in drawing every layer. Here is the profile of some tests on Chrome:
Results are an almost unusable map.
I am aware that the amount of layers is high, but the issue was not in OpenLayers 2.x (or at least, performances were better).
One possible workaround is using only one TileWMS source and pass it the list of all our layers in its 'LAYERS' param. This dramatically improve the speed because GeoServer does all the rendering work, but we lose some possibilities such as managing each layer transparency.
I might be doing something wrong in querying / rendering tiles this way, that I am not aware of. Thanks for any help.
The most likely issue is that you are not hitting the tile boundaries that GeoWebCache (which is what GeoServer) uses to render the tiles. See this page in the manual which lists the criteria that must be met for this to work.
A better way to do this is to use a WMTS request (where the tile grids etc are agreed on between the client and server rather than guessed at). You can even get OpenLayers to do the negotiation for you by asking for the getCapabilities document.
I am using OpenLayers2 with Bing. My customer requires a deeper zoom level to interact with the maps. Currently, the max zoom level I can achieve is 19 which I tested with the getZoom() function. I have tried to set the "numZoomLevels" in the map constructor to a higher number, but Bing/OL just seems to ignore it. I was wondering if there is a way to force the tiles to a lower zoom level or if I could simply magnify the existing tiles so that I can see larger images even if the details are a bit blurry. It is crucial, however, that I don't modify the projection because having correct lat/lon values is paramount to the customer's function.
map = new OpenLayers.Map('map', {
allOverlays: false,
numZoomLevels: 20,
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Zoom({
zoomInId: "customZoomIn",
zoomOutId: "customZoomOut"
})
]});
var aerial = new OpenLayers.Layer.Bing({
name: "Aerial",
key: apiKey,
type: "Aerial"
});
I did stumble across an OL3 magnify example, but it is written for OL3 and a bit beyond what I can convert since I need the magnify option to be embedded as a zoom level, not just a context overlay. Also, I don't have a ton of experience with canvas. Any help is appreciated!
I figured it out, and it's actually quite simple. First, the numZoomLevels should have been on the layer level, not the map level. If you want to be able to zoom in beyond what Bing provides you, you must set fractionalZoom to true as shown below:
map = new OpenLayers.Map('map', {
allOverlays: false,
fractionalZoom: true,
controls: [
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Zoom({
zoomInId: "customZoomIn",
zoomOutId: "customZoomOut"
})
]});
Then, on each layer, you need to set an array of resolutions. You will need to create a value for each zoom level you list under your numZoomLevels. I needed 22 zoom levels.
var aerial = new OpenLayers.Layer.Bing({
name: "Aerial",
key: apiKey,
type: "Aerial",
numZoomLevels: 22,
resolutions: bingResolutions,
serverResolutions: bingServerResolutions,
transitionEffect: 'resize'
});
In the source code for OpenLayers.Layer.Bing already had a resolution block defined which maps to their values at: https://msdn.microsoft.com/en-us/library/aa940990.aspx
var bingResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135, 0.29858214169740677, 0.14929107084870338,
0.07464553542435169];
var bingServerResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135];
The server resolutions are the tile resolutions from Bing itself. The additional resolutions (0.29858214169740677, 0.14929107084870338, 0.07464553542435169) are my fractional zoom levels that just zoom in on the layer 19 tile.
Here is the working example from OpenLayers for an OSM layer.
Hope this helps someone else!
I'm trying to fetch weather radar data for the UK, from a WMST server.
The client can get the Capabilities fine. After that, the browser (Chrome and Firefox) crashes after a while, with an out-of-memory error.
The only thing obviously different in my case, in comparison with simple examples, is that an API key is needed for all interactions with the server.
var parser = new ol.format.WMTSCapabilities();
var map;
//I pass the API key here
fetch('http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?REQUEST=GetCapabilities&key=my_key_goes_here').then(function(response) {
return response.text();
}).then(function(text) {
console.log('Capabilities found.'); //ok
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'RADAR_UK_Composite_Highres',
matrixSet: 'EPSG:4326'
});
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.7
}),
new ol.layer.Tile({ //fails when this Tile is included
opacity: 1,
source: new ol.source.WMTS(options),
//I set this, figuring that the API key is still needed
url: 'http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?my_key_goes_here'
})
],
target: 'mymap',
view: new ol.View({
center: ol.proj.fromLonLat([0, 52.0]), //near London, UK
zoom: 7
})
});
});
The crash happens without the client trying to fetch the tiles (because I can't see any HTTP requests in the debugger; the last one is the get-capabilities request).
Any hints as to what might be causing this?
First of all, note that ol.layer.Tile does not have an url option. Ideally, the GetCapabilities response would advertise a service url that has the key already. Since the server you are trying to access does not have that, you'll have to tweak the result you get from the GetCapabilities response:
result.OperationsMetadata.GetTile.DCP.HTTP.Get[0].href += 'key=my_key_goes_here&'
The second and more severe problem is that the GetCapabilities response advertises incorrect scale denominators and origins. To fix those, you have to tweak the result again:
result.Contents.TileMatrixSet[0].TileMatrix.forEach(function(m) {
m.ScaleDenominator *= 111319.49079327358;
m.TopLeftCorner = m.TopLeftCorner.reverse();
});
After applying these tweaks, you can pass the result to ol.source.WMTS.optionsFromCapabilities, and you will get a correct map.
I'd strongly recommend you contact the service provider (contact information can also be found in the GetCapabilities response) and let them know about the problems with their GetCapabilities response.
I'm creating a little web page containing a map using the Google Maps API and the OpenLayers JS library (v2.13). The base layer of the map is Google Street Maps, and that works fine, I can pan around the map, zoom in etc.
I'm adding a number of layers to the map, which come from a Web Mapping Service hosted on a remote server that I don't own or have access to (the code, I mean). And that works fine too, the layers overlay onto the Google Map just fine.
The problem is when I click on the layer features on the map, the WMSGetFeatureInfo controls are not working. No request is sent to the specified URL, no callback function is triggered, nothing happens at all. Here's some code:
var remoteGeoServer = "https://www.remotegeoserver.com/geoserver/wms";
var options = {
controls: [],
maxExtent: new OpenLayers.Bounds(420000, 485000, 770000, 985000),
projection: "EPSG:2157",
units: 'm',
scales: [5000000, 2500000, 1250000, 600000, 400000, 200000, 100000, 50000, 25000]
};
var map = new OpenLayers.Map('map-container', options);
// ... define styles, rules etc.
var overlayLayer = new OpenLayers.Layer.WMS("Overlayed Layer", remoteGeoServer, {<some_options>}); // other layers are created too...
var infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: "/geoserver/wms",
title: 'Identify features by clicking',
layers: [overlayedLayer],
infoFormat: 'text/plain',
queryVisible: true
})
};
var baseLayer = new OpenLayers.Layer.Google("Google Streets", {numZoomLevels: 20});
map.addLayers( [baseLayer, overlayLayer] );
map.setBaseLayer( baseLayer );
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}
// ... and later
function showInfo(evt) {
console.log("Hurray!");
}
infoControls.click.activate();
I should explain that, even though the url in the infoControls is called "/geoserver/wms", there is no web mapping server running on my server. I just forward on the GetFeatureInfo request to the remote server that runs the actual geoserver. Otherwise the same-origin policy kicks in and the GetFeatureInfo requests are rejected.
But nothing happens, my "/geoserver/wms" endpoint never gets called. Am I doing something wrong? Also, and this isn't my main question, but why am I able to successfully give OpenLayers the remote server URL when creating the layers (should same-origin policy not apply - the map still works fine though, and the GET image requests to the remote server are successful).
Something else worth noting is that when I replace the local url path in infoControls with the remote server url, clicking the map triggers the same-origin policy error in the debug console.
I found a few different potential solutions for this problem that other people were having but none of them worked for me. In the end, the only thing that did work was this:
The URL used in the layer creation constructor(s) (in OpenLayers.Layer.WMS) MUST be the same as the URL used for the GetFeatureInfo constructor (in OpenLayers.Control.WMSGetFeatureInfo)
Otherwise, the map layers will work but the GetFeatureInfo requests will fail. I don't know if just the domain needs to be the same, or the full URL.
I'm not particularly happy about this. It means that I have to create an endpoint on my server that acts as a proxy and routes GetMap requests to the actual remote geoserver. I didn't need to do this before (why not - same-origin policy ??) and now it drives up latency for the layers showing up in the map (not to mention my server gets hammered with GetMap requests).
This seems to be an issue with OpenLayers (but I'm not sure of that). I'd be very interested in hearing about a solution if anyone knows of one.