A React binding of mapbox-gl-js - GitHub

ReactMapboxGL · Layer & Feature. property symbol displays a mapbox symbol. property line displays a lineString. property fill displays a polygon. property circle ... Skiptocontent {{message}} alex3165 / react-mapbox-gl Public Notifications Fork 501 Star 1.7k AReactbindingofmapbox-gl-js alex3165.github.io/react-mapbox-gl/ License MITlicense 1.7k stars 501 forks Star Notifications Code Issues 197 Pullrequests 47 Actions Projects 0 Wiki Security Insights More Code Issues Pullrequests Actions Projects Wiki Security Insights alex3165/react-mapbox-gl Thiscommitdoesnotbelongtoanybranchonthisrepository,andmaybelongtoaforkoutsideoftherepository. master Branches Tags Couldnotloadbranches Nothingtoshow {{refName}} default Couldnotloadtags Nothingtoshow {{refName}} default 33 branches 154 tags Code Latestcommit mklopets 5.1.1 … 6507a22 Nov26,2020 5.1.1 6507a22 Gitstats 1,073 commits Files Permalink Failedtoloadlatestcommitinformation. Type Name Latestcommitmessage Committime docs Addmapboxcssguidelinetoapidoc Oct24,2020 example feat:handleupdatestoSourcetileJsonSourcepropmoregracefully(#914 Nov24,2020 scripts Adddependenciesmismatch Oct15,2018 src fix:compareagainstcorrectdata Nov26,2020 .editorconfig Addeditorconfigconfigurationfile Oct1,2017 .gitignore Gitignorepackage-lock.json Oct19,2019 .npmignore Create.npmignore May6,2020 .prettierrc RemoveformatOnSaveinprettierrc Feb12,2018 .travis.yml Updatesegmentcount Oct19,2019 CHANGELOG.md Updatechangelog Sep11,2017 LICENSE Initialcommit Apr16,2016 README.md Updatereadmewithhtmlinstructions Oct24,2020 index.html Removeoutlineonexample Apr20,2016 logo.png Updatereadme Jun17,2017 logo.svg Improvereadme Jun11,2017 package-lock.json 5.1.1 Nov26,2020 package.json 5.1.1 Nov26,2020 tsconfig-esm.json Exposeesmbuild Oct19,2018 tsconfig.json EnablingesModuleInterop Oct19,2019 tslint.json Fixsomeanytypes Nov15,2017 Viewcode React-mapbox-gl|Documentation|Demos Reactwrapperformapbox-gl-js. Components Proxycomponents(proxybetweenReactandMapboxAPI) DOMcomponents(normalReactcomponents) GettingStarted Whyarezoom,bearingandpitchArrays? Currentversiondocumentation Version3.0documentation Version2.0documentation Contributions mapbox-gl-drawcompatibility LookingforanAngularalternative? README.md React-mapbox-gl|Documentation|Demos Reactwrapperformapbox-gl-js. Components Proxycomponents(proxybetweenReactandMapboxAPI) ReactMapboxGL Layer&Feature propertysymboldisplaysamapboxsymbol. propertylinedisplaysalineString. propertyfilldisplaysapolygon. propertycircledisplaysamapboxcircle. propertyrasterdisplaysamapboxrastertiles. propertyfill-extrusiondisplaysalayerwithextrudedbuildings. propertybackgrounddisplaysamapboxbackgroundlayer. propertyheatmapdisplaysamapboxheatmaplayer. Source GeoJSONLayer DOMcomponents(normalReactcomponents) ZoomControl ScaleControl RotationControl Marker(Projectedcomponent) Popup(Projectedcomponent) Cluster GettingStarted npminstallreact-mapbox-glmapbox-gl--save Example: Addingthecssinyourindex.html:

... //ES6 importReactMapboxGl,{Layer,Feature}from'react-mapbox-gl'; import'mapbox-gl/dist/mapbox-gl.css'; //ES5 varReactMapboxGl=require('react-mapbox-gl'); varLayer=ReactMapboxGl.Layer; varFeature=ReactMapboxGl.Feature; require('mapbox-gl/dist/mapbox-gl.css'); constMap=ReactMapboxGl({ accessToken: 'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A' }); //inrender() ; Whyarezoom,bearingandpitchArrays? Ifthosepropertieschangedatthemapbox-gl-jslevelandyoudon'tupdatethevaluekeptinyourstate,itwillbeunsyncedwiththecurrentviewport.Atsomepointyoumightwanttoupdatetheviewportvalue(zoom,pitchorbearing)withtheonesinyourstatebutusingvalueequalityisnotenough.Takingzoomasexample,youwillstillhavetheunsyncedzoomvaluethereforewecan'ttellifyouwanttoupdatethepropornot.Inordertoexplicitlyupdatethecurrentviewportvaluesyoucaninsteadbreakthereferencesofthosepropsandreliablyupdatethecurrentviewportwiththeoneyouhaveinyourstatetobesyncedagain. Currentversiondocumentation Version3.0documentation Version2.0documentation Contributions Pleasetrytoreproduceyourproblemwiththeboilerplatebeforepostinganissue. mapbox-gl-drawcompatibility Tryreact-mapbox-gl-draw LookingforanAngularalternative? Tryngx-mapbox-gl About AReactbindingofmapbox-gl-js alex3165.github.io/react-mapbox-gl/ Topics react map mapbox-gl mapbox-gl-js react-mapbox-gl Resources Readme License MITlicense Stars 1.7k stars Watchers 24 watching Forks 501 forks Releases 40 ImportantwarningfixesandremoveautomaticinjectionofCSS Latest Oct24,2020 +39releases Packages0 Nopackagespublished Contributors72 +61contributors Languages TypeScript 93.7% CSS 3.1% HTML 2.5% Other 0.7% Youcan’tperformthatactionatthistime. Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession. Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.