React-mapbox-gl: Unable to hook into Mapbox API for adding ...

2024-11-10

文章推薦指數： 80 %

投票人數：10人

I am using react-mapbox-gl in my next application, according to the documentation: onStyleLoad: (map, loadEvent) => void called with the ... Resultsfromthe2022DeveloperSurveyarehere. Home Public Questions Tags Users Companies Collectives ExploreCollectives Teams StackOverflowforTeams –Startcollaboratingandsharingorganizationalknowledge. CreateafreeTeam WhyTeams? Teams CreatefreeTeam Collectives™onStackOverflow Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost. Learnmore Teams Q&Aforwork Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch. Learnmore React-mapbox-gl:UnabletohookintoMapboxAPIforadding3Dterraintoamap AskQuestion Asked 1monthago Modified 1monthago Viewed 61times 1 Iamusingreact-mapbox-glinmynextapplication,accordingtothedocumentation: onStyleLoad:(map,loadEvent)=>voidcalledwiththeMapboxMap instancewhentheloadeventisfired.Youcanusethecallback's firstargumenttotheninteractwiththeMapboxAPI. ThisexposesapropwhichallowsonetointeractwithMapboxAPIdirectly,andthathasworkedinregardstoaddingaGeocoderandGeoLocationControlbutdoesnotworkinregardstoadding3dterrain. Thisismymapcomponent: import{useCallback,useEffect,useRef}from'react' importReactMapboxGl,{RotationControl,ZoomControl}from"react-mapbox-gl"; importmapboxglfrom'mapbox-gl'; importMapboxGeocoderfrom'@mapbox/mapbox-gl-geocoder'; constmapAccess={ mapboxApiAccessToken:process.env.MAPBOX_ACCESS_TOKEN } constMap=ReactMapboxGl({ accessToken:process.env.MAPBOX_ACCESS_TOKEN, logoPosition:'bottom-right', pitchWithRotate:true }); exportdefaultfunctionMyMap(){ return( <> { map.addSource('mapbox-dem',{ 'type':'raster-dem', 'url':'mapbox://mapbox.mapbox-terrain-dem-v1', 'tileSize':512, 'maxzoom':14 }); map.setTerrain({'source':'mapbox-dem','exaggeration':1.5}); map.addLayer({ 'id':'sky', 'type':'sky', 'paint':{ 'sky-type':'atmosphere', 'sky-atmosphere-sun':[0.0,0.0], 'sky-atmosphere-sun-intensity':15 } });map.on('load',()=>{ console.log('load') }); map.addControl( newMapboxGeocoder({ accessToken:mapboxgl.accessToken, mapboxgl:mapboxgl, position:'top-right' }) ); map.addControl( newmapboxgl.GeolocateControl({ positionOptions:{ enableHighAccuracy:true }, trackUserLocation:true, showUserHeading:true, showAccuracyCircle:true, position:'top-left' }) ); }} > > ) } Anyideawhythisisnotworking? Thanksinadvance! reactjsmapbox-gl-jsreact-mapbox-gl Share Follow askedMay6at14:01 AntonioPavicevac-OrtizAntonioPavicevac-Ortiz 6,1891111goldbadges4747silverbadges119119bronzebadges Addacomment | 0 Sortedby: Resettodefault Highestscore(default) Trending(recentvotescountmore) Datemodified(newestfirst) Datecreated(oldestfirst) Knowsomeonewhocananswer?Sharealinktothisquestionviaemail,Twitter,orFacebook. YourAnswer ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers. Draftsaved Draftdiscarded Signuporlogin SignupusingGoogle SignupusingFacebook SignupusingEmailandPassword Submit Postasaguest Name Email Required,butnevershown PostYourAnswer Discard Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy Browseotherquestionstaggedreactjsmapbox-gl-jsreact-mapbox-gloraskyourownquestion. TheOverflowBlog ExpertsfromStripeandWaymoexplainhowtocraftgreatdocumentation(Ep.455) Askedandanswered:theresultsforthe2022Developersurveyarehere! FeaturedonMeta AnnouncingthearrivalofValuedAssociate#1214:Dalmarus Testingnewtrafficmanagementtool AskWizardTestResultsandNextSteps Trending:Anewanswersortingoption Related 3 AddingaTilesetfrommapboxintomymap 428 ReactHookWarningsforasyncfunctioninuseEffect:useEffectfunctionmustreturnacleanupfunctionornothing 1 uber/react-map-glgetMap&exposedMapboxAPI 3 ReactMapBoxGLgeocoderinputoutsidethemapisthatpossible? 3 CustomDEMfor3DTerraininMapboxGLJSV2 0 React+MapboxGL:StateofArrayofMapComponentsnotupdatingonMapEvent 0 Mapbox&React:Unabletoinputvaluesintosearchbox 0 SizeofthemapwhenredenringmapboxinReact HotNetworkQuestions ExportingresultscontainingEntitiestoJSON? Howisenergy"storedinanelectricfield"? Howcandemocracynotbetheruleofthepoor? WouldpubliclyfartingonapictureoftheEnglishmonarchactuallyqualifyastreasonin1798? WeknowClassicalMechanicsiswrong.ButcanwealsosayeveryothertheoryiswrongexcepttheTheoryofEverything? Runningfiberline Doestheuseoffrontsuspensionnegativelyaffectroadridingefficiency? Ifaplayercastsaspellofunlimiteddurationandretrainsoutofit,doesthespellremainactive? BookaboutanaliencivilizationthatsendskidstoberaisedonEarth HowdidTgetintotheagency? InP.J.Plauger's"TheStandardCLibrary"(1992),whyareforloopsusedsofrequentlyinsteadofwhileloopsintheimplementations? Canaclericofthegrave'sgodbeSarenrae? NaturalMedicinewithBattleMedicine Differenceusing的here1)这道菜味道很好and2)这道菜的味道很好 DC/DCConverternotoutputtingthecorrectvoltage Whatdoyoucallthepointypartsofatextbubblethat'snotthetail? HowdoesanObjectateventhorizonstoptotheobserver? Whatarebestpracticesfortestingtheabsenceoffunctionality Maintainingunitformationwhilefollowingpath ShouldIcitenon-peerreviewedworkthathelpedinmyresearchinapeer-reviewedpublication? Whatdoes"ifinlocation"contextmeaninNginx? HowcanIimprovemyphotoofanightcitylandscapewithastarrysky? IntheISO1990Cstandardlibrary,whatwastherationaleforhavingmemcpyreturnoneofitsinputs? Whyusedecltypeonatemplateargument? morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. lang-js Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings