{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/mapContainer/MapContainer.js\";\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\nfunction _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; }\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\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\nconst Marker = ({\n  title,\n  color,\n  onMouseEvent,\n  highlight\n}) => {\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\nconst CityMarker = props => {\n  const {\n    available\n  } = props,\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\nconst 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\nconst 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\nconst MapContainer = ({\n  center = {\n    lat: 46.711,\n    lng: 1.719\n  },\n  zoom = 7,\n  centerOnFrance,\n  cities,\n  houses,\n  handleMouseEvent,\n  highlightCity,\n  highlightHouse,\n  centerOn,\n  overlayKey,\n  overlay\n}) => {\n  // TODO: get api key from client; hide?\n  const apiKey = 'AIzaSyB3NIuO8CT1qZEx3H_gb5sd-z64a7gadJg';\n  const filteredCities = cities && cities.filter(city => !!city.geolocation);\n  const filteredHouses = houses && houses.filter(house => !!house.geolocation);\n  const {\n    0: map,\n    1: setMap\n  } = useState(null);\n  const onMapLoaded = useCallback(({\n    map,\n    maps\n  }) => {\n    let latLngBounds = new google.maps.LatLngBounds();\n\n    if (centerOnFrance) {\n      franceBounds.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.lat, item.lng)));\n    } else {\n      filteredCities && filteredCities.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)));\n      filteredHouses && filteredHouses.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)));\n    }\n\n    map.fitBounds(latLngBounds);\n    setMap(map);\n  }, [centerOnFrance, filteredCities, filteredHouses]);\n  useEffect(() => {\n    if (map && centerOn && centerOn != '') {\n      const onCity = filteredCities && filteredCities.filter(item => item.slug == centerOn);\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  const mapOptions = useCallback(map => ({\n    scrollwheel: false,\n    styles: googleMapStyles\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 && (event => handleMouseEvent('mapClick', null)) //yesIWantToUseGoogleMapApiInternals\n        ,\n        children: [map && filteredCities && filteredCities.map(markerInfos => /*#__PURE__*/_jsxDEV(CityMarker, {\n          lat: markerInfos.geolocation.lat,\n          lng: markerInfos.geolocation.lng,\n          title: markerInfos.title,\n          available: markerInfos.open,\n          onMouseEvent: handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug)),\n          highlight: highlightCity == markerInfos.slug\n        }, markerInfos.slug, false, {\n          fileName: _jsxFileName,\n          lineNumber: 116,\n          columnNumber: 6\n        }, this)), map && filteredHouses && filteredHouses.map(markerInfos => /*#__PURE__*/_jsxDEV(HouseMarker, {\n          lat: markerInfos.geolocation.lat,\n          lng: markerInfos.geolocation.lng,\n          title: markerInfos.title,\n          color: markerInfos.statusColor,\n          onMouseEvent: handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug)),\n          highlight: highlightHouse == markerInfos.slug\n        }, markerInfos.slug, false, {\n          fileName: _jsxFileName,\n          lineNumber: 127,\n          columnNumber: 6\n        }, this))]\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\nexport default 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"}