Dynamically changing the layer order is not possible #939

Hello, In my use case I have a list of layers whose order can be messed up with. I made this sandbox to test the behaviour of inverting the ... Skiptocontent {{message}} visgl / react-map-gl Public Notifications Fork 1.2k Star 6.6k Code Issues 11 Pullrequests 5 Discussions Actions Security Insights More Code Issues Pullrequests Discussions Actions Security Insights Newissue Haveaquestionaboutthisproject?SignupforafreeGitHubaccounttoopenanissueandcontactitsmaintainersandthecommunity. Pickausername EmailAddress Password SignupforGitHub Byclicking“SignupforGitHub”,youagreetoourtermsofserviceand privacystatement.We’lloccasionallysendyouaccountrelatedemails. AlreadyonGitHub? Signin toyouraccount Jumptobottom Dynamicallychangingthelayerorderisnotpossible #939 Open adrienjopenedthisissue Nov13,2019 ·5comments Open Dynamicallychangingthelayerorderisnotpossible #939 adrienjopenedthisissue Nov13,2019 ·5comments Labels feature Comments Copylink adrienj commented Nov13,2019 • edited Hello,InmyusecaseIhavealistoflayerswhoseordercanbemessedupwith. Imadethissandboxtotestthebehaviourofinvertingthesecondandthirditemsinalistoffour.Theseconditemisputatthetopofthelayering. Reproducethebug: https://codesandbox.io/s/shy-waterfall-fwky3 Itriedaddingthearrayindexinthelayerkeybutthethirdlayergoestothetopinsteadofbellowtheforth.Maybethisisbecausetheforthlayer'skeydidn'tchange,soitisnotkeptaboveallotherlayers? Ialsotriedusingarandomkeyforthelayers.Thiseliminatestheorderissuebutmightbebadforperformance.InthesecondsandboxItriedtodynamicallychangethekeyofthelayersonlyafterachangeinorderandnotoneveryrender. Expectedbehaviour: https://codesandbox.io/s/brave-firefly-zr9oc Ifafixmightbreakotherusecases,maybeanewproptotheLayercomponentthatspecifywewanttokeeptheordercouldbepossible? Thanks Thetextwasupdatedsuccessfully,buttheseerrorswereencountered: Allreactions Copylink Collaborator Pessimistress commented Jan6,2020 YoushouldbeabletoreorderbychangingthebeforeIdprop. 👍 1 chriszrcreactedwiththumbsupemoji Allreactions 👍 1reaction Sorry,somethingwentwrong. Copylink yurivangeffen commented Apr29,2020 Ipersonallyfindthisaveryminimalsolutionthatdoesn'treallyworkifyouwanttoswitchlayersinandoutdynamically.Nowallofasuddenmylayercomponentsneedtoknowofthestateofallotherlayers,weitherthey'reshownornot,etc...Iknowthisiswhat'sexposedbymapbox,butisthereanotherwaytodoorderingproperly,throughkeyforexample? 👍 3 adrienj,maxwell-oroark,andMattReimerreactedwiththumbsupemoji Allreactions 👍 3reactions Sorry,somethingwentwrong. Copylink yurivangeffen commented May7,2020 Iusedadifferentwayoffixingthisformyspecificusecase: Createsomelayersthatarealwayssortedrelativetoeachother.Theyshouldn'thaveanycontent,sowhatIdoisusethe'background'typeandsetvisibilityto'none',e.g.: ['baselayer','some_other_layer','yet_another_one'].map(name=>{ return() }) Foryourdynamiclayers,yousortassignthemasa'child'layerbysettingtheirbeforeId,e.g.: Itseemsthatyoucannowre-assignthebeforeIdtore-sortthelayers.Ifyouwantsomesortofz-indexingyoucouldcreatea100grouplayersstatically('z0'to'z100')andassignthedynamiclayerswiththebeforeId'z'+zIndex.Idon'tknowhowmuchthisimpactsperformancethough. 👍 3 alexnorton,maxwell-oroark,anddafreactedwiththumbsupemoji 🎉 2 dafandchansikyreactedwithhoorayemoji Allreactions 👍 3reactions 🎉 2reactions Sorry,somethingwentwrong. Copylink maxwell-oroark commented Mar22,2021 thanks@yurivangeffen-thisz-indexframeworkwiththeemptylayersworkedwellforme. 🎉 2 yurivangeffenanddafreactedwithhoorayemoji Allreactions 🎉 2reactions Sorry,somethingwentwrong. Copylink eastcoasting commented Aug8,2021 Addingadifferentsolutionastheabovesolutionswereproducingflickeringbetweenreorderingthelayerobject. useEffect(()=>{ if(mapRef){ constmap=mapRef.current.getMap() if(map.loaded()&&topLayer!==null){ map.moveLayer(topLayer) } } },[topLayer]); Allreactions Sorry,somethingwentwrong. Pessimistress added the feature label Mar2,2022 Signupforfree tojointhisconversationonGitHub. Alreadyhaveanaccount? Signintocomment Assignees Nooneassigned Labels feature Projects Noneyet Milestone Nomilestone Development Nobranchesorpullrequests 5participants Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.