frontend icon indicating copy to clipboard operation
frontend copied to clipboard

三層 zoom in level 有不同的 cluster,取消隨機顯示 pin

Open aelcenganda opened this issue 4 years ago • 27 comments

Is your feature request related to a problem? Please describe. 目前打開一個地點的時候,之前因為效率問題,會只先 load 一定距離內的工廠。所以使用者如果 zoom out,就會看起來台灣其他地區沒有工廠。

Describe the solution you'd like 不知道現在做的 cluster 之後,可以顯示全台灣 cluster 後的工廠數量嗎?

可能的解法,在不同的 zoom-in level 設定 cluster 的方式:

  • 全台灣:各縣市 cluster
  • 縣市:各鄉鎮 (以上這兩個已經有 API 給 about page 了)

順便解除 random 顯示 100 個工廠,然後移動地圖時會有新工廠冒出來讓使用者很困惑的問題。 (當初只顯示 100 個是因為 performance 和太擠了)

Describe alternatives you've considered

Additional context

aelcenganda avatar Sep 28 '21 08:09 aelcenganda

螢幕快照 2021-09-28 下午5 21 52

aelcenganda avatar Sep 28 '21 09:09 aelcenganda

Part of the reason is our API says:

`range` should be within 0.01 to 100 km, but got 236.0

when we zoom out really far. So we could I guess check if range goes above that, set a flag to, when it goes back below it, reset the list to the new region?

komali2 avatar Oct 28 '21 06:10 komali2

Hm actually if you zoom in and wait it does reset the request, it just takes a while.

I wonder if we could have some server-side clustering, even just a simple .count() query when range > 100?

komali2 avatar Oct 28 '21 06:10 komali2

The original range setting limit was to load the webpage faster. Another related setting is to show some random pins first while loading all pins in the range.

I don’t know if the cluster feature already improves the loading performance. If so, we can change the range limit and random display while loading.

aelcenganda avatar Oct 28 '21 06:10 aelcenganda

I can try this and test.

komali2 avatar Nov 01 '21 03:11 komali2

可能的解法,在不同的 zoom-in level 設定 cluster 的方式:

全台灣:各縣市 cluster
縣市:各鄉鎮
(以上這兩個已經有 API 給 about page 了)

順便解除 random 顯示 100 個工廠,然後移動地圖時會有新工廠冒出來讓使用者很困惑的問題。 (當初只顯示 100 個是因為 performance 和太擠了)

aelcenganda avatar Nov 17 '21 09:11 aelcenganda

related to https://github.com/Disfactory/Disfactory/issues/101

aelcenganda avatar Nov 17 '21 09:11 aelcenganda

Frontend tasks

  1. ~~Limit the maximum zoom size to 20~~
  2. ~~Make clustering supports 3 different ranges, for example:~~
    • ~~from zoom 9 to 13: cluster factories by x km~~
    • ~~from zoom 13 to 17: cluster factories by y km~~
    • ~~from 17 to 20: disabled clustering~~

⬆ Sorry it's wrong.

Backend task

  • Disable return factories randomly in the backend API or add a new api endpoint for this @Swind

Yukaii avatar Dec 01 '21 11:12 Yukaii

Try downloading whole factory list

komali2 avatar Dec 01 '21 11:12 komali2

Still need to have a conversation on how to download this whole list - surely we can dump the DB from the production deployment? Back it up, basically?

komali2 avatar Dec 22 '21 07:12 komali2

Just realized I misinterpreted ael's issue. 😓

We need to implement:

  • 3 different layers for display cluster
    • The highest zoom level: The original cluster, but with unlimited factories, not randomly selected factories (reflected to backend, no need to change)
    • At a smaller zoom level (zoom out a bit): Display factories number by the district as static pins.
    • At the smallest zoom level (zoom out so you can see most of Taiwan): Display factories number by county.

For the last two layers, we need another API to map district/county name to location.

Yukaii avatar Dec 22 '21 12:12 Yukaii

https://docs.google.com/spreadsheets/d/1wCLyRF1szd1p3_4N09k9W_dL9l84xFFXuT22Xwa6qdg/edit?usp=sharing

@komali2 Here's the location data of each district/county/city

Yukaii avatar Dec 22 '21 13:12 Yukaii

https://staging.disfactory.tw/api/factories?lng=121.44787073135184&lat=25.07&range=10

Now returns 145 factories, and

https://staging.disfactory.tw/api/factories?lng=121.44787073135184&lat=25.07&range=11

will be limited to 50

Yukaii avatar Dec 22 '21 13:12 Yukaii

@DoraLyn20 , one of our designers, drew a mockup and brought up an issue that users may not know they can upload photos to report a factory.

She may work on the redesign for that.

