frontend
frontend copied to clipboard
Replaced circle markers with modified canvas markers from @simerca/vu…
Hi, I want to start off by saying I'm grateful for the project, it allowed me to move away from google and have more control over my data.
This modification is due to quite slow rendering of point markers on the map for larger datasets. I imported my data from google, which contains around 1.3 mil locations and I hoped I would be able to see at least portions of them, but with current way of rendering them (as separate DOM elements).
Performance
Currently loading a month of data (~7000 points) with current approach I'm barely able to move around, getting a frame every few seconds. With the canvas approach for the same amount of data, moving is very fluid and responsive except minor stutters which I think can be fixed (loading points during movement) Now I'm actually able to load over 200k points and it's still (mostly) usable so I think it's a great improvement and I don't see a reason as to why not implement it.
Now I also want to say that this branch is very WIP, but I literally never touched Vue before that attempt so I'm still not sure how, but I know that there's ways of doing this properly (unlike I did).
I used Vue component from simerca, and I just pasted it into the project (I'm sure there's a way better way to import it), but I also modified it a bit so this might pose a problem.
Things still left to do:
- Correct zoom animation (right now the points just pop into correct place after animation finishes)
- Device location popups after clicking a marker - I'm unsure how to go about this, but my attempts are at my fork. We can set a callback and get back location from the canvas markers, (maybe there's a way to save more data in the markers?)
I don't expect this branch to get merged but I hope for some tips on what I have to do to get this in a state which could be merged. Thanks in advance :)