react-map-gl/component---examples-draggable-markers-src-app-js-750aa1fd5d8ef7c5deb5.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{oByp:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return v})),n.d(t,"renderToDom",(function(){return O}));var r=n("rePB"),a=n("q1tI"),o=n("i8i4"),l=n("oXiK"),c=["onDragStart","onDrag","onDragEnd"];function i(e){return(Math.round(1e5*e)/1e5).toFixed(5)}function u(e){return a.createElement("div",{className:"control-panel"},a.createElement("h3",null,"Draggable Marker"),a.createElement("p",null,"Try dragging the marker to another location."),a.createElement("div",null,c.map((function(t){var n=e.events,r=(void 0===n?{}:n)[t];return a.createElement("div",{key:t},a.createElement("strong",null,t,":")," ",r?r.map(i).join(", "):a.createElement("em",null,"null"))}))),a.createElement("div",{className:"source-link"},a.createElement("a",{href:"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/draggable-markers",target:"_new"},"View Code ↗")))}var s=a.memo(u),g={fill:"#d00",stroke:"none"};function m(e){var t=e.size,n=void 0===t?20:t;return a.createElement("svg",{height:n,viewBox:"0 0 24 24",style:g},a.createElement("path",{d:"M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3\n  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9\n  C20.1,15.8,20.2,15.8,20.2,15.7z"}))}var d=a.memo(m);function p(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?p(Object(n),!0).forEach((function(t){Object(r.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var f={position:"absolute",top:0,left:0,padding:"10px"};function v(){var e=Object(a.useState)({latitude:40,longitude:-100,zoom:3.5,bearing:0,pitch:0}),t=e[0],n=e[1],r=Object(a.useState)({latitude:40,longitude:-100}),o=r[0],c=r[1],i=Object(a.useState)({}),u=i[0],g=i[1],m=Object(a.useCallback)((function(e){g((function(t){return b(b({},t),{},{onDragStart:e.lngLat})}))}),[]),p=Object(a.useCallback)((function(e){g((function(t){return b(b({},t),{},{onDrag:e.lngLat})}))}),[]),v=Object(a.useCallback)((function(e){g((function(t){return b(b({},t),{},{onDragEnd:e.lngLat})})),c({longitude:e.lngLat[0],latitude:e.lngLat[1]})}),[]);return a.createElement(a.Fragment,null,a.createElement(l.default,Object.assign({},t,{width:"100%",height:"100%",mapStyle:"mapbox://styles/mapbox/dark-v9",onViewportChange:n,mapboxApiAccessToken:""}),a.createElement(l.Marker,{longitude:o.longitude,latitude:o.latitude,offsetTop:-20,offsetLeft:-10,draggable:!0,onDragStart:m,onDrag:p,onDragEnd:v},a.createElement(d,{size:20})),a.createElement("div",{className:"nav",style:f},a.createElement(l.NavigationControl,null))),a.createElement(s,{events:u}))}function O(e){Object(o.render)(a.createElement(v,null),e)}}}]);