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

71 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 2.32.0"/><title data-react-helmet="true">react-map-gl | Limit Map Interaction Example</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:type" content="article"/><meta data-react-helmet="true" property="og:title" content="react-map-gl | Limit Map Interaction Example"/><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 | Limit Map Interaction Example"/><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 | Limit Map Interaction Example","image":"https://github.com/visgl/images/hero-sm.jpg"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://github.com/visgl","name":"react-map-gl | Limit Map Interaction Example","headline":"react-map-gl | Limit Map Interaction Example","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 ljEIIX cqPqff dOqWDz cowmvG eYbFBV idNLwm" data-styled-version="4.4.1">
/* sc-component-id: body__BodyContainerToC-lvm4v2-1 */
.idNLwm{height:100%;width:100%;padding:64px 0 0 300px;} @media screen and (max-width:768px){.idNLwm{height:calc(100vh - 64px);padding:0;-webkit-order:2;-ms-flex-order:2;order:2;}}
/* sc-component-id: body__Body-lvm4v2-3 */
.ckjqBY{font:normal 14px/20px UberMove,Helvetica,Arial,sans-serif;width:100vw;height:100vh;}
/* sc-component-id: toc__TocChevron-c2gnov-0 */
.ljEIIX{height:16px;width:16px;position:absolute;left:24px;top:20px;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;}
/* 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;}
/* 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 */
.dOqWDz{list-style:none;margin:0;max-height:896px;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;}</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-b299849377ee80f100b6.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/834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.js"/><link as="script" rel="preload" href="/react-map-gl/component---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js"/><link as="fetch" rel="preload" href="/react-map-gl/page-data/examples/interaction/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="Examples" class="toc__TocEntry-c2gnov-1 jcCSEG"><svg viewBox="0 0 24 24" class="toc__TocChevron-c2gnov-0 ljEIIX" width="24" height="24"><title>Chevron Down</title><path transform="rotate(270, 12, 12)" fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.2652 9.10536 12.5196 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C9.10536 11.4804 9 11.7348 9 12Z"></path></svg><span class="toc__TocHeader-c2gnov-2 cqPqff">Examples</span></div><ul class="toc__TocSubpages-c2gnov-4 dOqWDz"><div><li><div title="Dynamic Styling" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Dynamic Styling" href="/react-map-gl/examples/layers">Dynamic Styling</a></div></div></li></div><div><li><div title="Markers &amp; Popups" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Markers &amp; Popups" href="/react-map-gl/examples/controls">Markers &amp; Popups</a></div></div></li></div><div><li><div title="Custom Cursor" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Custom Cursor" href="/react-map-gl/examples/custom-cursor">Custom Cursor</a></div></div></li></div><div><li><div title="Draggable Marker" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draggable Marker" href="/react-map-gl/examples/draggable-markers">Draggable Marker</a></div></div></li></div><div><li><div title="GeoJSON" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON" href="/react-map-gl/examples/geojson">GeoJSON</a></div></div></li></div><div><li><div title="GeoJSON Animation" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="GeoJSON Animation" href="/react-map-gl/examples/geojson-animation">GeoJSON Animation</a></div></div></li></div><div><li><div title="Clusters" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Clusters" href="/react-map-gl/examples/clusters">Clusters</a></div></div></li></div><div><li><div title="Limit Map Interaction" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 eYbFBV"><a aria-current="page" title="Limit Map Interaction" class="" href="/react-map-gl/examples/interaction">Limit Map Interaction</a></div></div></li></div><div><li><div title="Camera Transition" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Camera Transition" href="/react-map-gl/examples/viewport-animation">Camera Transition</a></div></div></li></div><div><li><div title="Highlight By Filter" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Highlight By Filter" href="/react-map-gl/examples/filter">Highlight By Filter</a></div></div></li></div><div><li><div title="Zoom To Bounds" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Zoom To Bounds" href="/react-map-gl/examples/zoom-to-bounds">Zoom To Bounds</a></div></div></li></div><div><li><div title="Heatmap" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Heatmap" href="/react-map-gl/examples/heatmap">Heatmap</a></div></div></li></div><div><li><div title="Draw Polygon" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Draw Polygon" href="/react-map-gl/examples/draw-polygon">Draw Polygon</a></div></div></li></div><div><li><div title="Terrain" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Terrain" href="/react-map-gl/examples/terrain">Terrain</a></div></div></li></div><div><li><div title="Geocoder" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Geocoder" href="/react-map-gl/examples/geocoder">Geocoder</a></div></div></li></div><div><li><div title="Side by Side" class="toc__TocEntry-c2gnov-1 bdPEit"><div class="toc__TocLink-c2gnov-3 cowmvG"><a title="Side by Side" href="/react-map-gl/examples/side-by-side">Side by Side</a></div></div></li></div></ul></div></div><div class="body__BodyContainerToC-lvm4v2-1 idNLwm"><div style="position:relative;width:100%;height:100%"></div><div class="control-panel"><h3>Limit Map Interaction</h3><p>Turn interactive features off/on.</p><div class="source-link"><a href="https://github.com/visgl/react-map-gl/tree/7.0-release/examples/interaction" target="_new">View Code ↗</a></div><hr/><div class="input"><label>scroll Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>box Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>drag Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>drag Pan</label><input type="checkbox" checked=""/></div><div class="input"><label>keyboard</label><input type="checkbox" checked=""/></div><div class="input"><label>double Click Zoom</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Zoom Rotate</label><input type="checkbox" checked=""/></div><div class="input"><label>touch Pitch</label><input type="checkbox" checked=""/></div><div class="input"><label>min Zoom</label><input type="number" value="0"/></div><div class="input"><label>max Zoom</label><input type="number" value="20"/></div><div class="input"><label>min Pitch</label><input type="number" value="0"/></div><div class="input"><label>max Pitch</label><input type="number" value="85"/></div><hr/></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="/examples/interaction";/*]]>*/</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-d64f7d83a89165ad193f.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-72ced1d3ef228c75c4a2.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-66f43d9bdd9acd36ee6b.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---examples-interaction-src-app-tsx-cbc73f781b670001e1cb.js" async=""></script><script src="/react-map-gl/834b8338ea35f2c3d17eb82aef29032efb222d04-5c03025532d02b573d86.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-b299849377ee80f100b6.js" async=""></script></body></html>
Reference in New Issue View Git Blame Copy Permalink