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

[aelcenganda]

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]

[komali2]

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]

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?

[aelcenganda]

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.

[komali2]

I can try this and test.

[aelcenganda]

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

全台灣：各縣市 cluster
縣市：各鄉鎮
（以上這兩個已經有 API 給 about page 了）

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

[aelcenganda]

related to
Disfactory/Disfactory#101

[Yukaii]

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

[komali2]

Try downloading whole factory list

[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?

[Yukaii]

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]

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

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

[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

[aelcenganda]

@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.

[DoraLyn20]

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.

[komali2]

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

[DoraLyn20]

Design updated at Figma here.

[komali2]

Oh perfect, thank you!!!

[bdon]

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

[Yukaii]

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

[bdon]

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]

a341cce 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

[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.

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.

[Yukaii]

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.

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 #153 (not yet delivered to production)

[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 Disable clustering at zoom level > 16 [#150] #153)

[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.

討論筆記：

分三層：

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

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

[DoraLyn20]

設計圖已更新

現在 cluster分三層

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