Separate layer pass options - modified GetLayer() function #54

mgurjanov · 2018-02-05T03:24:06Z

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.

The text was updated successfully, but these errors were encountered:

yemling · 2018-07-23T16:17:43Z

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.

mgurjanov · 2018-07-24T03:00:57Z

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 = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <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>

yemling · 2018-07-24T13:31:22Z

I think the example is changing the layer but not the time.

mgurjanov · 2018-07-25T03:11:59Z

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?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Separate layer pass options - modified GetLayer() function #54

Separate layer pass options - modified GetLayer() function #54

mgurjanov commented Feb 5, 2018

yemling commented Jul 23, 2018

mgurjanov commented Jul 24, 2018

yemling commented Jul 24, 2018

mgurjanov commented Jul 25, 2018

Separate layer pass options - modified GetLayer() function #54

Separate layer pass options - modified GetLayer() function #54

Comments

mgurjanov commented Feb 5, 2018

yemling commented Jul 23, 2018

mgurjanov commented Jul 24, 2018

yemling commented Jul 24, 2018

mgurjanov commented Jul 25, 2018