aelcenganda avatar Jan 26 '22 12:01 aelcenganda

Here's a snippet of the design's progress so far. Will further define what kind of info that needs to be shown with what style.

image

DoraLyn20 avatar Jan 26 '22 12:01 DoraLyn20

Wow that looks sick. I'm finally back from huandao so can start working on this again!

komali2 avatar Feb 07 '22 06:02 komali2

Design updated at Figma here.

image

DoraLyn20 avatar Mar 09 '22 10:03 DoraLyn20

Oh perfect, thank you!!!

komali2 avatar Mar 15 '22 07:03 komali2

https://github.com/g0v/twgeojson - geoJSON format https://github.com/dkaoster/taiwan-atlas - topoJSON format

If we are only displaying admin boundaries 縣市 when zoomed out, we can use a simplified static topoJSON file and color it dynamically. This won't work however if we need to display them in fine detail when zoomed in

bdon avatar Apr 09 '22 06:04 bdon

@bdon Could you elaborate more on the limitation when zoomed in?

Yukaii avatar Apr 09 '22 06:04 Yukaii

Limitation on zoom in should not be issue. original TopoJSON including all 縣市/區 is small enough (<300kb uncompressed)

however, statistics API should return one list of all 區. If front-end is interested in 縣市 instead, it can do sum logic on frontend.

[
  {
    "district": "萬里區",
    "county": "新北市",
    "factories": 0,
    "report_records": 0,
    "documents": 0,
    "未處理": 0,
    "處理中": 0,
    "已斷電": 0,
    "已拆除": 0
  },
  {
    "district": "新店區",
    "county": "新北市",
    "factories": 0,
    "report_records": 0,
    "documents": 0,
    "未處理": 0,
    "處理中": 0,
    "已斷電": 0,
    "已拆除": 0      
  }
]

bdon avatar Apr 09 '22 07:04 bdon

https://github.com/Disfactory/frontend/commit/a341cceca608bb6dfe92910f31a4eabef53af6e1 has basic implementation however

  • clicking on choropleth causes NaN, NaN navigation error
  • opacity is incorrect
  • need to make topoJSON selection dependent on zoom
  • need to populate colors with data from API

bdon avatar Apr 09 '22 08:04 bdon

Problem One issue appeared in our field testing is that some clusters couldn't split into individual pins even at the largest zoom-in level. The problem for users is that they can't open the info toggle of one factory in clusters, which means they can't review or edit one factory's info page. As the result, they tend to add one more pin very near the existing ones, which later would be merged into a cluster that can't never be separated on our map.

Another reasons may be the data from government sources. There are couples of coordinates only 0.5 cm apart, which our current algorithm would definitely cluster those records into one.

disfactory_cluster_bug

Describe the solution you'd like Cancel cluster features after a certain zoom-in level or on the whole map since we now have other approaches to solve the performance issue and information display of too many pins.

aelcenganda avatar Apr 13 '22 10:04 aelcenganda

Problem One issue appeared in our field testing is that some clusters couldn't split into individual pins even at the largest zoom-in level. The problem for users is that they can't open the info toggle of one factory in clusters, which means they can't review or edit one factory's info page. As the result, they tend to add one more pin very near the existing ones, which later would be merged into a cluster that can't never be separated on our map.

Another reasons may be the data from government sources. There are couples of coordinates only 0.5 cm apart, which our current algorithm would definitely cluster those records into one.

disfactory_cluster_bug

Describe the solution you'd like Cancel cluster features after a certain zoom-in level or on the whole map since we now have other approaches to solve the performance issue and information display of too many pins.

@aelcenganda This issue was solved in https://github.com/Disfactory/frontend/pull/153 (not yet delivered to production)

Yukaii avatar Apr 13 '22 12:04 Yukaii

@bdon In the discussion today, we decide to build statistic layers only for the city/county(縣市), not at the district level.

So the new 3 zoom-in levels would be:

  • County/District layer
  • Current Cluster
  • Un-cluster (zoom > 16 #153)

Yukaii avatar Apr 13 '22 14:04 Yukaii

Here's a snippet of the design's progress so far. Will further define what kind of info that needs to be shown with what style.

image

討論筆記:

分三層:

  • 縣市(不做鄉鎮市層級區分)
  • cluster
  • 獨立 pin (Zoom level > 16)

使用原本開給 about.disfactory.tw 的 API

aelcenganda avatar Apr 14 '22 08:04 aelcenganda

設計圖已更新

現在 cluster分三層

  • Zoom level < 10:依縣市 cluster (沒有filter功能)
  • Zoom level 10-16:依工廠密度 cluster
  • Zoom level > 16:獨立 pin

DoraLyn20 avatar Apr 16 '22 14:04 DoraLyn20