1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.default = void 0;
|
7 |
|
8 | var _react = _interopRequireWildcard(require("react"));
|
9 |
|
10 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
11 |
|
12 | var _InputOnly = _interopRequireDefault(require("./InputOnly"));
|
13 |
|
14 | var _Spacing = _interopRequireDefault(require("./Spacing"));
|
15 |
|
16 | var _reactGoogleMaps = require("react-google-maps");
|
17 |
|
18 | var _DrawingManager = _interopRequireDefault(require("react-google-maps/lib/components/drawing/DrawingManager"));
|
19 |
|
20 | var _SearchBox = _interopRequireDefault(require("react-google-maps/lib/components/places/SearchBox"));
|
21 |
|
22 | var _MarkerClusterer = _interopRequireDefault(require("react-google-maps/lib/components/addons/MarkerClusterer"));
|
23 |
|
24 | var _CinnectaTheme = _interopRequireDefault(require("../themes/CinnectaTheme"));
|
25 |
|
26 | var _MapCircle = _interopRequireDefault(require("./MapCircle"));
|
27 |
|
28 | var _MapPolygon = _interopRequireDefault(require("./MapPolygon"));
|
29 |
|
30 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
31 |
|
32 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
33 |
|
34 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
35 |
|
36 | 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); }
|
37 |
|
38 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
39 |
|
40 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
41 |
|
42 | function _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; }
|
43 |
|
44 | function _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; }
|
45 |
|
46 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
47 |
|
48 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
49 |
|
50 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
51 |
|
52 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
53 |
|
54 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
55 |
|
56 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
57 |
|
58 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
59 |
|
60 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
61 |
|
62 | var propTypes = {
|
63 | children: _propTypes.default.any,
|
64 | defaultZoom: _propTypes.default.number,
|
65 | defaultCenter: _propTypes.default.object,
|
66 | defaultClickableIcons: _propTypes.default.bool,
|
67 | editMode: _propTypes.default.bool,
|
68 | isCenterMarkerVisible: _propTypes.default.bool,
|
69 | places: _propTypes.default.bool,
|
70 | shapes: _propTypes.default.array,
|
71 | shapesToEnframe: _propTypes.default.array
|
72 | };
|
73 | var defaultProps = {
|
74 | defaultZoom: 5,
|
75 | defaultCenter: {
|
76 | lat: -19.932231,
|
77 | lng: -43.9266687
|
78 | },
|
79 | isCenterMarkerVisible: false,
|
80 | defaultOptions: {
|
81 | streetViewControl: false,
|
82 | scaleControl: false,
|
83 | mapTypeControl: false,
|
84 | panControl: false,
|
85 | zoomControl: false,
|
86 | rotateControl: false,
|
87 | fullscreenControl: false,
|
88 | clickableIcons: false,
|
89 | disableDefaultUI: true,
|
90 | styles: _CinnectaTheme.default.map
|
91 | },
|
92 | defaultClickableIcons: false
|
93 | };
|
94 | var shapeOptions = {
|
95 | fillColor: '#ee430e',
|
96 | strokeColor: '#ee430e',
|
97 | strokeWeight: 1,
|
98 | fillOpacity: .3,
|
99 | strokeOpacity: .5
|
100 | };
|
101 |
|
102 | var Map =
|
103 |
|
104 | function (_Component) {
|
105 | _inherits(Map, _Component);
|
106 |
|
107 | function Map(props) {
|
108 | var _this;
|
109 |
|
110 | _classCallCheck(this, Map);
|
111 |
|
112 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Map).call(this, props));
|
113 | _this.shapes = {};
|
114 | _this.state = {
|
115 | google: null,
|
116 | pristine: true
|
117 | };
|
118 | return _this;
|
119 | }
|
120 |
|
121 | _createClass(Map, [{
|
122 | key: "componentDidMount",
|
123 | value: function componentDidMount() {
|
124 | if (this.props.shapesToEnframe) {
|
125 | this.centerOnShapes(this.props.shapesToEnframe);
|
126 | }
|
127 | }
|
128 | }, {
|
129 | key: "componentDidUpdate",
|
130 | value: function componentDidUpdate(prevProps) {
|
131 | if (prevProps.shapesToEnframe !== this.props.shapesToEnframe) {
|
132 | this.centerOnShapes(this.props.shapesToEnframe);
|
133 | }
|
134 | }
|
135 | }, {
|
136 | key: "mapLoaded",
|
137 | value: function mapLoaded(ref) {
|
138 | var _this2 = this;
|
139 |
|
140 | if (ref && this.state.pristine) {
|
141 | this.map = ref;
|
142 | this.props.onMapLoaded && this.props.onMapLoaded();
|
143 | var google = ref.props.google;
|
144 |
|
145 | if (this.state.google !== google) {
|
146 | this.setState({
|
147 | google: google,
|
148 | pristine: false
|
149 | }, function () {
|
150 | return _this2.centerOnShapes(_this2.props.shapes);
|
151 | });
|
152 | }
|
153 | }
|
154 | }
|
155 | }, {
|
156 | key: "centerOnShapes",
|
157 | value: function centerOnShapes(shapes) {
|
158 | var google = this.state.google;
|
159 |
|
160 | if (shapes && shapes.length > 0 && google) {
|
161 | var bounds = new google.maps.LatLngBounds();
|
162 | shapes.map(function (shape) {
|
163 | if (shape.type === 'circle') {
|
164 | var _shape$center = shape.center,
|
165 | lat = _shape$center.lat,
|
166 | lng = _shape$center.lng;
|
167 | var latLng = new google.maps.LatLng(lat, lng);
|
168 | var latOffset = shape.radius / 111320;
|
169 | var lngOffset = shape.radius / (40075000 * Math.cos(lat) / 360);
|
170 | var leftLatLng = new google.maps.LatLng(lat - latOffset, lng);
|
171 | var rightLatLng = new google.maps.LatLng(lat + latOffset, lng);
|
172 | var topLatLng = new google.maps.LatLng(lat, lng - lngOffset);
|
173 | var bottomLatLng = new google.maps.LatLng(lat, lng + lngOffset);
|
174 | bounds.extend(latLng);
|
175 | bounds.extend(leftLatLng);
|
176 | bounds.extend(rightLatLng);
|
177 | bounds.extend(topLatLng);
|
178 | bounds.extend(bottomLatLng);
|
179 | } else {
|
180 | shape.path.map(function (node) {
|
181 | var lat = node.lat,
|
182 | lng = node.lng;
|
183 | var latLng = new google.maps.LatLng(lat, lng);
|
184 | bounds.extend(latLng);
|
185 | return true;
|
186 | });
|
187 | }
|
188 |
|
189 | return true;
|
190 | });
|
191 | this.map.fitBounds(bounds);
|
192 | }
|
193 | }
|
194 | }, {
|
195 | key: "mapMoved",
|
196 | value: function mapMoved() {
|
197 | this.props.onMapMoved && this.props.onMapMoved(this.map.getCenter());
|
198 | }
|
199 | }, {
|
200 | key: "zoomChanged",
|
201 | value: function zoomChanged() {
|
202 | this.props.onZoomChanged && this.props.onZoomChanged(this.map.getZoom());
|
203 | }
|
204 | }, {
|
205 | key: "placesChanged",
|
206 | value: function placesChanged(places) {
|
207 | places && places[0] && this.map.fitBounds(places[0].geometry.viewport);
|
208 | this.props.onPlacesChanged && this.props.onPlacesChanged(places);
|
209 | }
|
210 | }, {
|
211 | key: "render",
|
212 | value: function render() {
|
213 | var _this3 = this;
|
214 |
|
215 | var _this$props = this.props,
|
216 | children = _this$props.children,
|
217 | defaultCenter = _this$props.defaultCenter,
|
218 | isCenterMarkerVisible = _this$props.isCenterMarkerVisible,
|
219 | editMode = _this$props.editMode,
|
220 | highlightShape = _this$props.highlightShape,
|
221 | places = _this$props.places,
|
222 | shapes = _this$props.shapes,
|
223 | rest = _objectWithoutProperties(_this$props, ["children", "defaultCenter", "isCenterMarkerVisible", "editMode", "highlightShape", "places", "shapes"]);
|
224 |
|
225 | var google = this.state.google;
|
226 | return (
|
227 | _react.default.createElement(MapComponent, _extends({
|
228 | loadingElement: _react.default.createElement("div", {
|
229 | style: {
|
230 | height: "100%"
|
231 | }
|
232 | }),
|
233 | containerElement: _react.default.createElement("div", {
|
234 | style: {
|
235 | height: "100%"
|
236 | }
|
237 | }),
|
238 | mapElement: _react.default.createElement("div", {
|
239 | style: {
|
240 | height: "100%"
|
241 | }
|
242 | }),
|
243 | googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyBB6jb6anK2rjgXJDmXNfZzeFuiDOCqtu8&language=pt-BR&v=3.exp&libraries=geometry,drawing,places",
|
244 | defaultCenter: defaultCenter,
|
245 | mapMoved: function mapMoved() {
|
246 | return _this3.mapMoved();
|
247 | },
|
248 | zoomChanged: function zoomChanged() {
|
249 | return _this3.zoomChanged();
|
250 | },
|
251 | mapLoaded: function mapLoaded(ref) {
|
252 | return _this3.mapLoaded(ref);
|
253 | }
|
254 | }, rest), isCenterMarkerVisible && _react.default.createElement(_reactGoogleMaps.Marker, {
|
255 | position: defaultCenter
|
256 | }), editMode && google && _react.default.createElement(_DrawingManager.default, {
|
257 | defaultDrawingMode: google.maps.drawing.OverlayType.CIRCLE,
|
258 | defaultOptions: {
|
259 | drawingControl: true,
|
260 | drawingControlOptions: {
|
261 | position: google.maps.ControlPosition.TOP_RIGHT,
|
262 | drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON]
|
263 | },
|
264 | circleOptions: {
|
265 | fillColor: "#68A7F0",
|
266 | strokeWeight: 0,
|
267 | clickable: false,
|
268 | editable: true,
|
269 | zIndex: 1
|
270 | },
|
271 | polygonOptions: {
|
272 | fillColor: "#68A7F0",
|
273 | strokeWeight: 0,
|
274 | clickable: false,
|
275 | editable: true,
|
276 | zIndex: 1
|
277 | }
|
278 | }
|
279 | }), places && google && _react.default.createElement(_SearchBox.default, {
|
280 | ref: function ref(_ref) {
|
281 | return _this3.searchBox = _ref;
|
282 | },
|
283 | controlPosition: google.maps.ControlPosition.TOP_LEFT,
|
284 | onPlacesChanged: function onPlacesChanged() {
|
285 | return _this3.searchBox && _this3.placesChanged(_this3.searchBox.getPlaces());
|
286 | },
|
287 | onClose: function onClose() {},
|
288 | showSearchBox: true,
|
289 | onSelectStory: function onSelectStory() {}
|
290 | }, _react.default.createElement("div", {
|
291 | style: {
|
292 | maxWidth: 540,
|
293 | width: '100%',
|
294 | opacity: .9
|
295 | }
|
296 | }, _react.default.createElement(_Spacing.default, {
|
297 | top: 1,
|
298 | left: 1
|
299 | }, _react.default.createElement(_InputOnly.default, {
|
300 | floating: true,
|
301 | type: "text",
|
302 | placeholder: "Pesquise no mapa...",
|
303 | name: "googlePlaces"
|
304 | })))), _react.default.createElement(_MarkerClusterer.default, {
|
305 | averageCenter: true,
|
306 | enableRetinaIcons: true,
|
307 | gridSize: 60,
|
308 | maxZoom: 13,
|
309 | minimumClusterSize: 1
|
310 | }, shapes && shapes.map(function (shape) {
|
311 | if (shape.type === 'circle') {
|
312 | return _react.default.createElement(_MapCircle.default, {
|
313 | key: shape.id
|
314 | ,
|
315 | center: shape.center,
|
316 | radius: shape.radius,
|
317 | editable: shape.editable,
|
318 | draggable: shape.draggable,
|
319 | options: _objectSpread({}, shapeOptions, shape.color && {
|
320 | fillColor: shape.color
|
321 | }, highlightShape === shape.id && {
|
322 | fillColor: 'yellow'
|
323 | }, shape.color && {
|
324 | strokeColor: shape.color
|
325 | })
|
326 | });
|
327 | } else {
|
328 | return _react.default.createElement(_MapPolygon.default, {
|
329 | key: shape.id
|
330 | ,
|
331 | path: shape.path,
|
332 | options: _objectSpread({}, shapeOptions, shape.color && {
|
333 | fillColor: shape.color
|
334 | }, shape.color && {
|
335 | strokeColor: shape.color
|
336 | })
|
337 | });
|
338 | }
|
339 | }), children))
|
340 | );
|
341 | }
|
342 | }]);
|
343 |
|
344 | return Map;
|
345 | }(_react.Component);
|
346 |
|
347 | Map.propTypes = propTypes;
|
348 | Map.defaultProps = defaultProps;
|
349 | var MapComponent = (0, _reactGoogleMaps.withScriptjs)((0, _reactGoogleMaps.withGoogleMap)(function (_ref2) {
|
350 | var defaultCenter = _ref2.defaultCenter,
|
351 | mapMoved = _ref2.mapMoved,
|
352 | mapLoaded = _ref2.mapLoaded,
|
353 | zoomChanged = _ref2.zoomChanged,
|
354 | props = _objectWithoutProperties(_ref2, ["defaultCenter", "mapMoved", "mapLoaded", "zoomChanged"]);
|
355 |
|
356 | return _react.default.createElement(_reactGoogleMaps.GoogleMap, _extends({
|
357 | defaultCenter: defaultCenter,
|
358 | onIdle: mapMoved,
|
359 | ref: mapLoaded,
|
360 | onZoomChanged: zoomChanged,
|
361 | google: window.google
|
362 | }, props), props.children);
|
363 | }));
|
364 | var _default = Map;
|
365 | exports.default = _default; |
\ | No newline at end of file |