react-map-gl/component---examples-interaction-src-app-js-f2d0479e7c40dac7abd5.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{"/c/Q":function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return E})),n.d(t,"renderToDom",(function(){return f}));var r=n("rePB"),a=n("q1tI"),l=n("i8i4"),c=n("oXiK"),o=/(^|[A-Z])[a-z]*/g;function i(e){return e.match(o).join(" ")}function u(e){var t=e.name,n=e.value,r=e.onChange;return a.createElement("div",{className:"input"},a.createElement("label",null,i(t)),a.createElement("input",{type:"checkbox",checked:n,onChange:function(e){return r(t,e.target.checked)}}))}function m(e){var t=e.name,n=e.value,r=e.onChange;return a.createElement("div",{className:"input"},a.createElement("label",null,i(t)),a.createElement("input",{type:"number",value:n,onChange:function(e){return r(t,Number(e.target.value))}}))}function s(e){var t=e.settings,n=e.interactionState,r=e.onChange;return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Limit Map Interaction"),a.createElement("p",null,"Turn interactive features off/on."),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/interaction",target:"_new"},"View Code ↗")),a.createElement("hr",null),Object.keys(t).map((function(e){return function(e,t){switch(typeof t){case"boolean":return a.createElement(u,{key:e,name:e,value:t,onChange:r});case"number":return a.createElement(m,{key:e,name:e,value:t,onChange:r});default:return null}}(e,t[e])})),a.createElement("hr",null),a.createElement("div",null,a.createElement("div",null,a.createElement("label",null,"Dragging"),a.createElement("span",null,n.isDragging&&"Yes")),a.createElement("div",null,a.createElement("label",null,"Transition"),a.createElement("span",null,n.inTransition&&"Yes")),a.createElement("div",null,a.createElement("label",null,"Panning"),a.createElement("span",null,n.isPanning&&"Yes")),a.createElement("div",null,a.createElement("label",null,"Rotating"),a.createElement("span",null,n.isRotating&&"Yes")),a.createElement("div",null,a.createElement("label",null,"Zooming"),a.createElement("span",null,n.isZooming&&"Yes"))))}var p=a.memo(s);function g(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?g(Object(n),!0).forEach((function(t){Object(r.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function E(){var e=Object(a.useState)({latitude:37.729,longitude:-122.36,zoom:11,bearing:0,pitch:50}),t=e[0],n=e[1],r=Object(a.useState)({}),l=r[0],o=r[1],i=Object(a.useState)({dragPan:!0,dragRotate:!0,scrollZoom:!0,touchZoom:!0,touchRotate:!0,keyboard:!0,doubleClickZoom:!0,minZoom:0,maxZoom:20,minPitch:0,maxPitch:85}),u=i[0],m=i[1],s=Object(a.useCallback)((function(e,t){return m((function(n){var r;return b(b({},n),{},((r={})[e]=t,r))}))}),[]);return a.createElement(a.Fragment,null,a.createElement(c.default,Object.assign({},t,u,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:n,onInteractionStateChange:function(e){return o(b({},e))},mapboxApiAccessToken:""})),a.createElement(p,{settings:u,interactionState:l,onChange:s}))}function f(e){Object(l.render)(a.createElement(E,null),e)}}}]);