mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
268 lines
49 KiB
HTML
268 lines
49 KiB
HTML
<!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.18.25"/><title data-react-helmet="true">react-map-gl</title><link data-react-helmet="true" rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.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"/><meta data-react-helmet="true" name="image" content="NaN"/><meta data-react-helmet="true" property="og:url" content="NaN"/><meta data-react-helmet="true" property="og:title"/><meta data-react-helmet="true" property="og:description"/><meta data-react-helmet="true" property="og:image" content="NaN"/><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"/><meta data-react-helmet="true" name="twitter:description"/><meta data-react-helmet="true" name="twitter:image" content="NaN"/><script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":null,"alternateName":""}]</script><style data-styled="gXXAFg bDuPoM eyqZow cWxAeV fybxvQ fCCoSo eFnCLU gGlvpi dMoLKk cpyGKT FcGip hGwSqT jkbfmX dKqGOe dydGug dKKgxr ewhNJT kUifx cncNYa dcdkiM cVbpdr duevmh hsOfQe kVRSNy dUYRyl" data-styled-version="4.4.1">
|
|
/* sc-component-id: toc__TocChevron-c2gnov-0 */
|
|
.eFnCLU{height:16px;width:16px;position:absolute;left:36px;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;}.gGlvpi{height:16px;width:16px;position:absolute;left:36px;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 */
|
|
.fybxvQ{font:bold 14px/20px "Uber Move",Helvetica,Arial,sans-serif;border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;color:#000000;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.fCCoSo{font:bold 14px/20px "Uber Move",Helvetica,Arial,sans-serif;border-top:1px solid tranparent;border-bottom:1px solid tranparent;color:#666666;cursor:pointer;margin:-0.5px 0;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
/* sc-component-id: toc__TocHeader-c2gnov-2 */
|
|
.dMoLKk{display:block;padding:16px 16px 16px 60px;} .dMoLKk:hover{background:#F7F7F7;}
|
|
/* sc-component-id: toc__TocLink-c2gnov-3 */
|
|
.hGwSqT a{display:block;padding:16px 16px 16px 84px;color:#666666 !important;-webkit-text-decoration:none;text-decoration:none;} .hGwSqT:hover{background:#F7F7F7;}.jkbfmX a{display:block;padding:16px 16px 16px 84px;color:#276EF1 !important;-webkit-text-decoration:none;text-decoration:none;} .jkbfmX:hover{background:#F7F7F7;}
|
|
/* 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 */
|
|
@media screen and (min-width:600px){.cWxAeV{position:fixed;top:0;padding:64px 0;max-width:300px;height:100%;z-index:2;border-right:1px solid #CCCCCC;overflow-y:scroll;overflow-x:hidden;width:100%;}} @media screen and (max-width:600px){.cWxAeV{border-right:none;position:-webkit-sticky;position:sticky;padding:0 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: toc__StyledTocToggle-c2gnov-6 */
|
|
.eyqZow{font:normal 14px/20px "Uber Move",Helvetica,Arial,sans-serif;color:#FFFFFF;cursor:pointer;position:fixed;top:0;right:24px;line-height:64px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;display:none;} @media screen and (max-width:600px){.eyqZow{display:block;}}
|
|
/* sc-component-id: header__HeaderContainer-sc-1hd3yin-1 */
|
|
.bDuPoM{grid-column:1/3;grid-row:1/2;} @media screen and (max-width:600px){.bDuPoM{-webkit-order:1;-ms-flex-order:1;order:1;}}
|
|
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
|
|
.dKqGOe{height:100%;width:100%;padding:64px 0 0 300px;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);opacity:1;} @media screen and (max-width:600px){.dKqGOe{padding-left:0;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);opacity:1;}}
|
|
/* sc-component-id: body__Body-lvm4v2-3 */
|
|
.gXXAFg{height:100vh;}
|
|
/* sc-component-id: sc-global-495056895 */
|
|
body{margin:0;overflow-x:hidden;} *{box-sizing:border-box;}
|
|
/* sc-component-id: typography__A-sc-1pmaksm-0 */
|
|
.ewhNJT{-webkit-text-decoration:none;text-decoration:none;color:#276EF1;} .ewhNJT:visited{color:#174EB6;} .ewhNJT:active{color:#123D90;} .ewhNJT:hover{color:#123D90;}
|
|
/* sc-component-id: typography__H1-sc-1pmaksm-2 */
|
|
.dKKgxr{font:bold 40px/56px "Uber Move",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 */
|
|
.kUifx{font:bold 32px/48px "Uber Move",Helvetica,Arial,sans-serif;margin:24px 0 16px;}
|
|
/* sc-component-id: typography__H3-sc-1pmaksm-4 */
|
|
.duevmh{font:bold 24px/36px "Uber Move",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 */
|
|
.dydGug{font:normal 14px/20px "Uber Move",Helvetica,Arial,sans-serif;padding:36px;max-width:692px;}
|
|
/* sc-component-id: typography__InlineCode-sc-1pmaksm-12 */
|
|
.cVbpdr{background-color:#F7F7F7;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 */
|
|
.dcdkiM{background-color:#F7F7F7;padding:6px;overflow-x:auto;} .dcdkiM .keyword{color:#339;font-weight:bold;} .dcdkiM .operator{color:#d14;} .dcdkiM .punctuation{color:#458;} .dcdkiM .string,.dcdkiM .number{color:#008080;}
|
|
/* sc-component-id: typography__BlockQuote-sc-1pmaksm-15 */
|
|
.dUYRyl{background-color:#FBE2CF;margin-inline-start:0;margin-inline-end:0;padding:10px 16px;}</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-7bb4a793dd08c19a1d8e.js"/><link as="script" rel="preload" href="/react-map-gl/app-a414266688039f7921e7.js"/><link as="script" rel="preload" href="/react-map-gl/commons-1a18a7edb09934892679.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/developer-guide/page-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div><div class="body__Body-lvm4v2-3 gXXAFg"><div class="header__HeaderContainer-sc-1hd3yin-1 bDuPoM"><div></div></div><div class="toc__StyledTocToggle-c2gnov-6 eyqZow">Table of Contents</div><div class="toc__TocContainer-c2gnov-5 cWxAeV"><div><div title="Introduction" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 eFnCLU" 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 dMoLKk">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 cpyGKT"><div><li><div title="Introduction" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Introduction" href="/react-map-gl/docs">Introduction</a></div></div></li></div><div><li><div title="What's new" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="What's new" href="/react-map-gl/docs/whats-new">What's new</a></div></div></li></div><div><li><div title="Upgrade Guide" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Upgrade Guide" href="/react-map-gl/docs/upgrade-guide">Upgrade Guide</a></div></div></li></div><div><li><div title="Developer Guide" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 jkbfmX"><a aria-current="page" title="Developer Guide" class="" href="/react-map-gl/docs/developer-guide">Developer Guide</a></div></div></li></div></ul></div><div><div title="Getting Started" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">Getting Started</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Get Started" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="State Management" href="/react-map-gl/docs/get-started/state-management">State Management</a></div></div></li></div><div><li><div title="Adding Custom Data" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Adding Custom Data" href="/react-map-gl/docs/get-started/adding-custom-data">Adding Custom Data</a></div></div></li></div></ul></div><div><div title="Advanced" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">Advanced</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Custom Components" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Custom Map Controller" href="/react-map-gl/docs/advanced/custom-map-controller">Custom Map Controller</a></div></div></li></div><div><li><div title="Custom Overlays" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Custom Overlays" href="/react-map-gl/docs/advanced/custom-overlays">Custom Overlays</a></div></div></li></div><div><li><div title="Viewport Transition" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Viewport Transition" href="/react-map-gl/docs/advanced/viewport-transition">Viewport Transition</a></div></div></li></div></ul></div><div><div title="API Reference" class="toc__TocEntry-c2gnov-1 fybxvQ"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 gGlvpi" 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 dMoLKk">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><div><li><div title="Canvas Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Canvas Overlay" href="/react-map-gl/docs/api-reference/canvas-overlay">Canvas Overlay</a></div></div></li></div><div><li><div title="FlyToInterpolator" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="FlyToInterpolator" href="/react-map-gl/docs/api-reference/fly-to-interpolator">FlyToInterpolator</a></div></div></li></div><div><li><div title="HTML Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="HTML Overlay" href="/react-map-gl/docs/api-reference/html-overlay">HTML Overlay</a></div></div></li></div><div><li><div title="InteractiveMap" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="LinearInterpolator" href="/react-map-gl/docs/api-reference/linear-interpolator">LinearInterpolator</a></div></div></li></div><div><li><div title="Marker Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Marker Control" href="/react-map-gl/docs/api-reference/marker">Marker Control</a></div></div></li></div><div><li><div title="MapController" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="MapController" href="/react-map-gl/docs/api-reference/map-controller">MapController</a></div></div></li></div><div><li><div title="Navigation Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Navigation Control" href="/react-map-gl/docs/api-reference/navigation-control">Navigation Control</a></div></div></li></div><div><li><div title="Fullscreen Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Fullscreen Control" href="/react-map-gl/docs/api-reference/fullscreen-control">Fullscreen Control</a></div></div></li></div><div><li><div title="Geolocate Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Geolocate Control" href="/react-map-gl/docs/api-reference/geolocate-control">Geolocate Control</a></div></div></li></div><div><li><div title="PointerEvent" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="PointerEvent" href="/react-map-gl/docs/api-reference/pointer-event">PointerEvent</a></div></div></li></div><div><li><div title="Popup Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Popup Control" href="/react-map-gl/docs/api-reference/popup">Popup Control</a></div></div></li></div><div><li><div title="Scale Control" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="Scale Control" href="/react-map-gl/docs/api-reference/scale-control">Scale Control</a></div></div></li></div><div><li><div title="Source" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="StaticMap" href="/react-map-gl/docs/api-reference/static-map">StaticMap</a></div></div></li></div><div><li><div title="SVG Overlay" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><a title="SVG Overlay" href="/react-map-gl/docs/api-reference/svg-overlay">SVG Overlay</a></div></div></li></div><div><li><div title="WebMercatorViewport" class="toc__TocEntry-c2gnov-1 fCCoSo"><div class="toc__TocLink-c2gnov-3 hGwSqT"><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 dKqGOe"><div class="typography__MarkdownBody-sc-1pmaksm-11 dydGug"><div><h1 id="developer-guide" style="position:relative" class="typography__H1-sc-1pmaksm-2 dKKgxr"><a href="#developer-guide" aria-label="developer guide permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Developer Guide</h1>
|
|
<h2 style="position:relative" id="develop" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#develop" aria-label="develop permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Develop</h2>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">The dev tools are tested with Node 8.11.3 and yarn 1.7.0.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Set up locally:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> clone https://github.com/uber/react-map-gl.git
|
|
$ <span class="token builtin class-name">cd</span> react-map-gl
|
|
$ <span class="token function">yarn</span> bootstrap
|
|
$ <span class="token function">npm</span> run start</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 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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 kUifx"><a href="#pull-requests" aria-label="pull requests permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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 ewhNJT">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 cVbpdr 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 duevmh"><a href="#pr-checklist" aria-label="pr checklist permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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">
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><input type="checkbox" disabled=""/> Tests</p>
|
|
<ul class="typography__List-sc-1pmaksm-9 hsOfQe">
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr 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">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><input type="checkbox" disabled=""/> Documentation</p>
|
|
<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 cVbpdr 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 cVbpdr 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 cVbpdr language-text">docs/whats-new.md</code>.</li>
|
|
</ul>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><input type="checkbox" disabled=""/> Description on GitHub</p>
|
|
<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="branching-and-releasing-model" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#branching-and-releasing-model" aria-label="branching and releasing model permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Branching and Releasing Model</h2>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">The <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> branch of the repo is the latest dev branch. It is used to publish the latest <strong>beta</strong> release, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">4.0.0-alpha.1</code>.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Each minor release branches off from master, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">2.0-release</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">3.3-release</code>. All <strong>production</strong> releases are built and published from respective release branches.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://uber.github.io/react-map-gl" class="typography__A-sc-1pmaksm-0 ewhNJT">Website</a> is built from the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"><a href="https://uber.github.io/react-map-gl/#/Documentation" class="typography__A-sc-1pmaksm-0 ewhNJT">Documentation</a> is served directly from the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Only the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> branch and the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch are actively maintained.</p>
|
|
<h3 style="position:relative" id="new-release-branch-checklist" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#new-release-branch-checklist" aria-label="new release branch checklist permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>New Release Branch Checklist</h3>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">NOTE: for authorized team members only</p>
|
|
</blockquote>
|
|
<ul class="typography__List-sc-1pmaksm-9 hsOfQe">
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> Push to new <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest></code> represents a minor release number, e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">3.3</code>, <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">4.0</code>.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> Run <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">npm run update-release-branch <latest></code> to upate the dependencies of examples to the latest version, and the links in all documentation to point to the new branch</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> Publish new minor release</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy task-list-item"><input type="checkbox" disabled=""/> Publish website</li>
|
|
</ul>
|
|
<h2 style="position:relative" id="publish" class="typography__H2-sc-1pmaksm-3 kUifx"><a href="#publish" aria-label="publish permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Publish</h2>
|
|
<blockquote class="typography__BlockQuote-sc-1pmaksm-15 dUYRyl">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">NOTE: for authorized team members only</p>
|
|
</blockquote>
|
|
<h3 style="position:relative" id="production-release" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#production-release" aria-label="production release permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Production Release</h3>
|
|
<ol>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Log into an authorized <a href="https://www.npmjs.com/" class="typography__A-sc-1pmaksm-0 ewhNJT">npmjs.com</a> account. You can use <a href="https://www.npmjs.com/package/npmrc" class="typography__A-sc-1pmaksm-0 ewhNJT">npmrc</a> to manage multiple npm profiles.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Make sure both the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> and the release branch are up to date:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> checkout master
|
|
$ <span class="token function">git</span> pull
|
|
$ <span class="token function">git</span> checkout <span class="token number">3.3</span>-release
|
|
$ <span class="token function">git</span> pull</code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Find the last release commit on the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> log
|
|
|
|
<span class="token punctuation">..</span>.
|
|
|
|
commit a05d23059444cf29bb4e38ea5e4cd6172a4f463d
|
|
Author: Xiaoji Chen <span class="token operator"><</span>xiaoji@uber.com<span class="token operator">></span>
|
|
Date: Fri Aug <span class="token number">3</span> <span class="token number">10</span>:11:45 <span class="token number">2018</span> -0700
|
|
|
|
<span class="token number">3.3</span>.3</code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Find the commits on <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> after this commit:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> log master --since<span class="token operator">=</span><span class="token string">"<span class="token variable"><span class="token variable">`</span><span class="token function">git</span> show -s --format<span class="token operator">=</span>%ci a05d2305<span class="token variable">`</span></span>"</span></code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Find out which new commits should be cherry-picked into the release branch.</p>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">If a commit is a bug fix for the current production release, or a minor, non-breaking new feature, it can be published as a patch. When in doubt, check the original PR's milestone label on GitHub. For example <a href="https://github.com/uber/react-map-gl/pull/565" class="typography__A-sc-1pmaksm-0 ewhNJT">#565</a>:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> cherry-pick 1238140a</code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">If the commit affects code that is published to npm, add its commit message to CHANGELOG.md:</p>
|
|
<div class="gatsby-highlight" data-language="text"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-text"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">## 3.3.4 (Aug 4, 2018)
|
|
|
|
- fix capture* props for overlay components (#565)</code></pre></div>
|
|
</li>
|
|
</ol>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"> Examples of changes that are published:</p>
|
|
<div class="gatsby-highlight" data-language="text"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-text"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">- A change anywhere in `src`
|
|
- A change in Babel config
|
|
- A change in `README.md`
|
|
- A change in `package.json`'s user-facing fields, e.g. `file`, `main`, `browser`, `dependencies`, `peerDependencies`</code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa"> Examples of changes that are not published:</p>
|
|
<div class="gatsby-highlight" data-language="text"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-text"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">- A change in `docs`
|
|
- Improvement of an example
|
|
- Adding a new lint rule
|
|
- Adding a new npm script</code></pre></div>
|
|
<ol start="5">
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Include the changelog in the version commit, and publish:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
|
|
<span class="token comment"># This will bump version to the next patch release, commit, tag and publish:</span>
|
|
$ <span class="token function">npm</span> run publish-prod</code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If the new patch release fixes a bug on the website, republish the website.</li>
|
|
</ol>
|
|
<h3 style="position:relative" id="beta-release" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#beta-release" aria-label="beta release permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Beta Release</h3>
|
|
<ol>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Log into an authorized <a href="https://www.npmjs.com/" class="typography__A-sc-1pmaksm-0 ewhNJT">npmjs.com</a> account. You can use <a href="https://www.npmjs.com/package/npmrc" class="typography__A-sc-1pmaksm-0 ewhNJT">npmrc</a> to manage multiple npm profiles.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Make sure the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> branch is up to daate:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> checkout master
|
|
$ <span class="token function">git</span> pull</code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Find the last release commit on the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> branch:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> log
|
|
|
|
<span class="token punctuation">..</span>.
|
|
commit a05d23059444cf29bb4e38ea5e4cd6172a4f463d
|
|
Author: Xiaoji Chen <span class="token operator"><</span>xiaoji@uber.com<span class="token operator">></span>
|
|
Date: Fri Aug <span class="token number">3</span> <span class="token number">10</span>:11:45 <span class="token number">2018</span> -0700
|
|
|
|
<span class="token number">4.0</span>.0-alpha.1</code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Find the commits on <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">master</code> after this commit:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> log --since<span class="token operator">=</span><span class="token string">"<span class="token variable"><span class="token variable">`</span><span class="token function">git</span> show -s --format<span class="token operator">=</span>%ci a05d2305<span class="token variable">`</span></span>"</span></code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If a commit affects code that is published to npm, add its commit message to CHANGELOG.md.</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If some beta version has been published for the target release (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">4.0.0-alpha.1</code>), do not make changes to <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">package.json</code>. Otherwise, manually bump the version in <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">package.json</code> to the appropriate pre-release version (e.g. <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">4.1.0-alpha.0</code>).</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Include the changelog in the version commit, and publish:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
|
|
<span class="token comment"># This will bump version to the next pre-release, commit, tag and publish:</span>
|
|
$ <span class="token function">npm</span> run publish-beta</code></pre></div>
|
|
</li>
|
|
</ol>
|
|
<h3 style="position:relative" id="website" class="typography__H3-sc-1pmaksm-4 duevmh"><a href="#website" aria-label="website permalink" class="typography__A-sc-1pmaksm-0 ewhNJT 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>Website</h3>
|
|
<ol>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Make sure the <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text"><latest>-release</code> branch is up to date:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> checkout <span class="token number">3.3</span>-release
|
|
$ <span class="token function">git</span> pull</code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Make sure you have the correct Mapbox token:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token builtin class-name">echo</span> <span class="token variable">$MapboxAccessToken</span></code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Test the website:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token builtin class-name">cd</span> website
|
|
$ <span class="token function">yarn</span>
|
|
$ <span class="token function">yarn</span> start</code></pre></div>
|
|
</li>
|
|
<li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Build and publish the website:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">yarn</span> build
|
|
$ <span class="token function">git</span> checkout gh-pages</code></pre></div>
|
|
<p class="typography__P-sc-1pmaksm-8 cncNYa">Copy the content from <code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-text">website/dist</code> to the root of the project. Commit with the corresponding release version:</p>
|
|
<div class="gatsby-highlight" data-language="bash"><pre class="typography__Pre-sc-1pmaksm-14 dcdkiM language-bash"><code class="typography__InlineCode-sc-1pmaksm-12 cVbpdr language-bash">$ <span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
|
|
$ <span class="token function">git</span> commit -m <span class="token string">"3.3.4"</span>
|
|
$ <span class="token function">git</span> push</code></pre></div>
|
|
</li>
|
|
</ol></div></div></div></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/developer-guide";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-a414266688039f7921e7.js"],"component---src-home-js":["/component---src-home-js-5567f17f64fafd54b99f.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-examples-jsx-ebadec786762b14117ce.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-0ca00b6efcf12c356533.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-9385631f409fcb6f6d30.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-e53df838b76b9e8a878d.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-ef2b15826e6c37659257.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-0febf6e932334bf369bf.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-4124fa82dc370367b642.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-d01467258de71693e0fa.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-7d9fccdd44147c143435.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-cc82d672cc2091e15622.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-1c97791be7a1455e6a31.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-6c8edb41435526128e70.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-3195e542ef4c2dd8d826.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-0525c25f5c4d5bd72dfe.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-0f17310fe89f108bbbae.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-search-jsx-b85c4e0d9b18863e5a9a.js"]};/*]]>*/</script><script src="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-bc2b92ef9855af2673f6.js" async=""></script><script src="/react-map-gl/commons-1a18a7edb09934892679.js" async=""></script><script src="/react-map-gl/app-a414266688039f7921e7.js" async=""></script><script src="/react-map-gl/webpack-runtime-7bb4a793dd08c19a1d8e.js" async=""></script></body></html> |