Skip to content

Commit 72aa4d7

Browse files
ahmadayubiahmadayubi
authored
Fixes query template extents (#272)
* Fixes query template bounds * Add tests for query extent * Test checks all 4 sides of bounds * Test update
1 parent aa34150 commit 72aa4d7

File tree

4 files changed

+155
-18
lines changed

4 files changed

+155
-18
lines changed

‎src/mapml/handlers/QueryHandler.js

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -101,24 +101,31 @@ export var QueryHandler = L.Handler.extend({
101101
obj[v] = template.query[v];
102102
}
103103
}
104-
fetch(L.Util.template(template.template, obj),{redirect: 'follow'}).then(
105-
function(response) {
106-
if (response.status >= 200 && response.status < 300) {
107-
return Promise.resolve(response);
108-
} else {
109-
console.log('Looks like there was a problem. Status Code: ' + response.status);
110-
return Promise.reject(response);
111-
}
112-
}).then(function(response) {
113-
var contenttype = response.headers.get("Content-Type");
114-
if ( contenttype.startsWith("text/mapml")) {
115-
return handleMapMLResponse(response, e.latlng);
116-
} else {
117-
return handleOtherResponse(response, layer, e.latlng);
118-
}
119-
}).catch(function(err) {
120-
// no op
121-
});
104+
105+
let point = this._map.project(e.latlng),
106+
scale = this._map.options.crs.scale(this._map.getZoom()),
107+
pcrsClick = this._map.options.crs.transformation.untransform(point,scale);
108+
109+
if(template.layerBounds.contains(pcrsClick)){
110+
fetch(L.Util.template(template.template, obj),{redirect: 'follow'}).then(
111+
function(response) {
112+
if (response.status >= 200 && response.status < 300) {
113+
return Promise.resolve(response);
114+
} else {
115+
console.log('Looks like there was a problem. Status Code: ' + response.status);
116+
return Promise.reject(response);
117+
}
118+
}).then(function(response) {
119+
var contenttype = response.headers.get("Content-Type");
120+
if ( contenttype.startsWith("text/mapml")) {
121+
return handleMapMLResponse(response, e.latlng);
122+
} else {
123+
return handleOtherResponse(response, layer, e.latlng);
124+
}
125+
}).catch(function(err) {
126+
// no op
127+
});
128+
}
122129
function handleMapMLResponse(response, loc) {
123130
return response.text().then(mapml => {
124131
// bind the deprojection function of the layer's crs

‎src/mapml/layers/TemplatedLayer.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export var TemplatedLayer = L.Layer.extend({
2020
if (!this._queries) {
2121
this._queries = [];
2222
}
23+
let inputData = M.extractInputBounds(templates[i]);
24+
templates[i].layerBounds = inputData.bounds;
25+
templates[i].zoomBounds = inputData.zoomBounds;
2326
this._queries.push(L.extend(templates[i], this._setupQueryVars(templates[i])));
2427
}
2528
}
@@ -41,6 +44,7 @@ export var TemplatedLayer = L.Layer.extend({
4144
this.closePopup();
4245
},
4346

47+
4448
_setupQueryVars: function(template) {
4549
// process the inputs associated to template and create an object named
4650
// query with member properties as follows:

‎test/e2e/layers/queryLink.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<title>Query Link Extent Test</title>
8+
<script type="module" src="mapml-viewer.js"></script>
9+
</head>
10+
11+
<body>
12+
<mapml-viewer style="width: 500px;height: 500px;" projection="CBMTILE" zoom="0" lat="45" lon="-90" controls>
13+
</layer->
14+
<layer- label="Inline Templated Tile" checked>
15+
<meta name="zoom" content="min=0,max=5" />
16+
<extent units="CBMTILE">
17+
<input name="i" type="location" units="map" axis="i" />
18+
<input name="j" type="location" units="map" axis="j" />
19+
<input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-2.003750834E7"
20+
max="2.003750834E7" />
21+
<input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-2.003750834E7"
22+
max="2.003750834E7" />
23+
<input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-2.003750834E7"
24+
max="2.003750834E7" />
25+
<input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-2.003750834E7"
26+
max="2.003750834E7" />
27+
<input name="w" type="width" />
28+
<input name="h" type="height" />
29+
<link rel="query"
30+
tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" />
31+
</extent>
32+
</layer->
33+
<layer- label="bound" checked>
34+
<meta name="projection" content="CBMTILE">
35+
<meta name="zoom" content="min=0, max=5, value=0">
36+
<feature zoom="0">
37+
<geometry cs="pcrs">
38+
<polygon>
39+
<coordinates>-20037508.34 20037508.34 20037508.34 20037508.34 20037508.34 -20037508.34 -20037508.34
40+
-20037508.34
41+
</coordinates>
42+
</polygon>
43+
</geometry>
44+
</feature>
45+
</layer->
46+
</mapml-viewer>
47+
</body>
48+
49+
</html>

‎test/e2e/layers/queryLink.test.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const playwright = require("playwright");
2+
3+
jest.setTimeout(50000);
4+
(async () => {
5+
6+
for (const browserType of BROWSER) {
7+
let page, browser, context;
8+
describe(
9+
"Playwright Query Link Tests in " + browserType,
10+
() => {
11+
beforeAll(async () => {
12+
browser = await playwright[browserType].launch({
13+
headless: ISHEADLESS,
14+
slowMo: 50,
15+
});
16+
context = await browser.newContext();
17+
page = await context.newPage();
18+
if (browserType === "firefox") {
19+
await page.waitForNavigation();
20+
}
21+
await page.goto(PATH + "queryLink.html");
22+
});
23+
24+
afterAll(async function () {
25+
await browser.close();
26+
});
27+
28+
test("[" + browserType + "]" + " Query link shows when within bounds", async () => {
29+
await page.click("div");
30+
await page.waitForSelector("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div");
31+
const popupNum = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
32+
expect(popupNum).toEqual(1);
33+
});
34+
35+
test("[" + browserType + "]" + " Query link closes previous popup when new query made within bounds", async () => {
36+
await page.evaluateHandle(() => document.querySelector("mapml-viewer").zoomTo(9, -27, 0));
37+
await page.waitForTimeout(1000);
38+
await page.click("div");
39+
await page.waitForSelector("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div");
40+
const popupNum = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
41+
expect(popupNum).toEqual(1);
42+
});
43+
44+
test("[" + browserType + "]" + " Query link does not show when out of bounds", async () => {
45+
await page.evaluateHandle(() => document.querySelector("mapml-viewer").zoomTo(-37.078210, -9.010487, 0));
46+
await page.waitForTimeout(1000);
47+
await page.click("div");
48+
await page.waitForSelector("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div", { state: "hidden" });
49+
const popupNumRight = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
50+
51+
await page.evaluateHandle(() => document.querySelector("mapml-viewer").zoomTo(-45.679787, -93.041053, 0));
52+
await page.waitForTimeout(1000);
53+
await page.click("div");
54+
await page.waitForTimeout(1000);
55+
const popupNumBottom = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
56+
57+
await page.evaluateHandle(() => document.querySelector("mapml-viewer").zoomTo(-37.399782, 177.152220, 0));
58+
await page.waitForTimeout(1000);
59+
await page.click("div");
60+
await page.waitForTimeout(1000);
61+
const popupNumLeft = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
62+
63+
await page.evaluateHandle(() => document.querySelector("mapml-viewer").zoomTo(-32.240953, 94.969783, 0));
64+
await page.waitForTimeout(1000);
65+
await page.click("div");
66+
await page.waitForTimeout(1000);
67+
const popupNumTop = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane", (div) => div.childElementCount);
68+
69+
expect(popupNumRight).toEqual(0);
70+
expect(popupNumBottom).toEqual(0);
71+
expect(popupNumLeft).toEqual(0);
72+
expect(popupNumTop).toEqual(0);
73+
});
74+
75+
});
76+
}
77+
})();

0 commit comments

Comments
 (0)