Add frontend

frontend/src/components/Map.jsx

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import { Map as MapGL } from 'react-map-gl/maplibre';
+import DeckGL from '@deck.gl/react';
+import { H3HexagonLayer } from '@deck.gl/geo-layers';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const INITIAL_VIEW = {
+  longitude: -1.5,
+  latitude: 53.5,
+  zoom: 6,
+  pitch: 0,
+};
+
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+
+function priceToColor(price) {
+  if (price < 150000) return [46, 204, 113];
+  if (price < 300000) return [241, 196, 15];
+  if (price < 500000) return [231, 76, 60];
+  return [142, 68, 173];
+}
+
+function zoomToResolution(zoom) {
+  if (zoom < 7) return 6;
+  if (zoom < 9) return 7;
+  if (zoom < 11) return 8;
+  if (zoom < 13) return 9;
+  if (zoom < 15) return 10;
+  if (zoom < 17) return 11;
+  return 12;
+}
+
+export default function Map({ data, onZoom }) {
+  const onViewStateChange = useCallback(
+    ({ viewState }) => {
+      onZoom(zoomToResolution(viewState.zoom));
+    },
+    [onZoom]
+  );
+
+  const layers = [
+    new H3HexagonLayer({
+      id: 'h3-hexagons',
+      data,
+      getHexagon: (d) => d.h3,
+      getFillColor: (d) => priceToColor(d.avg_price),
+      extruded: false,
+      pickable: true,
+      opacity: 0.7,
+    }),
+  ];
+
+  return (
+    <div className="flex-1">
+      <DeckGL
+        initialViewState={INITIAL_VIEW}
+        controller
+        layers={layers}
+        onViewStateChange={onViewStateChange}
+      >
+        <MapGL mapStyle={MAP_STYLE} />
+      </DeckGL>
+    </div>
+  );
+}