archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-18 15:54:22 +00:00
Code Issues Projects Releases Wiki Activity
react-map-gl/docs/contributing/index.html

95 lines
38 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.32.0"/><title data-react-helmet="true">react-map-gl | Contributing to react-map-gl</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="/react-map-gl/style.css" type="text/css"/><link data-react-helmet="true" rel="icon" type="img/ico" href="favicon.ico"/><meta data-react-helmet="true" name="description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="og:url" content="https://github.com/visgl/*"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:title" content="react-map-gl | Contributing to react-map-gl"/><meta data-react-helmet="true" property="og:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" property="og:image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="fb:app_id" content=""/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content=""/><meta data-react-helmet="true" name="twitter:title" content="react-map-gl | Contributing to react-map-gl"/><meta data-react-helmet="true" name="twitter:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" name="twitter:image" content="https://github.com/visgl/images/hero-sm.jpg"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://github.com/visgl","name":"react-map-gl"},[{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://github.com/visgl/*","name":"react-map-gl | Contributing to react-map-gl","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | Contributing to react-map-gl","headline":"react-map-gl | Contributing to react-map-gl","image":{"@type":"ImageObject","url":"https://github.com/visgl/images/hero-sm.jpg"},"description":"React wrapper for Mapbox GL JS"}]]</script><script data-react-helmet="true" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-74374017-2"></script><style data-styled="ckjqBY kTxBVF hLObhf jcCSEG bdPEit dkfbFn ljEIIX isdBno cqPqff cpyGKT FcGip cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd cncNYa jYCwIr egvBsN fPGooQ ePRhQs hsOfQe kVRSNy" data-styled-version="4.4.1">
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
.idNLwm{height:100%;width:100%;padding:64px 0 0 300px;} @media screen and (max-width:768px){.idNLwm{height:calc(100vh - 64px);padding:0;-webkit-order:2;-ms-flex-order:2;order:2;}}
/* sc-component-id: body__Body-lvm4v2-3 */
.ckjqBY{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;width:100vw;height:100vh;}
/* sc-component-id: toc__TocChevron-c2gnov-0 */
.ljEIIX{height:16px;width:16px;position:absolute;left:24px;top:20px;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;}.isdBno{height:16px;width:16px;position:absolute;left:24px;top:20px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;}
/* sc-component-id: toc__TocEntry-c2gnov-1 */
.jcCSEG{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.bdPEit{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid tranparent;color:#486865;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.dkfbFn{font:bold 14px/20px UberMove,Helvetica,Arial,sans-serif;border-top:1px solid #e1f0ee;color:#101918;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
/* sc-component-id: toc__TocHeader-c2gnov-2 */
.cqPqff{display:block;padding:16px 16px 16px 48px;} .cqPqff:hover{background:#f7fcfb;}
/* sc-component-id: toc__TocLink-c2gnov-3 */
.cowmvG a{display:block;padding:16px 16px 16px 60px;color:#486865 !important;-webkit-text-decoration:none;text-decoration:none;} .cowmvG:hover{background:#f7fcfb;}.eYbFBV a{display:block;padding:16px 16px 16px 60px;color:#00ADE6 !important;-webkit-text-decoration:none;text-decoration:none;} .eYbFBV:hover{background:#f7fcfb;}
/* sc-component-id: toc__TocSubpages-c2gnov-4 */
.cpyGKT{list-style:none;margin:0;max-height:224px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}.FcGip{list-style:none;margin:0;max-height:0px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}
/* sc-component-id: toc__TocContainer-c2gnov-5 */
.hLObhf{position:fixed;top:0;padding:64px 0;max-width:300px;height:100%;z-index:2;border-right:1px solid #cae0dc;overflow-y:auto;overflow-x:hidden;width:100%;} @media screen and (max-width:768px){.hLObhf{max-width:100%;height:initial;border-right:none;position:-webkit-sticky;position:sticky;padding:0;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;-webkit-transition:opacity 0.3s,transform 0.3s;transition:opacity 0.3s,transform 0.3s;opacity:0;max-height:0;overflow:hidden;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}}
/* sc-component-id: header__HeaderContainer-sc-3r2dxq-1 */
.kTxBVF{grid-column:1/3;grid-row:1/2;} @media screen and (max-width:768px){.kTxBVF{-webkit-order:1;-ms-flex-order:1;order:1;}}
/* sc-component-id: sc-global-3868639009 */
body{margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;} *{box-sizing:border-box;}
/* sc-component-id: typography__A-sc-1pmaksm-0 */
.dvhuEd{-webkit-text-decoration:none;text-decoration:none;color:#00ADE6;} .dvhuEd:visited{color:#174EB6;} .dvhuEd:active{color:#123D90;} .dvhuEd:hover{color:#123D90;}
/* sc-component-id: typography__H1-sc-1pmaksm-2 */
.dMTgn{font:bold 40px/56px UberMove,Helvetica,Arial,sans-serif;-webkit-letter-spacing:0.02em;-moz-letter-spacing:0.02em;-ms-letter-spacing:0.02em;letter-spacing:0.02em;margin:4px 0 24px;}
/* sc-component-id: typography__H2-sc-1pmaksm-3 */
.jYCwIr{font:bold 32px/48px UberMove,Helvetica,Arial,sans-serif;margin:24px 0 16px;}
/* sc-component-id: typography__H3-sc-1pmaksm-4 */
.ePRhQs{font:bold 24px/36px UberMove,Helvetica,Arial,sans-serif;}
/* sc-component-id: typography__P-sc-1pmaksm-8 */
.cncNYa{margin:'0 0 16px';}
/* sc-component-id: typography__List-sc-1pmaksm-9 */
.hsOfQe{margin:0 0 12px;}
/* sc-component-id: typography__ListItem-sc-1pmaksm-10 */
.kVRSNy{margin-bottom:4px;}
/* sc-component-id: typography__MarkdownBody-sc-1pmaksm-11 */
.iTIrjR{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;padding:36px;max-width:692px;}
/* sc-component-id: typography__InlineCode-sc-1pmaksm-12 */
.egvBsN{background-color:#f7fcfb;border-radius:4px;padding:0 5px;font-family:Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;font-size:0.9em;margin:1px 0;line-height:calc(1.5em / 0.9 - 2px);display:inline-block;vertical-align:top;}
/* sc-component-id: typography__Pre-sc-1pmaksm-14 */
.fPGooQ{font-size:14px;background-color:#f7fcfb;padding:6px;overflow-x:auto;} .fPGooQ .token.comment,.fPGooQ .token.prolog,.fPGooQ .token.doctype,.fPGooQ .token.cdata{color:slategray;} .fPGooQ .token.punctuation{color:#999;} .fPGooQ .token.namespace{opacity:.7;} .fPGooQ .token.property,.fPGooQ .token.tag,.fPGooQ .token.boolean,.fPGooQ .token.number,.fPGooQ .token.constant,.fPGooQ .token.symbol,.fPGooQ .token.deleted{color:#905;} .fPGooQ .token.selector,.fPGooQ .token.attr-name,.fPGooQ .token.string,.fPGooQ .token.char,.fPGooQ .token.builtin,.fPGooQ .token.inserted{color:#690;} .fPGooQ .token.operator,.fPGooQ .token.entity,.fPGooQ .token.url,.fPGooQ .language-css .token.string,.fPGooQ .style .token.string{color:#9a6e3a;background:hsla(0,0%,100%,.5);} .fPGooQ .token.atrule,.fPGooQ .token.attr-value,.fPGooQ .token.keyword{color:#07a;} .fPGooQ .token.function,.fPGooQ .token.class-name{color:#DD4A68;} .fPGooQ .token.regex,.fPGooQ .token.important,.fPGooQ .token.variable{color:#e90;} .fPGooQ .token.important,.fPGooQ .token.bold{font-weight:bold;} .fPGooQ .token.italic{font-style:italic;} .fPGooQ .token.entity{cursor:help;}</style><style type="text/css">
.anchor.before {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
padding-right: 4px;
}
.anchor.after {
display: inline-block;
padding-left: 4px;
}
h1 .anchor svg,
h2 .anchor svg,
h3 .anchor svg,
h4 .anchor svg,
h5 .anchor svg,
h6 .anchor svg {
visibility: hidden;
}
h1:hover .anchor svg,
h2:hover .anchor svg,
h3:hover .anchor svg,
h4:hover .anchor svg,
h5:hover .anchor svg,
h6:hover .anchor svg,
h1 .anchor:focus svg,
h2 .anchor:focus svg,
h3 .anchor:focus svg,
h4 .anchor:focus svg,
h5 .anchor:focus svg,
h6 .anchor:focus svg {
visibility: visible;
}
</style><script>
document.addEventListener("DOMContentLoaded", function(event) {
var hash = window.decodeURI(location.hash.replace('#', ''))
if (hash !== '') {
var element = document.getElementById(hash)
if (element) {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
var offset = element.getBoundingClientRect().top + scrollTop - clientTop
// Wait for the browser to finish rendering before scrolling.
setTimeout((function() {
window.scrollTo(0, offset - 64)
}), 0)
}
}
})
</script><link as="script" rel="preload" href="/react-map-gl/webpack-runtime-dd8603b8d45eb51fa2a9.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-cfc3a4e28432cfe762eb.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/contributing/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/sq/d/484347790.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div class="body__Body-lvm4v2-3 ckjqBY"><div class="header__HeaderContainer-sc-3r2dxq-1 kTxBVF"><div></div></div><div class="toc__TocContainer-c2gnov-5 hLObhf"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What&#x27;s new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="What&#x27;s new" href="/react-map-gl/docs/whats-new">What&#x27;s new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Contributing to react-map-gl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Contributing to react-map-gl" class="" href="/react-map-gl/docs/contributing">Contributing to react-map-gl</a></div></div></li></div></ul></div><div><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Developer Guide</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Get Started" href="/react-map-gl/docs/get-started/get-started">Get Started</a></div></div></li></div><div><li><div title="About Mapbox Tokens" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="About Mapbox Tokens" href="/react-map-gl/docs/get-started/mapbox-tokens">About Mapbox Tokens</a></div></div></li></div><div><li><div title="State Management" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div><div><li><div title="FAQ" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FAQ" href="/react-map-gl/docs/get-started/faq">FAQ</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Components" href="/react-map-gl/docs/advanced/custom-components">Custom Components</a></div></div></li></div><div><li><div title="Custom Map Controller" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 dkfbFn"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 isdBno" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="AttributionControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="AttributionControl" href="/react-map-gl/docs/api-reference/attribution-control">AttributionControl</a></div></div></li></div><div><li><div title="CanvasOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="CanvasOverlay" href="/react-map-gl/docs/api-reference/canvas-overlay">CanvasOverlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="FullscreenControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="FullscreenControl" href="/react-map-gl/docs/api-reference/fullscreen-control">FullscreenControl</a></div></div></li></div><div><li><div title="GeolocateControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeolocateControl" href="/react-map-gl/docs/api-reference/geolocate-control">GeolocateControl</a></div></div></li></div><div><li><div title="HTMLOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="HTMLOverlay" href="/react-map-gl/docs/api-reference/html-overlay">HTMLOverlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="InteractiveMap" href="/react-map-gl/docs/api-reference/interactive-map">InteractiveMap</a></div></div></li></div><div><li><div title="Layer" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Layer" href="/react-map-gl/docs/api-reference/layer">Layer</a></div></div></li></div><div><li><div title="LinearInterpolator" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="MapContext" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapContext" href="/react-map-gl/docs/api-reference/map-context">MapContext</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Marker" href="/react-map-gl/docs/api-reference/marker">Marker</a></div></div></li></div><div><li><div title="NavigationControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="NavigationControl" href="/react-map-gl/docs/api-reference/navigation-control">NavigationControl</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Popup" href="/react-map-gl/docs/api-reference/popup">Popup</a></div></div></li></div><div><li><div title="ScaleControl" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="ScaleControl" href="/react-map-gl/docs/api-reference/scale-control">ScaleControl</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Source" href="/react-map-gl/docs/api-reference/source">Source</a></div></div></li></div><div><li><div title="StaticMap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVGOverlay" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="SVGOverlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVGOverlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="WebMercatorViewport" href="/react-map-gl/docs/api-reference/web-mercator-viewport">WebMercatorViewport</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative"><div class="typography__MarkdownBody-sc-1pmaksm-11 iTIrjR"><h1 id="contributing-to-react-map-gl" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#contributing-to-react-map-gl" aria-label="contributing to react map gl permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Contributing to react-map-gl</h1><p class="typography__P-sc-1pmaksm-8 cncNYa"><strong>Thanks for taking the time to contribute!</strong></p><p class="typography__P-sc-1pmaksm-8 cncNYa">PRs and bug reports are welcome, and we are actively looking for new maintainers.</p><h2 style="position:relative" id="setting-up-dev-environment" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#setting-up-dev-environment" aria-label="setting up dev environment permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Setting Up Dev Environment</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">The <strong>master</strong> branch is the active development branch.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Building react-map-gl locally from the source requires node.js <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">&gt;=8</code>.
We use <a href="https://yarnpkg.com/en/docs/install" class="typography__A-sc-1pmaksm-0 dvhuEd">yarn</a> to manage the dependencies.</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash"><span class="token function">git</span> checkout master
<span class="token function">yarn</span> bootstrap
<span class="token function">yarn</span> <span class="token builtin class-name">test</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test:</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span></code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test in Node:</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span> node</code></pre></div><p class="typography__P-sc-1pmaksm-8 cncNYa">Test in browser (can use Chrome dev tools for debugging):</p><div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 fPGooQ language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-bash">$ <span class="token function">npm</span> run <span class="token builtin class-name">test</span> browser</code></pre></div><h2 style="position:relative" id="pull-requests" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#pull-requests" aria-label="pull requests permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Pull Requests</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Any intended change to the code base must open a <a href="https://help.github.com/articles/creating-a-pull-request/" class="typography__A-sc-1pmaksm-0 dvhuEd">pull request</a> and be approved. </p><p class="typography__P-sc-1pmaksm-8 cncNYa">Generally speaking, all PRs are open against the <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">master</code> branch, unless the feature being affected no longer exists on master.</p><h3 style="position:relative" id="pr-checklist" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#pr-checklist" aria-label="pr checklist permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PR Checklist</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe contains-task-list"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Tests<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">npm run test</code> must be successful.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">New code should be covered by unit tests whenever possible.</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Documentation<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If public APIs are added/modified, update component documentation in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/api-reference</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Breaking changes and deprecations must be added to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/upgrade-guide.md</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Noteworthy new features should be added to <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">docs/whats-new.md</code>.</li></ul></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> <!-- -->Description on GitHub<ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Link to relevant issue.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Label with a milestone (latest release or vNext).</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If public APIs are added/modified, describe the intended behavior.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If visual/interaction is affected, consider attaching a screenshot/GIF.</li></ul></li></ul><h2 style="position:relative" id="release" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#release" aria-label="release permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Release</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl follows the <a href="https://semver.org/" class="typography__A-sc-1pmaksm-0 dvhuEd">Semantic Versioning</a> guidelines. Steps for publishing releases can be found <a href="https://www.github.com/visgl/tsc/tree/master/developer-process" class="typography__A-sc-1pmaksm-0 dvhuEd">here</a>.</p><h2 style="position:relative" id="community-governance" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#community-governance" aria-label="community governance permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Community Governance</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">vis.gl is part of the <a href="https://uc.foundation/" class="typography__A-sc-1pmaksm-0 dvhuEd">Urban Computing Foundation</a>. See the organization&#x27;s <a href="https://github.com/visgl/tsc/blob/master/Technical%20Charter.md" class="typography__A-sc-1pmaksm-0 dvhuEd">Technical Charter</a>.</p><h3 style="position:relative" id="technical-steering-committee" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#technical-steering-committee" aria-label="technical steering committee permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Technical Steering Committee</h3><p class="typography__P-sc-1pmaksm-8 cncNYa">react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).</p><h3 style="position:relative" id="maintainers" class="typography__H3-sc-1pmaksm-4 ePRhQs"><a href="#maintainers" aria-label="maintainers permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Maintainers</h3><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://github.com/Pessimistress" class="typography__A-sc-1pmaksm-0 dvhuEd">Xiaoji Chen</a></li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><a href="https://github.com/xintongxia" class="typography__A-sc-1pmaksm-0 dvhuEd">Xintong Xia</a></li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">If you are interested in becoming a maintainer, read the <a href="https://github.com/visgl/tsc/tree/master/developer-process/governance.md" class="typography__A-sc-1pmaksm-0 dvhuEd">governance guidelines</a>.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The vis.gl TSC meets monthly and publishes meeting notes via a <a href="https://lists.uc.foundation/g/visgl" class="typography__A-sc-1pmaksm-0 dvhuEd">mailing list</a>.
This mailing list can also be utilized to reach out to the TSC.</p><h2 style="position:relative" id="code-of-conduct" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#code-of-conduct" aria-label="code of conduct permalink" class="typography__A-sc-1pmaksm-0 dvhuEd anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Code of Conduct</h2><p class="typography__P-sc-1pmaksm-8 cncNYa">Please be mindful of and adhere to the Linux Foundation&#x27;s <a href="https://lfprojects.org/policies/code-of-conduct/" class="typography__A-sc-1pmaksm-0 dvhuEd">Code of Conduct</a> when contributing to react-map-gl.</p></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/contributing";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-27d1c1f505dad8dcb0bf.js"],"app":["/app-cfc3a4e28432cfe762eb.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-346e4b3ce834a2a59abd.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-514d86f5f5bb530818ca.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-7353428ea7993bffe6ca.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-cdce30b8929b53876a0d.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-34d8eea6aa3da822f4d4.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-80242668b41d1c5a100c.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-825f697ecfa8c8d3744d.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-5f78c7d3f8bebcd578e3.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-3a34e0db161255746f46.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7138f5bd4ddb502f4dac.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-42744c71b0627e33aa9e.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-1def9cc28e934bb7168d.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-861d77d9a70335a1bb15.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-afa6fbf60f75ba79c6b1.js"],"component---src-home-js":["/component---src-home-js-0e560ad72d6d2996f9f7.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-27d1c1f505dad8dcb0bf.js" nomodule=""></script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-3f8c560eb969cc5b14e5.js" async=""></script><script src="/react-map-gl/app-cfc3a4e28432cfe762eb.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-dd8603b8d45eb51fa2a9.js" async=""></script></body></html>
Reference in New Issue View Git Blame Copy Permalink