Centering LeafletMap getTileUrl()

[jakepolatty]

The getTileUrl() call in LeafletMap currently returns a tile that is not centered in the view, preventing the user from directly visualizing the effect of their selection. There appear to be two possible routes to solve this issue:

1. Have getTileUrl() always return the center tile regardless of whether this tile contains any WMS data.
2. Have getTileUrl() return a tile with a valid image return from the server, likely sorting on file size to identify the tile with the maximum amount of visual data.

For both routes, the major roadblock seems to be that the LeafletMap does not update when the user pans around the map or attempts to zoom in, and any attempt to override this behavior would likely result in an infinite update loop in React. This restriction might require the addition of a reload button somewhere on the page to force the component to find its new center tile and re-render the style options.

[jakepolatty]

Test code using Leaflet's built-in getPixelBounds() function to locate tile:

getTileUrlFromBounds() {
    let tileUrl = '';
    let baseUrl = this.props.rasterLayerData[0].url;
    if (baseUrl !== '' && this.mapRef.current.leafletElement) {
      // Get leafletElement ref and extract layer data
      let leafletElement = this.mapRef.current.leafletElement;

      let tileSize = 256;
      let bounds = leafletElement.getPixelBounds();
      let center = bounds.getCenter();
      let zoom = leafletElement.getZoom();

      let layers = leafletElement['_layers'];
      let layerKeys = Object.keys(layers);

      // Find the layer with the WMS url
      let wmsLayer = {};

      for (let i = 0; i < layerKeys.length; i++) {
        let layer = layers[layerKeys[i]];
        if (layer['_url'] === baseUrl) {
          wmsLayer = layer;
        }
      }

      // get NorthWest and SouthEast points
      var nwTilePoint = {
        x: Math.floor(bounds.min.x / tileSize),
        y: Math.floor(bounds.min.y / tileSize),
      };

      var seTilePoint = {
        x: Math.floor(bounds.max.x / tileSize),
        y: Math.floor(bounds.max.y / tileSize),
      };

      // get max number of tiles in this zoom level
      var max = leafletElement.options.crs.scale(zoom) / tileSize; 

      // enumerate visible tiles 
      let tileCoords = [];
      for (var x = nwTilePoint.x; x <= seTilePoint.x; x++) {
         for (var y = nwTilePoint.y; y <= seTilePoint.y; y++) {

            var xTile = (x + max) % max;
            var yTile = (y + max) % max;

            tileCoords.push({
              x: xTile,
              y: yTile,
            });
          }
      }

      let centerTileCoords = tileCoords[Math.floor(tileCoords.length/2)];
      let centerTileKey = centerTileCoords.x + ':' + centerTileCoords.y + ':' + zoom;

      // Extract tile data and find approximate center
      let tiles = wmsLayer['_tiles'];
      let centerTile = tiles[centerTileKey];

      // Get tile url

      tileUrl = centerTile.el.getAttribute('src');
    }

    return tileUrl;
  }

[jakepolatty]

Center tile selections are temporarily working in #23 but require a full layer reload to update. Next step is to add a prop to trigger a reload when the drawer is opened in the wms-viewer.

[jakepolatty]

The addition of the crosshair.toggled attribute provides the update trigger in componentDidUpdate(), fully resolving the issue in #23