mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
1 line
29 KiB
JSON
1 line
29 KiB
JSON
{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/map-controller","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"mapcontroller\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h1\"\n }, {\n \"href\": \"#mapcontroller\",\n \"aria-label\": \"mapcontroller permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), \"MapController\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://img.shields.io/badge/since-v4.0-green\",\n \"alt\": \"Since v4.0\"\n }))), mdx(\"p\", null, \"The easiest way to create a custom map control is to extend the default \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"MapController\"), \" class.\"), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), \"Properties\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-texteventscode-array\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-texteventscode-array\",\n \"aria-label\": \"code classlanguage texteventscode array permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"events\"), \" (Array)\"), mdx(\"p\", null, \"A list of additional event names that this control subscribes to.\"), mdx(\"p\", null, \"Available events: \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"click\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"dblclick\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"tap\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"doubletap\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"press\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinch\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchin\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchout\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchstart\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchmove\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchend\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pinchcancel\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"rotate\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"rotatestart\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"rotatemove\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"rotateend\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"rotatecancel\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pan\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panstart\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panmove\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panup\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pandown\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panleft\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panright\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"panend\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pancancel\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"swipe\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"swipeleft\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"swiperight\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"swipeup\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"swipedown\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pointerdown\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pointermove\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"pointerup\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"keydown\"), \", and \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"keyup\"), \".\"), mdx(\"p\", null, \"The following events are toggled on/off by InteractiveMap props: \"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"scrollZoom\"), \" - \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"['wheel']\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"dragPan\"), \" and \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"dragRotate\"), \" - \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"['panstart', 'panmove', 'panend']\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"touchZoomRotate\"), \" - \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"['pinchstart', 'pinchmove', 'pinchend']\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"doubleClickZoom\"), \" - \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"['doubletap']\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"keyboard\"), \" - \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"['keydown']\"))), mdx(\"p\", null, \"Event object is generated by \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/uber-web/mjolnir.js\"\n }), \"mjolnir.js\"), \". It always has the following properties:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"type\"), \" (string) - The event type to which the event handler is subscribed, e.g. \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'click'\"), \" or \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'pointermove'\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"center\"), \" (Object \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"{x, y}\"), \") - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, \", mdx(\"a\", _extends({\n parentName: \"li\"\n }, {\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX\"\n }), mdx(\"code\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"language-text\"\n }), \"clientX/Y\")), \")\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"offsetCenter\"), \" (Object \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"{x, y}\"), \") - The center of the event location relative to the map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"target\"), \" (Object) - The target of the event, as specified by the original \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"srcEvent\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"srcEvent\"), \" (Object) - The original event object dispatched by the browser to the JS runtime\")), mdx(\"p\", null, \"Additionally, event objects for different event types contain a subset of the following properties:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"key\"), \" (number) - The keycode of the keyboard event\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"leftButton\"), \" (boolean) - Flag indicating whether the left button is involved during the event\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"middleButton\"), \" (boolean) - Flag indicating whether the middle button is involved during the event\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"rightButton\"), \" (boolean) - Flag indicating whether the right button is involved during the event\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"pointerType\"), \" (string) - A string indicating the type of input (e.g. \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'mouse'\"), \", \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'touch'\"), \", \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'pointer'\"), \")\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"delta\"), \" (number) - The scroll magnitude/distance of a wheel event\")), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), \"Methods\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-texthandleeventcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-texthandleeventcode\",\n \"aria-label\": \"code classlanguage texthandleeventcode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"handleEvent\")), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"handleEvent(event)\")), mdx(\"p\", null, \"Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPanStart(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPan(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPanEnd(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPinchStart(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPinch(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onPinchEnd(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onDoubleTap(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onWheel(event)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"_onKeyDown(event)\"))), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textgetmapstatecode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textgetmapstatecode\",\n \"aria-label\": \"code classlanguage textgetmapstatecode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"getMapState\")), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"getMapState(overrides)\")), mdx(\"p\", null, \"Get a new descriptor object of the map state. If specified, props in the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"overrides\"), \" object override the current map props.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textsetoptionscode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textsetoptionscode\",\n \"aria-label\": \"code classlanguage textsetoptionscode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"setOptions\")), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"setOptions(options)\")), mdx(\"p\", null, \"Add/remove event listeners based on the latest \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"InteractiveMap\"), \" props.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textupdateviewportcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textupdateviewportcode\",\n \"aria-label\": \"code classlanguage textupdateviewportcode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"updateViewport\")), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"updateViewport(newMapState, extraProps, interactionState)\")), mdx(\"p\", null, \"Invoke \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"onViewportChange\"), \" callback with a new map state.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"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\"\n })))), \"Source\"), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/src/utils/map-controller.js\"\n }), \"map-controller.js\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"MapController The easiest way to create a custom map control is to extend the default MapController class. Properties events (Array) A…","frontmatter":{"title":"MapController"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../../get-started/faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../../get-started/state-management":"/docs/get-started/state-management"},"title":"MapController","slug":"docs/api-reference/map-controller","toc":"docs"}},"staticQueryHashes":["484347790"]} |