@urbica/react-map-gl - npm

Start using @urbica/react-map-gl in your project by running `npm i @urbica/react-map-gl` ... Marker, React Component for Mapbox GL JS Marker. @urbica/react-map-gl1.15.0 • Public • Published3monthsagoReadmeExploreBETA2Dependencies7Dependents72Versions UrbicaReactMapboxGLJS ReactComponentLibraryforMapboxGLJS.MapboxGLJSisaJavaScriptlibrarythatrendersinteractivemapsfromvectortilesandMapboxstylesusingWebGL.ThisprojectisintendedtobeascloseaspossibletotheMapboxGLJSAPI. Thisprojectisheavilyinspiredbyuber/react-map-gl. Installation Components Usage StaticMap InteractiveMap MapGLwithSourceandLayer MapGLwithGeoJSONSource CustomLayerssupport Documentation Changelog License Contributing Team Installation npminstall--savemapbox-gl@urbica/react-map-gl ...orifyouareusingyarn: yarnaddmapbox-gl@urbica/react-map-gl OptionalDependencies IfyouwanttousetheLanguageControl: npminstall--save@mapbox/mapbox-gl-language ...orifyouareusingyarn: yarnadd@mapbox/mapbox-gl-language Components Component Description MapGL Representsmaponthepage MapContext ReactContextAPIforthemapinstance Source Sourcesspecifythegeographicfeaturestoberenderedonthemap Layer LayersspecifytheSourcesstyle Filter Setfiltertoexistinglayer CustomLayer Allowausertorenderdirectlyintothemap'sGLcontext Image Addsanimagetothemapstyle Popup ReactComponentforMapboxGLJSPopup Marker ReactComponentforMapboxGLJSMarker FeatureState Setsthestateofageographicfeaturerenderedonthemap AttributionControl Representsthemap'sattributioninformation LanguageControl Addssupportforswitchingthelanguageofthemapstyle FullscreenControl Containsabuttonfortogglingthemapinandoutoffullscreenmode GeolocateControl Geolocatetheuserandthentracktheircurrentlocationonthemap NavigationControl Containszoombuttonsandacompass ScaleControl Displaystheratioofadistanceonthemaptothecorrespondingdistanceontheground Cluster ClusterMarkerswithsupercluster Draw Supportfordrawingandeditingfeatures Usage TouseanyofMapbox’stools,APIs,orSDKs,you’llneedaMapboxaccesstoken.MapboxusesaccesstokenstoassociaterequeststoAPIresourceswithyouraccount.Youcanfindallyouraccesstokens,createnewones,ordeleteexistingonesonyourAPIaccesstokenspage. SeeDocumentationformoreexamples. StaticMap Bydefault,MapGLcomponentrendersinastaticmode.Thatmeansthattheusercannotinteractwiththemap. importReactfrom'react'; importMapGLfrom'@urbica/react-map-gl'; import'mapbox-gl/dist/mapbox-gl.css'; ; InteractiveMap Inmostcases,youwillwanttheusertointeractwiththemap.Todothis,youneedtoprovideonViewportChangehandler,thatwillupdatemapviewportstate. importReact,{useState}from'react'; importMapGLfrom'@urbica/react-map-gl'; import'mapbox-gl/dist/mapbox-gl.css'; const[viewport,setViewport]=useState({ latitude:37.78, longitude:-122.41, zoom:11 }); ; MapGLwithSourceandLayer Sourcesspecifythegeographicfeaturestoberenderedonthemap. LayersspecifytheSourcesstyles.Thetypeoflayerisspecifiedbythe"type"property,andmustbeoneofbackground,fill,line,symbol,raster,circle,fill-extrusion,heatmap,hillshade. Exceptforlayersofthebackgroundtype,eachlayerneedstorefertoasource.Layerstakethedatathattheygetfromasource,optionallyfilterfeatures,andthendefinehowthosefeaturesarestyled. importReactfrom'react'; importMapGL,{Source,Layer}from'@urbica/react-map-gl'; import'mapbox-gl/dist/mapbox-gl.css'; ; MapGLwithGeoJSONSource TodrawaGeoJSONonamap,addSourcewiththetypepropertysettogeojsonanddatapropertysettoaURLorinlineGeoJSON. importReact,{useState}from'react'; importMapGL,{Source,Layer}from'@urbica/react-map-gl'; import'mapbox-gl/dist/mapbox-gl.css'; const[viewport,setViewport]=useState({ latitude:37.830348, longitude:-122.486052, zoom:15 }); constdata={ type:'Feature', geometry:{ type:'LineString', coordinates:[ [-122.48369693756104,37.83381888486939], [-122.48348236083984,37.83317489144141], [-122.48339653015138,37.83270036637107], [-122.48356819152832,37.832056363179625], [-122.48404026031496,37.83114119107971], [-122.48404026031496,37.83049717427869], [-122.48348236083984,37.829920943955045], [-122.48356819152832,37.82954808664175], [-122.48507022857666,37.82944639795659], [-122.48610019683838,37.82880236636284], [-122.48695850372314,37.82931081282506], [-122.48700141906738,37.83080223556934], [-122.48751640319824,37.83168351665737], [-122.48803138732912,37.832158048267786], [-122.48888969421387,37.83297152392784], [-122.48987674713133,37.83263257682617], [-122.49043464660643,37.832937629287755], [-122.49125003814696,37.832429207817725], [-122.49163627624512,37.832564787218985], [-122.49223709106445,37.83337825839438], [-122.49378204345702,37.83368330777276] ] } }; ; CustomLayerssupport Customlayersallowausertorenderdirectlyintothemap'sGLcontextusingthemap'scamera. HereisanUberdeck.glusageexample. importReactfrom'react'; importMapGL,{CustomLayer}from'@urbica/react-map-gl'; import{MapboxLayer}from'@deck.gl/mapbox'; import{ScatterplotLayer}from'@deck.gl/layers'; import'mapbox-gl/dist/mapbox-gl.css'; constmyDeckLayer=newMapboxLayer({ id:'my-scatterplot', type:ScatterplotLayer, data:[{position:[-74.5,40],size:1000}], getPosition:(d)=>d.position, getRadius:(d)=>d.size, getColor:[255,0,0] }); ; Documentation Checkoutdocumentationwebsite. Changelog CheckoutCHANGELOG.mdandreleasespage. License ThisprojectislicensedunderthetermsoftheMITlicense. Contributing Cloneandinstalldependencies gitclonehttps://github.com/urbica/react-map-gl.git cdreact-map-gl npminstall Startreact-styleguidistserver MAPBOX_ACCESS_TOKEN=npmstart whereisavalidMapboxaccesstoken. Runtestswith npmtest Team StepanKuzmin ArtemBoyur AndreyBakhvalov Keywordsmapbox-gl-jsmapbox-glmapboxreactmapboxreactcomponentreact-mapbox-glreacturbicaInstallnpmi@urbica/react-map-glRepositoryGitgithub.com/urbica/react-map-glHomepagegithub.com/urbica/react-map-gl#readmeDownloadsWeeklyDownloads3,583Version1.15.0LicenseMITUnpackedSize415kBTotalFiles26Lastpublish3monthsagoCollaboratorsTryonRunKitReportmalware