Layer - react-map-gl

This component allows apps to create a map layer using React. import * as React from 'react'; import Map, {Layer} from 'react-map-gl'; const parkLayer ... ChevronDownIntroductionIntroductionWhat'snewUpgradeGuideContributingtoreact-map-glChevronDownDeveloperGuideGetStartedAboutMapboxTokensStateManagementAddingCustomDataTipsandTricksChevronDownAPIReferencedefault(Map)AttributionControlFullscreenControlGeolocateControlLayerMapProviderMarkerNavigationControlPopupScaleControlSourceuseControluseMapTypesLayerThiscomponentallowsappstocreateamaplayerusingReact.import*asReactfrom'react'; importMap,{Layer}from'react-map-gl'; constparkLayer={ id:'landuse_park', type:'fill', source:'mapbox', 'source-layer':'landuse', filter:['==','class','park'], paint:{ 'fill-color':'#4E3FC8' } }; functionApp(){ return; }PropertiesThepropsprovidedtothiscomponentshouldbeconformingtotheMapboxlayerspecification.Whenpropschangeshallowly,thecomponentwillperformstylediffingtoupdatethelayer.Avoiddefiningconstantobjects/arraysinlinemayhelpperformance.IdentityPropertiesOnceaismounted,thefollowingpropsshouldnotchange.Ifyouadd/removemultipleJSXlayersdynamically,makesureyouuseReact'skeyproptogiveeachelementastableidentity.id:stringUniqueidentifierofthelayer.Ifnotprovided,adefaultidwillbeassigned.type:stringRequired.Typeofthelayer.OptionsbeforeId:stringTheIDofanexistinglayertoinsertthislayerbefore.Ifthispropisomitted,thelayerwillbeappendedtotheendofthelayersarray.ThisisusefulwhenusingdynamiclayerswithamapstylefromaURL.Notethatlayersareaddedbytheorderthattheymount.TheyareNOTreorderedlateriftheirrelativepositionsintheJSXtreechange.Ifdynamicreorderingisdesired,youshouldmanipulatebeforeIdforconsistentbehavior.source:stringsourceisrequiredbysomelayertypesintheMapboxstylespecification.IfisusedasthechildofaSourcecomponent,thispropwillbeoverwrittenbytheidoftheparentsource.Sourcelayer.ts