ready event on <Map> not firing anymore on 8.1.1

[evdama]

I'm on Sapper 0.29.2 where I've worked on a map over the last few days using the following code where on:ready fired as expected:

              <Map
                accessToken=ROLLUP_MAPBOX_EDM_DEFAULT_PUBLIC_ACCESS_TOKEN
                bind:this={ mapComponent }
                bind:zoom
                on:click={ toggleStyle }
                on:ready={ () => console.log('inline ready event...') }
                on:dragend={ colorizeBuildings }
                on:dragend={ showUrbanAreas }
                on:zoomend={ colorizeBuildings }
                on:zoomend={ showUrbanAreas }
                on:zoomstart={ toggleStyle }
                options={{ attributionControl: false, antialias: true }}
                style = { $userStore.userCurrenMapBoxTheme }
              >

1. However, after upgrading from 7.7.1 to 8.1.1 on:ready doesn't fire anymore i.e in the above snippet console.log() never prints to the console? 🤔
2. What I also noticed just now is that bind:zoom stopped working i.e. using { zoom } somewhere on the page to show the user his current zoom level worked in 7.7.1 but stopped working after upgrading to version 8.1.1

@antony does on:ready work for you at this point i.e. using 8.1.1? I just went back to 7.7.1 and all works again, no change to my source, just downgrading svelte-mapbox 🤷‍♂️

[antony]

Hey @evdama - it's possible I broke some events, and it looks like, possibly broke the zoom binding.

I'll try to fix these issues asap.

[antony]

Ok, I've fixed the events, not sure how to handle the bindings at all since it all lives inside an action now, and that means I can't do anything reactive. that needs some thought I guess.

I considered putting all the values in stores - so maybe I'll be able to do this sometime soon, but I don't have time right now.

[evdama]

Excellent, thanks much!

Another nice event to have would be dragstart next to dragend https://github.com/beyonk-adventures/svelte-mapbox/blob/4d804dd2a8534e2017c5de426f4a648add76ce3f/src/lib/map/map-action.js#L38

Also, why is moveend called recentre? Why not take the event names as-is from mapbox-gl-js? Just curios 😄 https://github.com/beyonk-adventures/svelte-mapbox/blob/4d804dd2a8534e2017c5de426f4a648add76ce3f/src/lib/map/map-action.js#L44

[evdama]

Ok, I've fixed the events, not sure how to handle the bindings at all since it all lives inside an action now, and that means I can't do anything reactive. that needs some thought I guess.

Yes, ok, the Readme still mentions bindings i.e. somebody installing svelte-mapbox today would be very confused as it's not working as described.

I considered putting all the values in stores - so maybe I'll be able to do this sometime soon, but I don't have time right now.

Roger Roger... It's just really really nice if you can show reactively updated values to the user such as

<div class="flex flex-row justify-center">Your Current Zoom Level: { zoom }</div>

[antony]

Yep - I'll have a think on this or wait for somebody smarter to come up with a solution!

[evdama]

@antony What do you think about having dragstart like mentioned above?

[antony]

@evdama If it's useful, then yeah I think dragstart would be a useful event.

[jesi-rgb]

just boosting this here, as in mapbox ^9.1.0 the zoom and center bindings still do not work :(