hook up query parameters form with rest query

This commit is contained in:
Viktor Barzin 2025-06-18 18:56:02 +00:00
parent 3574df8ae0
commit 7c70da4bed
3 changed files with 19 additions and 17 deletions

View file

@ -1,4 +1,4 @@
// @ts-nocheck
// // @ts-nocheck
import crossfilter from "crossfilter2";
import * as d3 from "d3";
import mapboxgl from "mapbox-gl";
@ -6,6 +6,7 @@ import 'mapbox-gl/dist/mapbox-gl.css'; // this hides the map for some reason
import { useEffect, useRef } from "react";
import { renderToString } from 'react-dom/server';
import "../assets/Map.css";
import { Metric, type ParameterValues } from "./Parameters";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
import { Separator } from "./ui/separator";
@ -13,6 +14,7 @@ import { Separator } from "./ui/separator";
export function Map(
props: {
listingData: any;
queryParameters: ParameterValues | null;
}
) {
const data = props.listingData;
@ -33,8 +35,11 @@ export function Map(
let heatmap = null;
// rivet
var filter = { city: 'London', country: null, mode: 'qmprice' };
var filter = { city: 'London', country: null, mode: Metric.qmprice };
// filter['countries'] = Array.from(new Set(data.features.map(function (d) { return d['properties']['country'] })));
if (props.queryParameters) {
filter['mode'] = props.queryParameters.metric;
}
// rivets.bind(document.getElementById('overlay'), { filter: filter });
const mapRef = useRef(mapboxgl.Map)
const mapContainerRef = useRef('map-container')
@ -85,7 +90,7 @@ export function Map(
heatmap.setCellDensity(0.5); // small value == bigger hexagons
heatmap.setPropertyName(filter.mode);
if (filter.mode === 'qmprice') {
if (filter.mode === Metric.qmprice) {
// if we visualize sqm based data, remove properties where we have no data
qmDim.filter(function (d) { return d > 0; });
}