do not show listing where sqm is not available when we vizualive sqm-based metrics
This commit is contained in:
Viktor Barzin
parent
20ab7fde95
commit
abf06be0a7
2 changed files with 4 additions and 235 deletions
|
|
@ -1,152 +0,0 @@
|
|||
// class HexgridHeatmap {
|
||||
// constructor(map, options = {}) {
|
||||
// this.map = map;
|
||||
// this.options = {
|
||||
// id: 'hexgrid-heatmap',
|
||||
// radius: 1000, // meters
|
||||
// colorRange: [
|
||||
// [0, '#f7fbff'],
|
||||
// [0.2, '#6baed6'],
|
||||
// [0.4, '#4292c6'],
|
||||
// [0.6, '#2171b5'],
|
||||
// [0.8, '#084594'],
|
||||
// [1, '#08306b']
|
||||
// ],
|
||||
// opacity: 0.7,
|
||||
// ...options
|
||||
// };
|
||||
|
||||
// // this.hexLayerId = `${this.options.id}-hex`;
|
||||
// this.hexLayerId = `${this.options.id}`;
|
||||
// this.hexData = null;
|
||||
|
||||
// if (this.map.loaded()) {
|
||||
// this._initialize();
|
||||
// } else {
|
||||
// this.map.on('load', () => this._initialize());
|
||||
// }
|
||||
// }
|
||||
|
||||
// async _initialize() {
|
||||
// await this._createHexgrid();
|
||||
// this._addSourcesAndLayers();
|
||||
// this._setupEventListeners();
|
||||
// }
|
||||
|
||||
// async _createHexgrid() {
|
||||
// if (!this.options.data) return;
|
||||
|
||||
// // 1. Get bounding box of point data
|
||||
// const bbox = turf.bbox(this.options.data);
|
||||
|
||||
// // 2. Create hexgrid covering the bounding box
|
||||
// const cellSide = this.options.radius;
|
||||
// const hexgrid = turf.hexGrid(bbox, cellSide, { units: 'meters' });
|
||||
|
||||
// // 3. Count points in each hexagon
|
||||
// this.hexData = this._countPointsInHexagons(this.options.data, hexgrid);
|
||||
// }
|
||||
|
||||
// _countPointsInHexagons(points, hexgrid) {
|
||||
// // Collect counts for each hexagon
|
||||
// const counts = {};
|
||||
// points.features.forEach(point => {
|
||||
// hexgrid.features.forEach((hex, i) => {
|
||||
// if (turf.booleanPointInPolygon(point, hex)) {
|
||||
// counts[i] = (counts[i] || 0) + 1;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// // Add counts to hexgrid properties
|
||||
// hexgrid.features.forEach((hex, i) => {
|
||||
// hex.properties = {
|
||||
// ...hex.properties,
|
||||
// count: counts[i] || 0
|
||||
// };
|
||||
// });
|
||||
|
||||
// // Normalize values (0-1) for coloring
|
||||
// const maxCount = Math.max(...Object.values(counts), 1);
|
||||
// hexgrid.features.forEach(hex => {
|
||||
// hex.properties.normalizedValue = hex.properties.count / maxCount;
|
||||
// });
|
||||
|
||||
// return hexgrid;
|
||||
// }
|
||||
|
||||
// _addSourcesAndLayers() {
|
||||
// // Add hexgrid source
|
||||
// this.map.addSource(this.hexLayerId, {
|
||||
// type: 'geojson',
|
||||
// data: this.hexData
|
||||
// });
|
||||
|
||||
// // Add hexagon layer
|
||||
// this.map.addLayer({
|
||||
// id: this.hexLayerId,
|
||||
// type: 'fill',
|
||||
// source: this.hexLayerId,
|
||||
// paint: {
|
||||
// 'fill-color':
|
||||
// 'red',
|
||||
// // [
|
||||
// // 'interpolate',
|
||||
// // ['linear'],
|
||||
// // ['get', 'normalizedValue'],
|
||||
// // ...this.options.colorRange.flat()
|
||||
// // ],
|
||||
// 'fill-opacity': this.options.opacity,
|
||||
// 'fill-outline-color': '#fff'
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// _setupEventListeners() {
|
||||
// this.map.on('click', this.hexLayerId, (e) => {
|
||||
// const features = this.map.queryRenderedFeatures(e.point, {
|
||||
// layers: [this.hexLayerId]
|
||||
// });
|
||||
// if (features.length > 0) {
|
||||
// this._showPopup(features[0], e.lngLat);
|
||||
// }
|
||||
// });
|
||||
|
||||
// this.map.on('mousemove', this.hexLayerId, (e) => {
|
||||
// this.map.getCanvas().style.cursor = 'pointer';
|
||||
// });
|
||||
|
||||
// this.map.on('mouseleave', this.hexLayerId, () => {
|
||||
// this.map.getCanvas().style.cursor = '';
|
||||
// });
|
||||
// }
|
||||
|
||||
// _showPopup(feature, lngLat) {
|
||||
// console.log('Hexagon clicked:', feature);
|
||||
// new mapboxgl.Popup()
|
||||
// .setLngLat(lngLat)
|
||||
// .setHTML(`
|
||||
// <strong>Hexagon Data</strong>
|
||||
// <div>Points: ${feature.properties.count}</div>
|
||||
// <div>Value: ${feature.properties.normalizedValue.toFixed(2)}</div>
|
||||
// `)
|
||||
// .addTo(this.map);
|
||||
// }
|
||||
|
||||
// // Public API
|
||||
// updateData(newData) {
|
||||
// this.options.data = newData;
|
||||
// return this._createHexgrid().then(() => {
|
||||
// this.map.getSource(this.hexLayerId).setData(this.hexData);
|
||||
// });
|
||||
// }
|
||||
|
||||
// remove() {
|
||||
// if (this.map.getLayer(this.hexLayerId)) {
|
||||
// this.map.removeLayer(this.hexLayerId);
|
||||
// }
|
||||
// if (this.map.getSource(this.hexLayerId)) {
|
||||
// this.map.removeSource(this.hexLayerId);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -31,33 +31,15 @@ function update() {
|
|||
|
||||
// init heatmap
|
||||
heatmap = new HexgridHeatmap(map, "hexgrid-heatmap", "waterway-label");
|
||||
// heatmap = new HexgridHeatmap(map, {
|
||||
// id: 'hexgrid-heatmap',
|
||||
// data: data,
|
||||
// radius: 500, // meters
|
||||
// colorRange: [
|
||||
// [0, '#ffffcc'],
|
||||
// [0.5, '#fd8d3c'],
|
||||
// [1, '#bd0026']
|
||||
// ],
|
||||
// showPoints: true
|
||||
// });
|
||||
heatmap.setIntensity(9); // dunno yet
|
||||
heatmap.setSpread(0.05); // dunno yet
|
||||
heatmap.setCellDensity(0.5); // small value == bigger hexagons
|
||||
heatmap.setPropertyName(filter.mode);
|
||||
|
||||
// // Add click handler
|
||||
// heatmap.onClick((event) => {
|
||||
// new mapboxgl.Popup()
|
||||
// .setLngLat(event.coordinates)
|
||||
// .setHTML(`
|
||||
// <h3>Hexagon Data</h3>
|
||||
// <p>Points: ${event.properties.count}</p>
|
||||
// <p>Density: ${event.properties.normalizedValue.toFixed(2)}</p>
|
||||
// `)
|
||||
// .addTo(map);
|
||||
// });
|
||||
if (filter.mode === 'qmprice') {
|
||||
// if we visualize sqm based data, remove properties where we have no data
|
||||
qmDim.filter(function (d) { return d > 0; });
|
||||
}
|
||||
|
||||
|
||||
// set filter
|
||||
|
|
@ -252,64 +234,3 @@ function getPropertyHTML(property) {
|
|||
`;
|
||||
|
||||
}
|
||||
|
||||
// END ORIGINAL BLOCK
|
||||
|
||||
|
||||
|
||||
// // Initialize map
|
||||
// const map = new mapboxgl.Map({
|
||||
// container: 'map',
|
||||
// style: 'mapbox://styles/mapbox/light-v10',
|
||||
// center: [13.38032, 49.994210],
|
||||
// zoom: 5
|
||||
// });
|
||||
|
||||
|
||||
// // Create heatmap when map loads
|
||||
// map.on('load', () => {
|
||||
// const heatmap = new HexgridHeatmap(map, {
|
||||
// id: 'lon-hexgrid',
|
||||
// data: data,
|
||||
// radius: 500, // meters
|
||||
// colorRange: [
|
||||
// [0, '#ffffcc'],
|
||||
// [0.5, '#fd8d3c'],
|
||||
// [1, '#bd0026']
|
||||
// ],
|
||||
// showPoints: true
|
||||
// });
|
||||
|
||||
// var crossData = data.features.map(function (d, i) {
|
||||
// //clone properties
|
||||
// var props = clone(d['properties']);
|
||||
// props['index'] = i;
|
||||
// return props;
|
||||
// });
|
||||
// cf = crossfilter(crossData);
|
||||
// qmDim = cf.dimension(function (d) { return d.qm; });
|
||||
// cityDim = cf.dimension(function (d) { return d.city; });
|
||||
// countryDim = cf.dimension(function (d) { return d.country; });
|
||||
// rentDim = cf.dimension(function (d) { return d.total_price; });
|
||||
// roomsDim = cf.dimension(function (d) { return d.rooms; });
|
||||
// indexDim = cf.dimension(function (d) { return d.index; });
|
||||
|
||||
// // // Add click handler
|
||||
// // heatmap.onClick((event) => {
|
||||
// // new mapboxgl.Popup()
|
||||
// // .setLngLat(event.coordinates)
|
||||
// // .setHTML(`
|
||||
// // <h3>Hexagon Data</h3>
|
||||
// // <p>Points: ${event.properties.count}</p>
|
||||
// // <p>Density: ${event.properties.normalizedValue.toFixed(2)}</p>
|
||||
// // `)
|
||||
// // .addTo(map);
|
||||
// // });
|
||||
|
||||
// // Example of updating data later
|
||||
// // document.getElementById('update-btn').addEventListener('click', () => {
|
||||
// // fetch('new-data.json')
|
||||
// // .then(res => res.json())
|
||||
// // .then(newData => heatmap.updateData(newData));
|
||||
// // });
|
||||
// });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue