"minimal" mode

[jywarren]

We should make it possible to show lots of layers in a minimal mode with small dots you can click on, kind of like these screenshots:

We could color them differently, and it could allow us to show more layers if we wanted to. They could be colored based on the listing shown in this mockup: #60 (comment)

Once this mode is off, we could re-show the larger icons for everything!

[avsingh999]

@jywarren @gauravano can you explain more?
thank you : )

[jywarren]

Basically looking for a way to turn all the markers into smaller, standardized "dots" of different colors, rather than their full icons. So that we can show more layers without filling up the screen!

[avsingh999]

Okay, we will have to change all layer Icon into small dots. Am I right or not @jywarren .
Thank you : )

[jywarren]

Yes, but we would want this to be toggle-able, so we'd want to preserve the previous icon, too!

…

On Tue, Mar 5, 2019 at 12:57 PM Avkaran Singh ***@***.***> wrote: Okay, we will have to change all layer Icon into small dots. Am I right or not @jywarren <https://github.com/jywarren> . Thank you : ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#123 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJwCypr63BAcQ_saNKCtdE4ZfJ5Nuks5vTq_6gaJpZM4bVntH> .

[avsingh999]

@jywarren I want to try to solve this issue.

[jywarren]

that'd be great!

…

On Tue, Mar 5, 2019 at 10:49 PM Avkaran Singh ***@***.***> wrote: @jywarren <https://github.com/jywarren> I want to try to solve this issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#123 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-xJ29q_H1qErTyKNla8XjYbWK9Pks5vTzqNgaJpZM4bVntH> .

[rkpattnaik780]

@jywarren what about using a floating action button to toggle between marker icons and dots?

[jywarren]

This could work, but actually we may want to make a general-purpose JavaScript method to do the toggling, and then demonstrate it with a button (but apart from the demo, leave it to whoever's using the library to decide how this will be triggered). Make sense? Thank you for your input!!!

…

On Mon, Mar 25, 2019 at 1:39 PM Ramakrishna Pattnaik < ***@***.***> wrote: @jywarren <https://github.com/jywarren> what about using a floating action button to toggle between marker icons and dots? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#123 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJzFjQqm3DHsWRiEg6hd2-7yEj8mUks5vaQmsgaJpZM4bVntH> .

[crisner]

After looking at different ways of doing this, I think we can use leaflet's circle marker to simplify layer markers and render them on canvas instead of creating separate DOM elements for each marker to improve performance. I tried this out in EonetFiresLayer and this is how it looks:

I am planning to match the styling to the ones shown in the first comment to give it a more 'standardized' look. From what I see we will have edit each layer to conditionally choose the right marker depending upon the mode but would try to check if there is a better way of doing this.

@jywarren and @sagarpreet-chadha, what do you think?

[jywarren]

Oh this is really nice, thanks! One note on performance is that although I'm sure Leaflet has plenty of ways to manage complexity and make canvas markers a bit simpler to work with, but generally DOM markers are handled pretty efficiently by the browser until a few hundred, and are worth it because the browser handles events, whereas with canvas the event handling is written in JavaScript. That got me on the unearthing layer, but since that has 15k markers, there was no other way to do it-- i used the glify library and so that was on a GPU-accelerated 3d canvas. None of this changes your decision which I think is great -- just trying to provide some extra context for this sort of decisionmaking, having worked with lots of markers in the past! Thank you!

…

On Tue, Jan 14, 2020 at 8:05 AM Renisha Christie. A < ***@***.***> wrote: After looking at different ways of doing this, I think we can use leaflet's circle marker to simplify layer markers and render them on canvas instead of creating separate DOM elements for each marker to improve performance. I tried this out in EonetFiresLayer and this is how it looks: [image: 127 0 0 1_5500_example_index html (7)] <https://user-images.githubusercontent.com/29401459/72345918-d9adee80-36fa-11ea-8181-02d527c53e73.png> I am planning to match the styling to the ones shown in the first comment to give it a more 'standardized' look. From what I see we will have edit each layer to conditionally choose the right marker depending upon the mode but would try to check if there is a better way of doing this. @jywarren <https://github.com/jywarren> and @sagarpreet-chadha <https://github.com/sagarpreet-chadha>, what do you think? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#123?email_source=notifications&email_token=AAAF6J5W4J52LSB5R4CHUJ3Q5W2DHA5CNFSM4G2WPND2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI4Q32A#issuecomment-574164456>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J53ORHRUGM2MWB337DQ5W2DHANCNFSM4G2WPNDQ> .

[crisner]

Thanks! Any cons I should be aware of when using canvas for rendering markers? What kind of issues did you have? I looked at glify but it looked like it takes in only geojson data.

[sagarpreet-chadha]

Hey,

So fetching markers icon from some external URL will take time.
Using L.circle i think will remove this latency.

I have one quick question, why do you want to use Canvas?

[crisner]

So fetching markers icon from some external URL will take time.
Using L.circle i think will remove this latency.

You are right. That's why I decided to go with L.circleMarker.

I have one quick question, why do you want to use Canvas?

Well, since we do not have a lot of markers in layers other than open sense and air quality index this may be redundant. I was hoping to reduce the page lag because of the number of marker elements in the dom in case the user turns on multiple layers and especially if one of those layers turn out to be layers like air quality index. What do you think? Should we deal with performance issues as a separate issue?

[sagarpreet-chadha]

Okay yes makes sense.
Can you try using L.circle for heavy layers and see if this still lags? (I am hoping this should not lag!)

Otherwise if it lags, then it makes sense to invest time in Canvas. Thanks!

[crisner]

Awesome. By the way, just to be clear, according to the docs L.circle is an obsolete way to instantiate circles. So, I will be using L.circleMarker which extends path and instantiates a circle marker.

[jywarren]

I found that after 500-1000 markers, DOM markers slowed down a lot on slower devices. I had to actually modify glify (and had meant to submit the changes upstream, need to make a todo for this) because there's some complexity to how to determine which points to send a "click" to when someone clicks on a canvas. I think it's a clustering algorithm... thing. I fixed it in the library but it hurt my brain a bit. I think if you use a standard library it should be OK, and this should be handled for you!

[crisner]

Yes, I was expecting to have issues on clicks when I tried it out but it was handled in leaflet. Worked just like regular markers.