Explore using a service worker to catch requests and reproject them

[desean1625]

MapLibre only supports EPSG:3857 but most geoservers use EPSG:4326, and the interface kibana provides only allows us to give a url template not the actual tile data.

This means we will need to catch the requests in flight to the geoserver using a service worker modify the bbox projection and CRS/SRS request to one that the geoserver can handle. Then after getting the tile data decode the PNG/JPEG to raw data and reproject each pixel to EPSG:3857. Reencode to png/jpeg and return the response for maplibre to place on the map.

Will need to utilize proj4js and openlayers has some preprojection utilities. https://openlayers.org/en/latest/examples/reprojection-image.html

or it would look something like this

TILE_SIZE = 256

var gCanvas = document.getElementById("canvas");//source
var gCtx = gCanvas.getContext("2d");
var gCanvas1 = document.getElementById("outcanvas");//destination
var gCtx1 = gCanvas1.getContext("2d");
gCtx1.clearRect(0, 0, TILE_SIZE, TILE_SIZE);
var sourceData = gCtx.getImageData( 0, 0, TILE_SIZE,TILE_SIZE);
var destinationData = gCtx1.getImageData( 0, 0, TILE_SIZE, TILE_SIZE); 

for (var x = 0; x < destinationData.width; x++)
  for (var y = 0; y < destinationData.height; y++)
  {
    var offset = (y * destinationData.width + x) * 4;

var p = new Proj4js.Point( x, (TILE_SIZE-y));
Proj4js.transform(t_srs, s_srs, p);
var out =  [ parseInt( (p.x+180) / 360.0 * TILE_SIZE), 512- parseInt( (p.y+90) / 180 * TILE_SIZE) ];
var s_offset = ( parseInt( out[1] ) * sourceData.width + parseInt( out[0] ) ) * 4;
if (offset)
for(i=0; i<=3; i++){
        destinationData.data[offset+i] = sourceData.data[s_offset+i];
}
 }
gCtx1.putImageData(destinationData, 0, 0);

[ndmitch311]

Sean,

This is all for Thresher integration? I'd like to pause any additional work on this effort and 1) See what we can submit as a need to Elastic (If we have open tickets, please remind me of the number(s). Ben and I can push them.) 2) Write up the as built and needs yet for this Use Case / CONOP. 3) Possibly shift cycles for a bit to other ACECARD RoadMap items.

Thanks!

vr, Natalie Mitchell @.*** (571)732-4013

---

From: Sean Sullivan @.> Sent: Wednesday, August 23, 2023 12:28 PM To: spectriclabs/kibana_acecard_external_map_services @.> Cc: Subscribed @.***> Subject: [spectriclabs/kibana_acecard_external_map_services] Explore using a service worker to catch requests and reproject them (Issue #12)

MapLibre only supports EPSG:3857 but most geoservers use EPSG:4326, and the interface kibana provides only allows us to give a url template not the actual tile data.

This means we will need to catch the requests in flight to the geoserver using a service worker modify the bbox projection and CRS/SRS request to one that the geoserver can handle. Then after getting the tile data decode the PNG/JPEG to raw data and reproject each pixel to EPSG:3857. Reencode to png/jpeg and return the response for maplibre to place on the map.

Will need to utilize proj4js and openlayers has some preprojection utilities. https://openlayers.org/en/latest/examples/reprojection-image.html

or it would look something like this

TILE_SIZE = 256

var gCanvas = document.getElementById("canvas");//source var gCtx = gCanvas.getContext("2d"); var gCanvas1 = document.getElementById("outcanvas");//destination var gCtx1 = gCanvas1.getContext("2d"); gCtx1.clearRect(0, 0, TILE_SIZE, TILE_SIZE); var sourceData = gCtx.getImageData( 0, 0, TILE_SIZE,TILE_SIZE); var destinationData = gCtx1.getImageData( 0, 0, TILE_SIZE, TILE_SIZE);

for (var x = 0; x < destinationData.width; x++) for (var y = 0; y < destinationData.height; y++) { var offset = (y destinationData.width + x) 4;

var p = new Proj4js.Point( x, (TILE_SIZE-y)); Proj4js.transform(t_srs, s_srs, p); var out = [ parseInt( (p.x+180) / 360.0 TILE_SIZE), 512- parseInt( (p.y+90) / 180 TILE_SIZE) ]; var s_offset = ( parseInt( out[1] ) sourceData.width + parseInt( out[0] ) ) 4; if (offset) for(i=0; i<=3; i++){ destinationData.data[offset+i] = sourceData.data[s_offset+i]; } } gCtx1.putImageData(destinationData, 0, 0);

— Reply to this email directly, view it on GitHubhttps://github.com/spectriclabs/kibana_acecard_external_map_services/issues/12, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ATWVNAHYNIOXWW2OYX3KRITXWYVSPANCNFSM6AAAAAA33XSKLY. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[desean1625]

No this would be for mist specifically. I wasn't working on it. I was just writing down my ideas so I wouldn't forget them.