Marker - react-map-gl

React component that wraps Marker. ... If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted ... ChevronDownIntroductionIntroductionWhat'snewUpgradeGuideContributingtoreact-map-glChevronDownDeveloperGuideGetStartedAboutMapboxTokensStateManagementAddingCustomDataTipsandTricksChevronDownAPIReferencedefault(Map)AttributionControlFullscreenControlGeolocateControlLayerMapProviderMarkerNavigationControlPopupScaleControlSourceuseControluseMapTypesMarkerReactcomponentthatwrapsMarker.import*asReactfrom'react'; importMap,{Marker}from'react-map-gl'; functionApp(){ return; }IfMarkerismountedwithchildcomponents,thenitscontentwillberenderedtothespecifiedlocation.Ifitismountedwithnocontent,thenadefaultmarkerwillbeused.PropertiesRenderoptionsanchor:'center'|'left'|'right'|'top'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'Default:'center'AstringindicatingthepartoftheMarkerthatshouldbepositionedclosesttothecoordinatesetvialongitudeandlatitude.color:stringDefault:'#3FB1CE'Thecolortouseforthedefaultmarkerifthecomponentcontainsnocontent.clickTolerance:numberDefault:null(inheritsMap'sclickTolerance)Themaxnumberofpixelsausercanshiftthemousepointerduringaclickonthemarkerforittobeconsideredavalidclick(asopposedtoamarkerdrag).draggable:booleanDefault:falseIftrue,themarkerisabletobedraggedtoanewpositiononthemap.latitude:numberRequired.Thelatitudeoftheanchorlocation.longitude:numberRequired.Thelongitudeoftheanchorlocation.offset:PointLikeDefault:nullTheoffsetinpixelsasaPointLikeobjecttoapplyrelativetotheelement'scenter.Negativesindicateleftandup.pitchAlignment:'map'|'viewport'|'auto'Default:'auto'mapalignstheMarkertotheplaneofthemap.viewportalignstheMarkertotheplaneoftheviewport.autoautomaticallymatchesthevalueofrotationAlignment.rotation:numberDefault:0Therotationangleofthemarkerindegrees,relativetoitsrotationAlignmentsetting.Apositivevaluewillrotatethemarkerclockwise.rotationAlignment:'map'|'viewport'|'auto'Default:'auto'mapalignstheMarker'srotationrelativetothemap,maintainingabearingasthemaprotates.viewportalignstheMarker'srotationrelativetotheviewport,agnostictomaprotations.autoisequivalenttoviewport.scale:numberDefault:1Thescaletouseforthedefaultmarkerifthecomponentcontainsnocontent. Thedefaultscale(1)correspondstoaheightof41pxandawidthof27px.Thispropisnotreactive(onlyusedwhenthemarkerismounted).style:CSSPropertiesCSSstyleoverridethatappliestothemarker'scontainer.CallbacksonClick:(evt:MapEvent)=>voidCalledwhenthemarkerisclickedon.onDragStart:(evt:MarkerDragEvent)=>voidCalledwhendraggingstarts,ifdraggableistrue.onDrag:(evt:MarkerDragEvent)=>voidCalledwhiledragging,ifdraggableistrue.onDragEnd:(evt:MarkerDragEvent)=>voidCalledwhendraggingends,ifdraggableistrue.Sourcemarker.ts