Skip to content

Commit 6de3c86

Browse files
sgreenburysgreenbury
committed
Fix bounding box impl
1 parent ee48310 commit 6de3c86

File tree

4 files changed

+46
-83
lines changed

4 files changed

+46
-83
lines changed

‎popgetter-browser/web/src/routes/DownloadMode.svelte

+38-71
Original file line numberDiff line numberDiff line change
@@ -43,22 +43,18 @@
4343
4444
const outputFormats: string[] = ["geojson", "csv", "geojsonseq"];
4545
let selectedOutputFormat: string = "csv";
46-
let bboxValue: string = "";
46+
let bounds:
47+
| { _sw: { lat: number; lng: number }; _ne: { lat: number; lng: number } }
48+
| undefined;
49+
let bbox: string = "";
4750
let hidden8 = false;
4851
let transitionParams = {
4952
y: 320,
5053
duration: 200,
5154
easing: sineIn,
5255
};
5356
54-
// Event listener to get bounding box on map load and on view change
55-
// $map.on("load", updateBoundingBox);
56-
// $map.on("moveend", updateBoundingBox);
57-
// updateBoundingBox();
58-
// let bboxForRequest = bbox.map((el) => Number(el.toFixed(6)));
59-
// console.log("Bbox", bboxForRequest);
60-
61-
async function downloadMetrics(dataRequestSpec): Promise<any> {
57+
async function downloadMetrics(dataRequestSpec: {}): Promise<any> {
6258
try {
6359
console.log(dataRequestSpec);
6460
if (!(await $rustBackend!.isLoaded())) {
@@ -79,30 +75,8 @@
7975
}
8076
}
8177
82-
onMount(async () => {
83-
try {
84-
// const metricsDownload = $selectedMetricsList.map((record) => ({
85-
// MetricId: {
86-
// id: record.metric_id,
87-
// },
88-
// }));
89-
// console.log(metricsDownload);
90-
// let dataRequestSpec = {
91-
// region: [],
92-
// metrics: metricsDownload,
93-
// years: [],
94-
// };
95-
// const metrics = await downloadMetrics(dataRequestSpec);
96-
// $previewedMetricsList = metrics;
97-
// console.log($previewedMetricsList.slice(0, 10));
98-
// return;
99-
} catch (err) {
100-
console.log("Download");
101-
window.alert(`${err}`);
102-
}
103-
});
104-
10578
async function setPreviewedMetrics(): Promise<Array<{}>> {
79+
// Get metrics
10680
const metricsDownload = $selectedMetricsList.map((record) => ({
10781
MetricId: {
10882
id: record.metric_id,
@@ -117,7 +91,7 @@
11791
const metrics = await downloadMetrics(dataRequestSpec);
11892
$previewedMetricsList = metrics;
11993
120-
// TODO: set geometry from dataRequestSpec
94+
// Get and set PMTiles URL from data request spec
12195
const loaded = await $rustBackend!.isLoaded();
12296
if (!loaded) {
12397
await $rustBackend!.initialise();
@@ -139,7 +113,7 @@
139113
.map((record: {}) => `--id ${record.metric_id}`)
140114
.join(" ");
141115
let outputFormatStr = "--output-format " + selectedOutputFormat;
142-
let bboxStr = bboxValue === "" ? "" : "--bbox " + bboxValue;
116+
let bboxStr = bbox === "" ? "" : "--bbox " + bbox;
143117
144118
return ["popgetter", "data", ids, outputFormatStr, bboxStr].join(" ");
145119
}
@@ -180,24 +154,12 @@
180154
}
181155
}
182156
183-
// Assign bounding box from map
184-
// TODO: fix this, currently returns not initialized
185-
let mapInstance;
186-
function updateBoundingBox(): string {
187-
if (mapInstance) {
188-
const bounds = mapInstance.getBounds().toArray();
189-
console.log("Bounding Box:", bounds);
190-
let bbox = [
191-
bounds.getWest(),
192-
bounds.getSouth(),
193-
bounds.getEast(),
194-
bounds.getNorth(),
195-
];
196-
return bbox.map((el) => Number(el.toFixed(6)).toString()).join(",");
197-
} else {
198-
console.error("Map instance is not yet initialized.");
199-
return "";
200-
}
157+
// Assign bounding box from bounds
158+
function updateBoundingBox() {
159+
console.log("Bounds:", bounds);
160+
bbox = [bounds._sw.lng, bounds._sw.lat, bounds._ne.lng, bounds._ne.lat]
161+
.map((el) => Number(el.toFixed(6)).toString())
162+
.join(",");
201163
}
202164
203165
async function download(dataRequestSpec: {}): Promise<String> {
@@ -292,21 +254,19 @@
292254
}
293255
const debouncedHandleInput = debounce(handleInput, 300);
294256
295-
async function handleClick() {
296-
// let bboxForRequest = bbox.map((el) => Number(el.toFixed(6)));
297-
let bboxForRequest = bboxValue;
298-
console.log("Bbox", bboxForRequest);
299-
300-
// TODO: create data request spec when no bbox is given
257+
async function downloadAndSave() {
258+
console.log("Bbox", bbox);
301259
let dataRequestSpec = {
302-
region: [
303-
{
304-
BoundingBox: bboxForRequest
305-
.split(",")
306-
.map((el) => Number(Number(el).toFixed(6))),
307-
},
308-
],
309-
// metrics: [{ MetricId: { id: $previewMetricMap.metric_id } }],
260+
region:
261+
bbox === ""
262+
? []
263+
: [
264+
{
265+
BoundingBox: bbox
266+
.split(",")
267+
.map((el) => Number(Number(el).toFixed(6))),
268+
},
269+
],
310270
metrics: $selectedMetricsList.map((metric) => ({
311271
MetricId: {
312272
id: metric.metric_id,
@@ -374,7 +334,7 @@
374334
<!-- Map previews downloaded metrics -->
375335

376336
<div slot="map">
377-
<TilesMap bind:mapInstance></TilesMap>
337+
<TilesMap bind:bounds></TilesMap>
378338

379339
<div>
380340
<Drawer
@@ -403,7 +363,8 @@
403363
<p class="text-sm text-gray-500 dark:text-gray-400">
404364
<b
405365
>Preview of selected metrics <button
406-
on:click={() => handleClick()}>(view selected on map)</button
366+
on:click={() => downloadAndSave()}
367+
>(view selected on map)</button
407368
></b
408369
>
409370
</p>
@@ -456,7 +417,13 @@
456417
</Table>
457418
</section>
458419
</TabItem>
459-
<TabItem title="Download" on:click={() => setPreviewedMetrics()}>
420+
<TabItem
421+
title="Download"
422+
on:click={() => {
423+
updateBoundingBox();
424+
setPreviewedMetrics();
425+
}}
426+
>
460427
<div class="pt-8">
461428
<div
462429
style="text-align: left; margin-top: 0.5%; margin-bottom: 0.5%; "
@@ -469,7 +436,7 @@
469436
id="bbox"
470437
type="text"
471438
placeholder=""
472-
bind:value={bboxValue}
439+
bind:value={bbox}
473440
/>
474441
<Button
475442
color="light"
@@ -526,7 +493,7 @@
526493
<Button
527494
color="light"
528495
on:click={() => {
529-
handleClick();
496+
downloadAndSave();
530497
}}>Download</Button
531498
>
532499
</div>

‎popgetter-browser/web/src/routes/LevelsMode.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
Belgium: ["statistical_sector", "municipality"],
1616
};
1717
let levelsList = [];
18+
let bounds;
1819
1920
function setLevel(level: String) {
2021
$selectedLevel = level;
@@ -23,8 +24,6 @@
2324
$mode = { kind: "download" };
2425
}
2526
26-
let mapInstance;
27-
2827
onMount(async () => {
2928
try {
3029
levelsList = levels[$selectedCountry + ""];
@@ -66,6 +65,6 @@
6665
</div>
6766
</div>
6867
<div slot="map">
69-
<TilesMap bind:mapInstance></TilesMap>
68+
<TilesMap bind:bounds></TilesMap>
7069
</div>
7170
</SplitComponent>

‎popgetter-browser/web/src/routes/TilesMap.svelte

+2-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
// Reactive subscription to get the updates to URL value
1414
let showMap = true;
1515
let currentUrl;
16-
export let mapInstance;
16+
export let bounds;
1717
1818
// Subscribe to the store and toggle `showMap` to trigger a re-render
1919
tileUrl.subscribe((value) => {
@@ -22,10 +22,6 @@
2222
setTimeout(() => (showMap = true), 0);
2323
});
2424
25-
function handleMapLoad(event) {
26-
mapInstance = event.detail.map;
27-
}
28-
2925
// TODO: upon click show record for GEO_ID from previewMetricMapColors
3026
</script>
3127

@@ -35,8 +31,7 @@
3531
standardControls
3632
center={[0.0, 53.0]}
3733
zoom={2}
38-
bind:this={mapInstance}
39-
on:load={handleMapLoad}
34+
bind:bounds
4035
>
4136
<VectorTileSource url={currentUrl} promoteId={"GEO_ID"}>
4237
<FillLayer

‎popgetter-browser/web/src/routes/TitleMode.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@
1414
import Subtitle from "./Subtitle.svelte";
1515
import TilesMap from "./TilesMap.svelte";
1616
17+
let bounds;
18+
1719
function setCountryAndLevelsList(country: String) {
1820
$selectedCountry = country;
1921
console.log("Selected country: ", $selectedCountry);
2022
$mode = { kind: "level" };
2123
}
22-
let mapInstance;
24+
2325
onMount(async () => {
2426
$previewMetricMapColors = [];
2527
$selectedMetricsList = [];
@@ -58,6 +60,6 @@
5860
</div>
5961
</div>
6062
<div slot="map">
61-
<TilesMap bind:mapInstance></TilesMap>
63+
<TilesMap bind:bounds></TilesMap>
6264
</div>
6365
</SplitComponent>

0 commit comments

Comments
 (0)