mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-25 16:02:50 +00:00
107 lines
56 KiB
HTML
107 lines
56 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.31.1"/><title data-react-helmet="true">react-map-gl | WebMercatorViewport</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 | WebMercatorViewport"/><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 | WebMercatorViewport"/><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 | WebMercatorViewport","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | WebMercatorViewport","headline":"react-map-gl | WebMercatorViewport","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 isdBno ljEIIX cqPqff FcGip ikvPao cowmvG eYbFBV idNLwm iTIrjR dMTgn dvhuEd cncNYa hBeZII egvBsN jYCwIr bnjLCb kXxWox kxRoVr hsOfQe kVRSNy dNeACf" 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 */
|
|
.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;}.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;}
|
|
/* 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 */
|
|
.FcGip{list-style:none;margin:0;max-height:0px;overflow:hidden;padding:0;-webkit-transition:max-height 0.3s;transition:max-height 0.3s;}.ikvPao{list-style:none;margin:0;max-height:1120px;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__H5-sc-1pmaksm-6 */
|
|
.dNeACf{font:bold 16px/24px 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__Img-sc-1pmaksm-15 */
|
|
.hBeZII{max-width:100%;}
|
|
/* sc-component-id: typography__Table-sc-1pmaksm-17 */
|
|
.bnjLCb{border-collapse:collapse;border-spacing:1px;width:100%;}
|
|
/* sc-component-id: typography__TableHeaderCell-sc-1pmaksm-18 */
|
|
.kXxWox{padding:4px;text-align:left;background:#f7fcfb;font-weight:bold;border:1px solid #e1f0ee;}
|
|
/* sc-component-id: typography__TableBodyCell-sc-1pmaksm-19 */
|
|
.kxRoVr{padding:4px;text-align:left;border:1px solid #e1f0ee;}</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-a47292676d6534678190.js"/><link as="script" rel="preload" href="/react-map-gl/framework-cc409ead3d26361b9ba0.js"/><link as="script" rel="preload" href="/react-map-gl/app-58440f29242e55fac5e3.js"/><link as="script" rel="preload" href="/react-map-gl/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-5428c6cd0874988e6a97.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/docs/api-reference/web-mercator-viewport/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 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">Introduction</span></div><ul class="toc__TocSubpages-c2gnov-4 FcGip"><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's new" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><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 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 cowmvG"><a title="Contributing to react-map-gl" 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 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">API Reference</span></div><ul class="toc__TocSubpages-c2gnov-4 ikvPao"><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 eYbFBV"><a aria-current="page" title="WebMercatorViewport" class="" 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="webmercatorviewport" style="position:relative" class="typography__H1-sc-1pmaksm-2 dMTgn"><a href="#webmercatorviewport" aria-label="webmercatorviewport 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>WebMercatorViewport</h1><p class="typography__P-sc-1pmaksm-8 cncNYa badges">
|
|
<img src="https://img.shields.io/badge/From-v3.1-blue.svg?style=flat-square" alt="From-v3.1" class="typography__Img-sc-1pmaksm-15 hBeZII"/>
|
|
</p><p class="typography__P-sc-1pmaksm-8 cncNYa">The <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> class takes map camera states (<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code>, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code> etc.),
|
|
and performs projections between world and screen coordinates.</p><h2 style="position:relative" id="constructor-1" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#constructor-1" aria-label="constructor 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>Constructor</h2><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Width of viewport</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Height of viewport</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">latitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Latitude of viewport center</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">longitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Longitude of viewport center</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">11</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Map zoom (scale is calculated as <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">2^zoom</code>)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">pitch</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The pitch (tilt) of the map from the screen, in degrees (0 is straight down)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bearing</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">The bearing (rotation) of the map from north, in degrees counter-clockwise (0 means north is up)</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">altitude</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">1.5</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Altitude of camera in screen units</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Remarks:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">Altitude has a default value that matches assumptions in mapbox-gl</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">width</code> and <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">height</code> are forced to 1 if supplied as 0, to avoid
|
|
division by zero. This is intended to reduce the burden of apps to
|
|
to check values before instantiating a <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Viewport</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">When using Mercator projection, per cartographic tradition, longitudes and
|
|
latitudes are specified as degrees.</li></ul><h2 style="position:relative" id="methods" class="typography__H2-sc-1pmaksm-3 jYCwIr"><a href="#methods" aria-label="methods 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>Methods</h2><h5 style="position:relative" id="projectlnglatz-options" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#projectlnglatz-options" aria-label="code classlanguage textprojectlnglatz optionscode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">project(lngLatZ, options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Projects latitude and longitude to pixel coordinates on screen.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lngLatZ</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">map coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, Z]</code> where <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Z</code> is elevation in meters</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Object</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{}</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">named options</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.topLeft</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Boolean</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> projected coords are top left, otherwise bottom left</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code> in pixels coordinates. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">z</code> is pixel depth.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, Z]</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Remarks:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">By default, returns top-left coordinates suitable for canvas/SVG type
|
|
rendering.</li></ul><h5 style="position:relative" id="unprojectxyz-options" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unprojectxyz-options" aria-label="code classlanguage textunprojectxyz optionscode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unproject(xyz, options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unproject pixel coordinates on screen to longitude and latitude on map.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xyz</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">pixel coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code> where <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">z</code> is pixel depth</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Object</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">{}</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">named options</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.topLeft</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Boolean</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">If <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">true</code> projected coords are top left, otherwise bottom left</td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">If pixel depth <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">z</code> is not specified in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xyz</code>, use <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code> as the desired elevation</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns: <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code> or <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, lat, Z]</code> in map coordinates. <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Z</code> is elevation in meters.</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> without specifying <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> with <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.targetZ</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, targetZ]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">If input is <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y, z]</code>: returns <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat, Z]</code>.</li></ul><h5 style="position:relative" id="projectflatlnglat-scale" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#projectflatlnglat-scale" aria-label="code classlanguage textprojectflatlnglat scalecode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">projectFlat(lngLat, scale)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Project longitude and latitude onto Web Mercator coordinates.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">lngLat</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">map coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lng, lat]</code></td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">this.scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator scale</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><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">[x, y]</code>, representing Web Mercator coordinates.</li></ul><h5 style="position:relative" id="unprojectflatxy-scale" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#unprojectflatxy-scale" aria-label="code classlanguage textunprojectflatxy scalecode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">unprojectFlat(xy, scale)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Unprojects a Web Mercator coordinate to longitude and latitude.</p><table class="typography__Table-sc-1pmaksm-17 bnjLCb"><thead><tr><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Parameter</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Type</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Default</th><th class="typography__TableHeaderCell-sc-1pmaksm-18 kXxWox">Description</th></tr></thead><tbody><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">xy</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">Array</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">(required)</td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator coordinates, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code></td></tr><tr><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">number</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">this.scale</code></td><td class="typography__TableBodyCell-sc-1pmaksm-19 kxRoVr">Web Mercator scale</td></tr></tbody></table><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><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">[longitude, latitude]</code></li></ul><h5 style="position:relative" id="getboundsoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getboundsoptions" aria-label="code classlanguage textgetboundsoptionscode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getBounds(options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the axis-aligned bounding box of the current visible area.</p><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">options.z</code> (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding box at a specific elevation. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><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">[[lon, lat], [lon, lat]]</code> as the south west and north east corners of the smallest orthogonal bounds that encompasses the visible region.</li></ul><h5 style="position:relative" id="getboundingregionoptions" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getboundingregionoptions" aria-label="code classlanguage textgetboundingregionoptionscode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getBoundingRegion(options)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the vertices of the current visible region.</p><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">options.z</code> (number, optional) - To calculate a bounding volume for fetching 3D data, this option can be used to get the bounding region at a specific elevation. Default <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">0</code>.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">An array of 4 corners in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[longitude, latitude, altitude]</code> that define the visible region.</li></ul><h5 style="position:relative" id="fitboundsbounds-options-object" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#fitboundsbounds-options-object" aria-label="code classlanguage textfitboundsbounds options objectcode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">fitBounds(bounds, options: object)</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get a new flat viewport that fits around the given bounding box.</p><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">bounds</code> ([<!-- -->[number,number]<!-- -->,<!-- -->[number,number]<!-- -->]) - an array of two opposite corners of
|
|
the bounding box. Each corner is specified in <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[lon, lat]</code>.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.padding</code> (number|{top:number, bottom: number, left: number, right: number}, optional) - The amount of
|
|
padding in pixels to add to the given bounds from the edge of the viewport. If padding is set as object, all parameters are
|
|
required.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.offset</code> (<!-- -->[number,number]<!-- -->, optional) - The center of the given bounds relative to the viewport's center, <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">[x, y]</code> measured in pixels.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.minExtent</code> (number, optional) - If supplied, the bounds used to calculate the new map settings will be expanded if the delta width or height of the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> is smaller than this value.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">opts.maxZoom</code>=<code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">24</code> (number, optional) - The returned zoom value will be capped to this value. Avoids returning infinite <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">zoom</code> when the supplied <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">bounds</code> have zero width or height deltas.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><ul class="typography__List-sc-1pmaksm-9 hsOfQe"><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy">A new <code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">WebMercatorViewport</code> instance</li></ul><h5 style="position:relative" id="getmapcenterbylnglatpositionoptions-object-number-number" class="typography__H5-sc-1pmaksm-6 dNeACf"><a href="#getmapcenterbylnglatpositionoptions-object-number-number" aria-label="code classlanguage textgetmapcenterbylnglatpositionoptions object number numbercode 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 class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">getMapCenterByLngLatPosition(options: object): [number, number]</code></h5><p class="typography__P-sc-1pmaksm-8 cncNYa">Get the map center that place a given <!-- -->[lng, lat]<!-- --> coordinate at screen point <!-- -->[x, y]<!-- -->.</p><p class="typography__P-sc-1pmaksm-8 cncNYa">Parameters:</p><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">options.lngLat</code> (Array, required) - <!-- -->[lng,lat]<!-- --> coordinates of a location on the sphere.</li><li class="typography__ListItem-sc-1pmaksm-10 kVRSNy"><code class="typography__InlineCode-sc-1pmaksm-12 egvBsN language-text">options.pos</code> (Array, required) - <!-- -->[x,y]<!-- --> coordinates of a pixel on screen.</li></ul><p class="typography__P-sc-1pmaksm-8 cncNYa">Returns:</p><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">[longitude, latitude]</code> as the new map center</li></ul></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/api-reference/web-mercator-viewport";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-27d1c1f505dad8dcb0bf.js"],"app":["/app-58440f29242e55fac5e3.js"],"component---examples-clusters-src-app-js":["/component---examples-clusters-src-app-js-71c2eb2a34d6826fd04b.js"],"component---examples-controls-src-app-js":["/component---examples-controls-src-app-js-2b8e7448bb4a052847d1.js"],"component---examples-custom-cursor-src-app-js":["/component---examples-custom-cursor-src-app-js-37fcc68696a0c9739502.js"],"component---examples-draggable-markers-src-app-js":["/component---examples-draggable-markers-src-app-js-4fa2b8391fdb31334ecd.js"],"component---examples-draw-polygon-src-app-js":["/component---examples-draw-polygon-src-app-js-a34bab23c903ff0d55ef.js"],"component---examples-filter-src-app-js":["/component---examples-filter-src-app-js-1ae2a33eac75d717984e.js"],"component---examples-geojson-animation-src-app-js":["/component---examples-geojson-animation-src-app-js-f811d5ce3360516a2fc7.js"],"component---examples-geojson-src-app-js":["/component---examples-geojson-src-app-js-329bf0e586dd2ce4a0ce.js"],"component---examples-heatmap-src-app-js":["/component---examples-heatmap-src-app-js-2fd17e53e1ab83d2e8a6.js"],"component---examples-interaction-src-app-js":["/component---examples-interaction-src-app-js-ced1d318641b85bc48be.js"],"component---examples-layers-src-app-js":["/component---examples-layers-src-app-js-0102c9fe4ce1a9892dcb.js"],"component---examples-locate-user-src-app-js":["/component---examples-locate-user-src-app-js-4810f9f856c45f18a4f4.js"],"component---examples-viewport-animation-src-app-js":["/component---examples-viewport-animation-src-app-js-632796bdf22aca3cd796.js"],"component---examples-zoom-to-bounds-src-app-js":["/component---examples-zoom-to-bounds-src-app-js-738ee71ff9e3d1ceb8cc.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-5428c6cd0874988e6a97.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-71cf7f05173b1dddaaf7.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-5428c6cd0874988e6a97.js" async=""></script><script src="/react-map-gl/app-58440f29242e55fac5e3.js" async=""></script><script src="/react-map-gl/framework-cc409ead3d26361b9ba0.js" async=""></script><script src="/react-map-gl/webpack-runtime-a47292676d6534678190.js" async=""></script></body></html> |