mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
87 lines
13 KiB
HTML
87 lines
13 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</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:title" content="react-map-gl"/><meta data-react-helmet="true" property="og:description" content="React wrapper for Mapbox GL JS"/><meta data-react-helmet="true" property="og:image" content="https://github.com/visgl/images/hero-sm.jpg"/><meta data-react-helmet="true" property="fb:app_id" content=""/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content=""/><meta data-react-helmet="true" name="twitter:title" content="react-map-gl"/><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"}]</script><script data-react-helmet="true" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-74374017-2"></script><style data-styled="ckjqBY kTxBVF jcCBQi cWWlRG dyloyq duddkX byxZlM hUDXst bMqhOg eTuzrY kUNTgu iZhuWO eCgMCt eTZWpm SJzLG bwWQsF jSoWkF" data-styled-version="4.4.1">
|
|
/* sc-component-id: body__BodyContainerFull-lvm4v2-0 */
|
|
.jcCBQi{margin:0 auto;padding:64px 0 0;} @media screen and (max-width:768px){.jcCBQi{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: 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: github-contributors__ContribContainer-sc-12w0yk9-0 */
|
|
.eTZWpm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
|
|
/* sc-component-id: home__Banner-f9hbqs-0 */
|
|
.cWWlRG{position:relative;height:30rem;background:#2b4845;color:#FFFFFF;z-index:0;} @media screen and (max-width:768px){.cWWlRG{height:80vh;}}
|
|
/* sc-component-id: home__Container-f9hbqs-1 */
|
|
.eCgMCt{position:relative;padding:2rem;max-width:80rem;width:100%;height:100%;margin:0;}
|
|
/* sc-component-id: home__BannerContainer-f9hbqs-2 */
|
|
.byxZlM{position:relative;padding:2rem;max-width:80rem;width:100%;height:100%;margin:0;position:absolute;bottom:0;height:auto;padding-left:4rem;z-index:0;pointer-events:none;}
|
|
/* sc-component-id: home__HeroExampleContainer-f9hbqs-3 */
|
|
.dyloyq{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
|
|
/* sc-component-id: home__Section-f9hbqs-4 */
|
|
.iZhuWO:nth-child(2n+1){background:#E8E8E8;}
|
|
/* sc-component-id: home__ProjectName-f9hbqs-5 */
|
|
.hUDXst{font-size:5em;line-height:1;text-transform:uppercase;-webkit-letter-spacing:4px;-moz-letter-spacing:4px;-ms-letter-spacing:4px;letter-spacing:4px;font-weight:700;margin:0;margin-bottom:16px;}
|
|
/* sc-component-id: home__GetStartedLink-f9hbqs-6 */
|
|
.bMqhOg{pointer-events:all;font-size:12px;line-height:44px;-webkit-letter-spacing:2px;-moz-letter-spacing:2px;-ms-letter-spacing:2px;letter-spacing:2px;font-weight:bold;margin:24px 0;padding:0 4rem;pointer-events:all;display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:background-color 250ms ease-in,color 250ms ease-in;transition:background-color 250ms ease-in,color 250ms ease-in;border:solid 2px #00ADE6;color:#FFFFFF;border-image:linear-gradient(to right,#00ADE6 0%,#D2E0FC 100%);border-image-slice:2;} .bMqhOg:visited{color:#FFFFFF;} .bMqhOg:active{color:#FFFFFF;} .bMqhOg:hover{color:#FFFFFF;background-color:#00ADE6;}
|
|
/* sc-component-id: home__Footer-f9hbqs-7 */
|
|
.SJzLG{position:absolute;bottom:-$footer-height;width:100%;z-index:2;background-image:url(data:image/gif;base64,R0lGODlhIAAgAKIAABUjMRYkMhclM0xXYU1YYgAAAAAAAAAAACwAAAAAIAAgAAADKjgjEP4wyklWmzg/IbTPwPWNZGmeaKqubOu+cCzPdG3feK7vfO//wKAwAQA7);background-size:32px;background-repeat:repeat;background-position:16px -8px;color:#FFFFFF;}
|
|
/* sc-component-id: home__FooterText-f9hbqs-8 */
|
|
.bwWQsF{font-size:12px;line-height:20px;font-weight:400;-webkit-letter-spacing:2px;-moz-letter-spacing:2px;-ms-letter-spacing:2px;letter-spacing:2px;opacity:0.4;margin-bottom:1rem;margin-right:1rem;}
|
|
/* sc-component-id: home__FooterLogo-f9hbqs-9 */
|
|
.jSoWkF{max-height:64px;max-width:64px;display:inline-block;}
|
|
/* sc-component-id: home__Icon-sc-1jcekwk-0 */
|
|
.kUNTgu{vertical-align:middle;width:36px;margin-right:8px;}
|
|
/* sc-component-id: home__HeroExample-sc-1jcekwk-1 */
|
|
.duddkX{background-image:url(images/hero.jpg);background-size:cover;background-position:center;height:100%;}
|
|
/* sc-component-id: home__ContentContainer-sc-1jcekwk-2 */
|
|
.eTuzrY{padding:64px;} @media screen and (max-width:768px){.eTuzrY{padding:48px;}}</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---src-home-js-71cf7f05173b1dddaaf7.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/index/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="body__BodyContainerFull-lvm4v2-0 jcCBQi"><main><section class="home__Banner-f9hbqs-0 cWWlRG"><div class="home__HeroExampleContainer-f9hbqs-3 dyloyq"><div class="home__HeroExample-sc-1jcekwk-1 duddkX"></div></div><div class="home__Container-f9hbqs-1 home__BannerContainer-f9hbqs-2 byxZlM"><h1 class="home__ProjectName-f9hbqs-5 hUDXst">react-map-gl</h1><p>React wrapper for Mapbox GL JS</p><a colortheme="dark" class="home__GetStartedLink-f9hbqs-6 bMqhOg" href="/react-map-gl/docs/get-started/get-started">GET STARTED</a></div></section><div class="home__ContentContainer-sc-1jcekwk-2 eTuzrY"><h2>react-map-gl makes using Mapbox GL JS in React applications easy.</h2><h3><img src="images/icon-react.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>React Integration</h3><p>Integration on browser and Node.js, exposing the full power of mapbox-gl.</p><h3><img src="images/icon-layers.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Component Library</h3><p>react-map-gl comes with additional React components that synchronize with the map camera system. Use one of the supported overlays to visualize data, or build your own.</p><h3><img src="images/icon-high-precision.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Part of vis.gl's Framework Suite</h3><p>Use together with e.g. <a href="https://deck.gl/" target="_blank" rel="noopener noreferrer">deck.gl</a> to render performant and compelling 2D and 3D WebGL visualizations on top of your Mapbox GL JS based maps.</p></div><section class="home__Section-f9hbqs-4 iZhuWO"><div class="home__Container-f9hbqs-1 eCgMCt"><div><h2 style="text-align:center">Contributors</h2><div class="github-contributors__ContribContainer-sc-12w0yk9-0 eTZWpm"></div></div></div></section><footer class="home__Footer-f9hbqs-7 SJzLG"><div class="home__Container-f9hbqs-1 eCgMCt"><div class="home__FooterText-f9hbqs-8 bwWQsF">Made by</div><img src="images/visgl-logo.png" alt="logo" class="home__FooterLogo-f9hbqs-9 jSoWkF"/></div></footer></main></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="/";/*]]>*/</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---src-home-js-71cf7f05173b1dddaaf7.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> |