Using "L.timeDimension.layer.wms" with "colorpicker"

[prasanjitdash]

I'm trying to use colorpicker from 'L.timeDimension.layer.wms' to get the RGB values.

Source for colorpicker: https://github.com/frogcat/leaflet-tilelayer-colorpicker/blob/master/leaflet-tilelayer-colorpicker.js

Tried extending L.timeDimension.layer.wms to colorpicker as follows: L.TimeDimension.Layer.WMS.ColorPicker = L.TimeDimension.Layer.WMS.extend({ options: { crossOrigin: "anonymous" }, getColor: function(latlng) { var size = this.getTileSize(); var point = this._map.project(latlng, this._tileZoom).floor(); var coords = point.unscaleBy(size).floor(); var offset = point.subtract(coords.scaleBy(size)); coords.z = this._tileZoom; var tile = this._tiles[this._tileCoordsToKey(coords)]; if (!tile || !tile.loaded) return null; try { var canvas = document.createElement("canvas"); canvas.width = 1; canvas.height = 1; var context = canvas.getContext('2d'); context.drawImage(tile.el, -offset.x, -offset.y, size.x, size.y); return context.getImageData(0, 0, 1, 1).data; } catch (e) { return null; } } });

L.timeDimension.layer.wms.colorPicker = function(layer, options) { return new L.TimeDimension.Layer.WMS.ColorPicker(layer, options); };

Issue: The intent is to get the RGB values on mousemove: map.on("mousemove", function (event) { var color = layer01.getColor(event.latlng); var red = color[0]; var green = color[1]; var blue = color[2]; layer01_display_val = 'L1:' + '(' + red + ',' + green + ',' + blue + ')'; ctl_Layer01_valDisplayBox.setContent(layer01_display_val); }

I see the getColor function is available but it is still not recognizing "this.getTileSize" defined in "L.TimeDimension.Layer.WMS.ColorPicker".

The Chrome debugger says: "leaflet.timedimension.layer.wms-colorpicker.js:10 Uncaught TypeError: this.getTileSize is not a function".

Any suggestion, folks? Thanks

[bielfrontera]

Hi @prasanjitdash, I made it work with these changes:

1. New plugin leaflet-tilelayer-wms-colorpicker (new class L.TileLayer.WMS.ColorPicker that extends from L.TileLayer.WMS instead of L.TileLayer)

2. Code for new timedimension layer:

   
   L.TimeDimension.Layer.WMS.ColorPicker = L.TimeDimension.Layer.WMS.extend({
   getColor: function (latlng) {
       if (this._currentLayer && this._currentLayer.getColor) {
           return this._currentLayer.getColor(latlng);
       }
       return null;
   }
   });

L.timeDimension.layer.wms.colorPicker = function (layer, options) { return new L.TimeDimension.Layer.WMS.ColorPicker(layer, options); };

3. Create the base layer using `L.tileLayer.wms.colorPicker` and the time layer using `L.timeDimension.layer.wms.colorPicker`:
```javascript
var layer = L.tileLayer.wms.colorPicker(url, options);
var timeLayer = L.timeDimension.layer.wms.colorPicker(layer, timeLayerOptions);
timeLayer.addTo(map);

[prasanjitdash]

I've almost forgotten the details of what I did that time and will re-visit soon to check if the newer solution works well. In the meanwhile, thank you for your time and for getting back to this useful plugin improvement.