{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/mapContainer/MapContainer.js\",\n    _this = this,\n    _s = $RefreshSig$();\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport { useCallback, useEffect, useState } from 'react';\nimport GoogleMapReact from 'google-map-react';\nimport cn from 'classnames';\nimport styles from './MapContainer.module.scss';\nimport googleMapStyles from './googleMapStyles.json';\n\nvar Marker = function Marker(_ref) {\n  var title = _ref.title,\n      color = _ref.color,\n      onMouseEvent = _ref.onMouseEvent,\n      highlight = _ref.highlight;\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    onMouseOver: onMouseEvent,\n    onMouseOut: onMouseEvent,\n    onClick: onMouseEvent,\n    className: cn(styles.marker, highlight && styles.highlight),\n    children: /*#__PURE__*/_jsxDEV(\"span\", {\n      className: cn(styles.dot, color && styles[color])\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 16,\n      columnNumber: 4\n    }, _this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 10,\n    columnNumber: 3\n  }, _this);\n};\n\n_c = Marker;\n\nvar CityMarker = function CityMarker(props) {\n  var available = props.available,\n      rest = _objectWithoutProperties(props, [\"available\"]);\n\n  return /*#__PURE__*/_jsxDEV(Marker, _objectSpread(_objectSpread({}, props), {}, {\n    color: available ? 'black' : 'grey'\n  }), void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 26,\n    columnNumber: 3\n  }, _this);\n};\n\n_c2 = CityMarker;\n\nvar HouseMarker = function HouseMarker(props) {\n  return /*#__PURE__*/_jsxDEV(Marker, _objectSpread({}, props), void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 34,\n    columnNumber: 3\n  }, _this);\n};\n\n_c3 = HouseMarker;\nvar franceBounds = [{\n  lat: 49.5,\n  lng: 2.1\n}, {\n  lat: 48.5,\n  lng: 7.2\n}, {\n  lat: 43.7,\n  lng: 2.8\n}, {\n  lat: 47.8,\n  lng: -3\n}];\n\nvar MapContainer = function MapContainer(_ref2) {\n  _s();\n\n  var _ref2$center = _ref2.center,\n      center = _ref2$center === void 0 ? {\n    lat: 46.711,\n    lng: 1.719\n  } : _ref2$center,\n      _ref2$zoom = _ref2.zoom,\n      zoom = _ref2$zoom === void 0 ? 7 : _ref2$zoom,\n      centerOnFrance = _ref2.centerOnFrance,\n      cities = _ref2.cities,\n      houses = _ref2.houses,\n      handleMouseEvent = _ref2.handleMouseEvent,\n      highlightCity = _ref2.highlightCity,\n      highlightHouse = _ref2.highlightHouse,\n      centerOn = _ref2.centerOn,\n      overlayKey = _ref2.overlayKey,\n      overlay = _ref2.overlay;\n  // TODO: get api key from client; hide?\n  var apiKey = 'AIzaSyB3NIuO8CT1qZEx3H_gb5sd-z64a7gadJg';\n  var filteredCities = cities && cities.filter(function (city) {\n    return !!city.geolocation;\n  });\n  var filteredHouses = houses && houses.filter(function (house) {\n    return !!house.geolocation;\n  });\n\n  var _useState = useState(null),\n      map = _useState[0],\n      setMap = _useState[1];\n\n  var onMapLoaded = useCallback(function (_ref3) {\n    var map = _ref3.map,\n        maps = _ref3.maps;\n    var latLngBounds = new google.maps.LatLngBounds();\n\n    if (centerOnFrance) {\n      franceBounds.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.lat, item.lng));\n      });\n    } else {\n      filteredCities && filteredCities.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng));\n      });\n      filteredHouses && filteredHouses.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng));\n      });\n    }\n\n    map.fitBounds(latLngBounds);\n    setMap(map);\n  }, [centerOnFrance, filteredCities, filteredHouses]);\n  useEffect(function () {\n    if (map && centerOn && centerOn != '') {\n      var onCity = filteredCities && filteredCities.filter(function (item) {\n        return item.slug == centerOn;\n      });\n\n      if (onCity && onCity.length) {\n        map.panTo(new google.maps.LatLng(onCity[0].geolocation.lat - 2, onCity[0].geolocation.lng));\n      } // const onHouse = filteredHouses && filteredHouses.filter(item => item.slug == centerOn)\n      // if(onHouse && onHouse.length) {\n      // \tmap.panTo(new google.maps.LatLng(onHouse[0].geolocation.lat, onHouse[0].geolocation.lng))\n      // }\n\n    }\n  }, [map, centerOn]);\n  var mapOptions = useCallback(function (map) {\n    return {\n      scrollwheel: false,\n      styles: googleMapStyles\n    };\n  }, []);\n  return (\n    /*#__PURE__*/\n    // Important! Always set the container height explicitly\n    _jsxDEV(\"div\", {\n      className: cn(styles.mapContainer),\n      children: [/*#__PURE__*/_jsxDEV(GoogleMapReact, {\n        bootstrapURLKeys: {\n          key: apiKey\n        },\n        defaultCenter: center,\n        defaultZoom: zoom,\n        onGoogleApiLoaded: onMapLoaded,\n        options: mapOptions,\n        gestureHandling: 'none',\n        onClick: handleMouseEvent && function (event) {\n          return handleMouseEvent('mapClick', null);\n        } //yesIWantToUseGoogleMapApiInternals\n        ,\n        children: [map && filteredCities && filteredCities.map(function (markerInfos) {\n          return /*#__PURE__*/_jsxDEV(CityMarker, {\n            lat: markerInfos.geolocation.lat,\n            lng: markerInfos.geolocation.lng,\n            title: markerInfos.title,\n            available: markerInfos.open,\n            onMouseEvent: handleMouseEvent && function (event) {\n              return handleMouseEvent(event.type, markerInfos.slug);\n            },\n            highlight: highlightCity == markerInfos.slug\n          }, markerInfos.slug, false, {\n            fileName: _jsxFileName,\n            lineNumber: 116,\n            columnNumber: 6\n          }, _this);\n        }), map && filteredHouses && filteredHouses.map(function (markerInfos) {\n          return /*#__PURE__*/_jsxDEV(HouseMarker, {\n            lat: markerInfos.geolocation.lat,\n            lng: markerInfos.geolocation.lng,\n            title: markerInfos.title,\n            color: markerInfos.statusColor,\n            onMouseEvent: handleMouseEvent && function (event) {\n              return handleMouseEvent(event.type, markerInfos.slug);\n            },\n            highlight: highlightHouse == markerInfos.slug\n          }, markerInfos.slug, false, {\n            fileName: _jsxFileName,\n            lineNumber: 127,\n            columnNumber: 6\n          }, _this);\n        })]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 105,\n        columnNumber: 4\n      }, _this), overlay && /*#__PURE__*/_jsxDEV(\"div\", {\n        className: cn(styles.overlay),\n        children: overlay\n      }, overlayKey, false, {\n        fileName: _jsxFileName,\n        lineNumber: 149,\n        columnNumber: 5\n      }, _this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 104,\n      columnNumber: 3\n    }, _this)\n  );\n};\n\n_s(MapContainer, \"krAo87BdCCi8fFVJeE4nnsJyy2M=\");\n\n_c4 = MapContainer;\nexport default MapContainer;\n\nvar _c, _c2, _c3, _c4;\n\n$RefreshReg$(_c, \"Marker\");\n$RefreshReg$(_c2, \"CityMarker\");\n$RefreshReg$(_c3, \"HouseMarker\");\n$RefreshReg$(_c4, \"MapContainer\");","map":{"version":3,"sources":["/home/gkkdzdg/www/src/components/mapContainer/MapContainer.js"],"names":["useCallback","useEffect","useState","GoogleMapReact","cn","styles","googleMapStyles","Marker","title","color","onMouseEvent","highlight","marker","dot","CityMarker","props","available","rest","HouseMarker","franceBounds","lat","lng","MapContainer","center","zoom","centerOnFrance","cities","houses","handleMouseEvent","highlightCity","highlightHouse","centerOn","overlayKey","overlay","apiKey","filteredCities","filter","city","geolocation","filteredHouses","house","map","setMap","onMapLoaded","maps","latLngBounds","google","LatLngBounds","forEach","item","extend","LatLng","fitBounds","onCity","slug","length","panTo","mapOptions","scrollwheel","mapContainer","key","event","markerInfos","open","type","statusColor"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport GoogleMapReact from 'google-map-react'\nimport cn from 'classnames'\nimport styles from './MapContainer.module.scss'\nimport googleMapStyles from './googleMapStyles.json'\n\nconst Marker = ({ title, color, onMouseEvent, highlight, }) => {\n\n\treturn (\n\t\t<div\n\t\t\tonMouseOver={onMouseEvent}\n\t\t\tonMouseOut={onMouseEvent}\n\t\t\tonClick={onMouseEvent}\n\t\t\tclassName={cn(styles.marker, highlight && styles.highlight)}\n\t\t\t>\n\t\t\t<span className={cn(styles.dot, color && styles[color])}></span>\n\t\t\t{/* <img className={cn(styles.markerImg)} src={CityMarkerImg} /> */}\n\t\t\t{/* <span className={cn(styles.markerTitle)}>{title}</span> */}\n\t\t</div>\n\t)\n}\nconst CityMarker = (props) => {\n\tconst { available, ...rest } = props\n\n\treturn (\n\t\t<Marker\n\t\t\t{...props}\n\t\t\tcolor={available ? 'black' : 'grey'}\n\t\t/>\n\t)\n}\nconst HouseMarker = (props) => {\n\treturn (\n\t\t<Marker\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nconst franceBounds = [\n\t{ lat: 49.5, lng: 2.1 },\n\t{ lat: 48.5, lng: 7.2 },\n\t{ lat: 43.7, lng: 2.8 },\n\t{ lat: 47.8, lng: -3 },\n]\n\nconst MapContainer = ({\n\tcenter = {\n\t\tlat: 46.711,\n\t\tlng: 1.719,\n\t},\n\tzoom = 7,\n\tcenterOnFrance,\n\tcities,\n\thouses,\n\thandleMouseEvent,\n\thighlightCity,\n\thighlightHouse,\n\tcenterOn,\n\toverlayKey,\n\toverlay,\n}) => {\n\n\t// TODO: get api key from client; hide?\n\tconst apiKey = 'AIzaSyB3NIuO8CT1qZEx3H_gb5sd-z64a7gadJg'\n\n\tconst filteredCities = cities && cities.filter(city => !!city.geolocation)\n\tconst filteredHouses = houses && houses.filter(house => !!house.geolocation)\n\tconst [map, setMap] = useState(null)\n\n\tconst onMapLoaded = useCallback(({ map, maps }) => {\n\t\tlet latLngBounds = new google.maps.LatLngBounds()\n\t\tif(centerOnFrance) {\n\t\t\tfranceBounds.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.lat, item.lng)))\n\t\t}\n\t\telse {\n\t\t\tfilteredCities && filteredCities.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)))\n\t\t\tfilteredHouses && filteredHouses.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)))\n\t\t}\n\t\tmap.fitBounds(latLngBounds)\n\t\tsetMap(map)\n\t}, [centerOnFrance, filteredCities, filteredHouses])\n\n\tuseEffect(() => {\n\t\tif(map && centerOn && centerOn != '') {\n\t\t\tconst onCity = filteredCities && filteredCities.filter(item => item.slug == centerOn)\n\t\t\tif(onCity && onCity.length) {\n\t\t\t\tmap.panTo(new google.maps.LatLng(onCity[0].geolocation.lat - 2, onCity[0].geolocation.lng))\n\t\t\t}\n\t\t\t// const onHouse = filteredHouses && filteredHouses.filter(item => item.slug == centerOn)\n\t\t\t// if(onHouse && onHouse.length) {\n\t\t\t// \tmap.panTo(new google.maps.LatLng(onHouse[0].geolocation.lat, onHouse[0].geolocation.lng))\n\t\t\t// }\n\t\t}\n\t}, [map, centerOn])\n\n\tconst mapOptions = useCallback(map => ({\n\t\tscrollwheel: false,\n\t\tstyles: googleMapStyles,\n\t}), [])\n\n\treturn (\n\t\t// Important! Always set the container height explicitly\n\t\t<div className={cn(styles.mapContainer)}>\n\t\t\t<GoogleMapReact\n\t\t\t\tbootstrapURLKeys={{ key: apiKey }}\n\t\t\t\tdefaultCenter={center}\n\t\t\t\tdefaultZoom={zoom}\n\t\t\t\tonGoogleApiLoaded={onMapLoaded}\n\t\t\t\toptions={mapOptions}\n\t\t\t\tgestureHandling={'none'}\n\t\t\t\tonClick={handleMouseEvent && (event => handleMouseEvent('mapClick', null))}\n\t\t\t\t//yesIWantToUseGoogleMapApiInternals\n\t\t\t>\n\t\t\t\t{map && filteredCities && filteredCities.map(markerInfos =>\n\t\t\t\t\t<CityMarker\n\t\t\t\t\t\tkey={markerInfos.slug}\n\t\t\t\t\t\tlat={markerInfos.geolocation.lat}\n\t\t\t\t\t\tlng={markerInfos.geolocation.lng}\n\t\t\t\t\t\ttitle={markerInfos.title}\n\t\t\t\t\t\tavailable={markerInfos.open}\n\t\t\t\t\t\tonMouseEvent={handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug))}\n\t\t\t\t\t\thighlight={highlightCity == markerInfos.slug}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t{map && filteredHouses && filteredHouses.map(markerInfos =>\n\t\t\t\t\t<HouseMarker\n\t\t\t\t\t\tkey={markerInfos.slug}\n\t\t\t\t\t\tlat={markerInfos.geolocation.lat}\n\t\t\t\t\t\tlng={markerInfos.geolocation.lng}\n\t\t\t\t\t\ttitle={markerInfos.title}\n\t\t\t\t\t\tcolor={markerInfos.statusColor}\n\t\t\t\t\t\tonMouseEvent={handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug))}\n\t\t\t\t\t\thighlight={highlightHouse == markerInfos.slug}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{/* {franceBounds.map(markerInfos =>\n\t\t\t\t\t<CityMarker\n\t\t\t\t\t\tkey={'fr'}\n\t\t\t\t\t\tlat={markerInfos.lat}\n\t\t\t\t\t\tlng={markerInfos.lng}\n\t\t\t\t\t\ttitle={'fr'}\n\t\t\t\t\t/>\n\t\t\t\t)} */}\n\t\t\t\t\n\t\t\t</GoogleMapReact>\n\n\t\t\t{overlay &&\n\t\t\t\t<div className={cn(styles.overlay,)} key={overlayKey}>\n\t\t\t\t\t{overlay}\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t</div>\n\t)\n}\n\nexport default MapContainer"]},"metadata":{},"sourceType":"module"}