mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
87 lines
14 KiB
HTML
87 lines
14 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.32.0"/><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.6.1/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.3.0/mapbox-gl-draw.css" type="text/css"/><link data-react-helmet="true" rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.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-53e1d5786ef6c6593773.js"/><link as="script" rel="preload" href="/react-map-gl/framework-47a7447cd78cae046a8b.js"/><link as="script" rel="preload" href="/react-map-gl/app-c33704d3a1abd6ea3046.js"/><link as="script" rel="preload" href="/react-map-gl/component---src-home-js-d077024a439c8e9d840e.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>Use Mapbox GL JS Map as a fully controlled reactive component.</p><h3><img src="images/icon-layers.svg" class="home__Icon-sc-1jcekwk-0 kUNTgu"/>Extensible</h3><p>Comes with additional React interfaces such as context and hooks to support custom components.</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-4b657be50967bad20dc3.js"],"app":["/app-c33704d3a1abd6ea3046.js"],"component---examples-clusters-src-app-tsx":["/component---examples-clusters-src-app-tsx-ae435c98aa31b91df409.js"],"component---examples-controls-src-app-tsx":["/component---examples-controls-src-app-tsx-0fc6f5753e0415fde950.js"],"component---examples-custom-cursor-src-app-tsx":["/component---examples-custom-cursor-src-app-tsx-bd123514f109e45b15c9.js"],"component---examples-draggable-markers-src-app-tsx":["/component---examples-draggable-markers-src-app-tsx-c08cc0293d6f625308f7.js"],"component---examples-draw-polygon-src-app-tsx":["/component---examples-draw-polygon-src-app-tsx-4287be5a2ea35fbe0113.js"],"component---examples-filter-src-app-tsx":["/component---examples-filter-src-app-tsx-28b144519a629b0e0c53.js"],"component---examples-geocoder-src-app-tsx":["/component---examples-geocoder-src-app-tsx-244936683de9dee32672.js"],"component---examples-geojson-animation-src-app-tsx":["/component---examples-geojson-animation-src-app-tsx-8eaab89aa0e2583bf5b2.js"],"component---examples-geojson-src-app-tsx":["/component---examples-geojson-src-app-tsx-96c6855ca732a70078ab.js"],"component---examples-heatmap-src-app-tsx":["/component---examples-heatmap-src-app-tsx-c7a35aaf435bc075107c.js"],"component---examples-interaction-src-app-tsx":["/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"],"component---examples-layers-src-app-tsx":["/component---examples-layers-src-app-tsx-cf13aa48a159342af3e3.js"],"component---examples-side-by-side-src-app-tsx":["/component---examples-side-by-side-src-app-tsx-c948e78a1a5129b01a93.js"],"component---examples-terrain-src-app-tsx":["/component---examples-terrain-src-app-tsx-7b12f3bb393a8bb524f0.js"],"component---examples-viewport-animation-src-app-tsx":["/component---examples-viewport-animation-src-app-tsx-8c2f70b3ab14cbdc2a58.js"],"component---examples-zoom-to-bounds-src-app-tsx":["/component---examples-zoom-to-bounds-src-app-tsx-2d6b6e19aa1d94266910.js"],"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx":["/component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx-298d6a55a92e5d120c0e.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-b867458182f2a5e115e0.js"],"component---src-home-js":["/component---src-home-js-d077024a439c8e9d840e.js"]};/*]]>*/</script><script src="/react-map-gl/polyfill-4b657be50967bad20dc3.js" nomodule=""></script><script src="/react-map-gl/component---src-home-js-d077024a439c8e9d840e.js" async=""></script><script src="/react-map-gl/app-c33704d3a1abd6ea3046.js" async=""></script><script src="/react-map-gl/framework-47a7447cd78cae046a8b.js" async=""></script><script src="/react-map-gl/webpack-runtime-53e1d5786ef6c6593773.js" async=""></script></body></html> |