react-mapbox-gl - npm

A React binding of mapbox-gl-js. Latest version: 5.1.1, last published: 2 years ago. Start using react-mapbox-gl in your project by running ... react-mapbox-gl5.1.1 • Public • Published2yearsagoReadmeExploreBETA5Dependencies93Dependents142Versions 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:   

    ...       // ES6import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css'; // ES5var ReactMapboxGl = require('react-mapbox-gl');var Layer = ReactMapboxGl.Layer;var Feature = ReactMapboxGl.Feature;require('mapbox-gl/dist/mapbox-gl.css'); const Map = ReactMapboxGl({  accessToken:    'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'}); // in render(); 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 Keywordsmapboxreactmapwebglmapbox-glreact-componentInstallnpmireact-mapbox-glRepositoryGitgithub.com/alex3165/react-mapbox-glHomepagegithub.com/alex3165/react-mapbox-gl#readmeDownloadsWeeklyDownloads43,896Version5.1.1LicenseMITUnpackedSize496kBTotalFiles174Lastpublish2yearsagoCollaboratorsTryonRunKitReportmalware