leaflet.wms
leaflet.wms copied to clipboard
heigeo
Separate layer pass options - modified GetLayer() function
I needed an option to add Options to each layer I add with getLayer() funcion. My solution was:
Under
wms.Source = L.Layer.extend({
add this:
getLayerWithOptions: function(name, options) {
return wms.layerWithOptions(this, name, options)
},
then below:
wms.layer = function(source, options) {
return new wms.Layer(source, options)
}
add this:
wms.layerWithOptions = function(source, layerName, options) {
return new wms.Layer(source, layerName, options)
};
Initialize layers like this e.g.:
source.getLayerWithOptions("layer1",{time: "1990-2001").addTo(map);
which adds TIME option to this layer only.
Hey. I need to be able to handle timeseries WMS too. I just tried to implement this locally and my time options are being ignored. I've updated my local leaflet.wms.js as you described and have added this to my app:
cc.source = L.WMS.source(
"https://eip.ceh.ac.uk/thredds/wms/public-historic-spi", {
format: 'image/png',
transparent: true,
version: '1.3.0',
styles: 'boxfill/rdbu_inv',
colorscalerange:'-4,4',
width:579,
height:706,
opacity:0.5,
identify:false,
attribution: "Standard Precipitation Index - 12 months",
});
cc.source.getLayerWithOptions("SPI12_5km", {time: '1961-03-01T00:00:00.000Z'}).addTo(map);
Any ideas what I've missed? thanks in advance.
Hello. Can you please look at this link to see if it works. I used Slider control (top right corner) to switch between layers. You just slide right and wait for layer to load and check if it is OK. I don't know anything about the given layers so I cannot analyse the results.
Check out the source html to see the code.
Hope it helps.
Here's the code for future reference:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script type="text/javascript" src="http://rawgit.com/dwilhelm89/LeafletSlider/master/dist/leaflet.SliderControl.min.js"></script>
<script type="text/javascript" src="leaflet.wms.js"></script>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
<title>Leaflet Time Slider - Yemling</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">//<![CDATA[
/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([54, -2], 5);
ATTR = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'© <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
// CDB_URL = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
attribution: ATTR
}).addTo(map);
var layers = [];
source = [];
source = L.WMS.source(
"https://eip.ceh.ac.uk/thredds/wms/public-historic-spi", {
"format": 'image/png',
"transparent": true,
"version": '1.3.0',
"styles": 'boxfill/rdbu_inv',
"colorscalerange":'-4,4',
"width":579,
"height":706,
"opacity":0.5,
"identify":false,
"attribution": "Standard Precipitation Index - 12 months",
'tiled': true,
});
layers[0] = source.getLayerWithOptions("SPI12_5km", {time: '1961-03-01T00:00:00.000Z'}).addTo(map);
layers[1] = source.getLayerWithOptions("SPI24_5km", {time: '1961-03-01T00:00:00.000Z'}).addTo(map);
layers[2] = source.getLayerWithOptions("SPI1_5km", {time: '1961-03-01T00:00:00.000Z'}).addTo(map);
var layerGroup = L.layerGroup(layers);
layerGroup.setZIndex(99);
sliderControl = L.control.sliderControl({
layer: layerGroup,
follow: true,
alwaysShowDate: true,
});
map.addControl(sliderControl);
sliderControl.startSlider();
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "260hffor"
}], "*")
}
</script>
</body>
</html>
Hi. Yes, I have put the same time because I don't know what the server supports. You should try this code on your own with diff parameters. Try first to load a single layer with time options and then another to see if layer is changed based on time param. Also you can check if the server supports time param by using qgis and time manager plugin:
https://www.youtube.com/watch?v=nHrFOPf1UGw https://anitagraser.com/2015/08/10/using-timemanager-for-wms-t-layers/
I tried this with the starting date you gave and I got error message:
Could not find suitable time format for value 1961-03-01T00:00:00.000Z
Are you sure that the server has layers with time setup?