From 3241a1591f49a75ee440aaebf1070e99d90dcf34 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 11 Aug 2021 18:35:19 -0400 Subject: [PATCH] add maps! --- package.json | 2 + public/markers/blue.png | Bin 0 -> 1309 bytes public/markers/green.png | Bin 0 -> 1190 bytes public/markers/lightblue.png | Bin 0 -> 1269 bytes public/markers/orange.png | Bin 0 -> 3413 bytes public/markers/pink.png | Bin 0 -> 1321 bytes public/markers/purple.png | Bin 0 -> 1324 bytes public/markers/red.png | Bin 0 -> 1305 bytes public/markers/yellow.png | Bin 0 -> 1309 bytes src/components/Carpool/Carpool.tsx | 5 + src/components/Carpool/CarpoolMap.tsx | 75 +++++++++ src/components/Carpool/CarpoolMapLegend.tsx | 26 +++ .../Carpool/CarpoolRouteEstimator.tsx | 7 +- src/components/Carpool/MemberList.tsx | 1 + yarn.lock | 158 +++++++++++++++++- 15 files changed, 266 insertions(+), 8 deletions(-) create mode 100644 public/markers/blue.png create mode 100644 public/markers/green.png create mode 100644 public/markers/lightblue.png create mode 100644 public/markers/orange.png create mode 100644 public/markers/pink.png create mode 100644 public/markers/purple.png create mode 100644 public/markers/red.png create mode 100644 public/markers/yellow.png create mode 100644 src/components/Carpool/CarpoolMap.tsx create mode 100644 src/components/Carpool/CarpoolMapLegend.tsx diff --git a/package.json b/package.json index 1dfa54a..b97b01a 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,12 @@ "@types/react-dom": "^17.0.9", "@types/react-router-dom": "^5.1.7", "dotenv": "^8.2.0", + "google-maps-react": "^2.0.6", "immutable": "^4.0.0-rc.14", "react": "^17.0.2", "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", + "react-google-maps": "^9.4.5", "react-places-autocomplete": "^7.3.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", diff --git a/public/markers/blue.png b/public/markers/blue.png new file mode 100644 index 0000000000000000000000000000000000000000..69590b92ab25dbd8fc82d7d6b0eb5b7f6a1ec1ce GIT binary patch literal 1309 zcmV+&1>*XNP)Z z5tfPI80dhNjXizOZ4M^WIE{~~m@T?2q8U@v=+tB;lFVdoCfj^0CPoPxa6GrfGHmPM zPMduB)As-G{r+>$J@;M$0K^@Zu3t!T_jO|IxJ0ryoF-|-FAsEUt5^S!`sb3c&QIwZ&OqhB(xN~U z(9rS)a5&uAB*VT8CIMZ;S&V}E6$C1Gx~YDiz-ZB73yLw|+bc$NxGpdWn6ZNC8$XHU zc?qsdwf039BYGc}Z!E|B-?eog#+o~?v91Nbk}|C2s^S-Qn8}mL1yA30M$rG2mLoLt zZ>AUz7MAwiaJ0iL;E=#Zl%~OAY!uenPI#OZbeQywV>s>{8iAV9zPW{neKFd6#Ysu; zB#B9D?Gp&aVClMw%kM%7E7rQQzCXb)FcQLLRr{&5x$9?Q-tvDc<`$Q6l|Ixsir{<9g4h` zbIt|I+7B3&YrtRT0|}bGTH0YQ-hV4h0-D-U7xYb^;u4*BGBja+jiA@WoSh)>37pW? zpB3mE#~oX^TVbvP|0K8hOOl-bl%B^IK+)#QbGcxj2H(JNh)QW{r;*atkGa4kkXbR} zO69wFeaCB=!0$q;=`h&#VdgiDYF}ud3)vvtSx)pEm>73$;t@Lv$WD} zcoOJ_1AGI*#xymfxE+7bEldJR^9ycK-FJ+vR&C1j_FaKFa1%EjDp(b3>Q-00P0~w_ zxrIppGu|yq^AVDi|AfR#ApApH_YwH`t%SI&?u_)3mkB+TxPwU`LA%WZb|TgF6K|pT zyV%T5xJxMdO;PZSD2+zQG~^aG0Zp$*WcnS%Ulj3yI5-u@KjeIB(eot5cnCS@7AAqH zltzzWStkDC=+~ABgt+O9J}uR4C-K=m9{FDc@XT<4Rz<(S@Z-4kB6uwG2$MjH@qkBY zVg<(*^-uvxlzu-R$2`s&3X_1RDMeA2zeS=`AFxpYJOQ<4R2(NNoCTivH-WzZfyOD! T^E$RX00000NkvXXu0mjfg)VJP literal 0 HcmV?d00001 diff --git a/public/markers/green.png b/public/markers/green.png new file mode 100644 index 0000000000000000000000000000000000000000..0f79315e427e3401061bd85d197b033ca24e5212 GIT binary patch literal 1190 zcmV;X1X=ruP)JW3b9v#cu@&% zgPs-gCf_VvQJ}>7Vh}Ht1H4zC=+AbXd{}-iNx+^c;KERq%DHSnxzrh1;U#&ipYYy1 z!rS~LW0Od^QvT-eL-=4YF8V61e*cev!!rRFOuLImJ0h>kCNWq|@J$oJ$rgg2TM{il zi=i6An|-7J&*1#L`_J{Ckbtim0K3ASY?OFv6V85UCOFYiqLOV>UwgKe4rxXF{Ciwh2Con+Xv6szH`rJ|M53 zVvX!S9be3;R>F=PQen>lu{WlS1mI)&O-f1<`)dfkZyuk3@0v**tRs~o2_FhxZ6rXI zdmoo&UN+V=_SD<)V>8K`3{nN@Pnrn;+$K4yt-u?va}D>y+XFf)dJP4@cAOjF^`C%% z`=*k%V<Ouq$au!f48cz<;KVpa&&wufXOfC~`^BqK!%D~% z4EkeXl`2o-k`Nb{ON<3wgjR-0Df~_Bt}HdKgm8%Wf};%}HWpvWW%V?!E*!fe@^|Dt zga7{v*A(5T`)fPq0{#`z9cgEyBz9IfX9X{lcs)jZJ|M9&+-W%I-?R7O*?gW-Z0ws0~UVPKIZaaw{$39`SZvQeQIx zyDO7iZ|3aLlGynxhX*B6|+siHq>9pOe}CSXspA+fIt@QK2!RH`EQFrJ77 z&U+bj6W$qEWQ~~f{$k7oyik_RcB@TM>8>wvZG_jG-4T1%6$7pc`<2J_hvK1jJf<%mge9IrB(9@bzrJtl}F{p8F6!TLkzFv&J4X0doV+bmjsdR(A0+ zkSs_a#HIPb!RUyYfI9-t+|2??y_@xoNlx?hVS5hX9G@d*Y4~)JGaHJ5BfpCeoFrSa zdc^Y_fSe&tmLg;7DQyaFjNVG5Pun-^DvUW%qZo}b;3OSJq5(xi6qP>+Y{n-nqlFFI{3w+uK>(-n}fmrbZH&n;Yli=T~QEXV=CU zYp2%5*SEnhBV$SA=FQUB-Md-xkt4!58c*|xtwCa+1-N~iWnaF`mYqDw!p!CfTdQ7!*)a;{~>bAmIN*U9s0kAM$_r3(LmADr%*UDGVR^dv3VyY(e8V6ot=C}WI!iO>FNrS zI5>=}tE;DNM$`}O8_+}k&>cUnGVnTK4puVqaxB9sm`HD<8ydcNBj|go8QA}CO=Dwr z{=Iv`Jlp`J0-Pjf=gvHw6q4H7py=5%QR7*5>J*(jL}CH^Scv$G(Y0$6%D;P;EnKzg zM@NMMa&F!f%J1aGh5Q&A0(_`IfWgp0(AbX|Zrl*W1(0>|;)LjNfe#Z2UdusT0E(@m zK%oy?w+u8gVf21Aj&iP z`-Mt6SzG{1j~)9&DW^|Uk?NgXBWU*#n>K;tym=$K6DJ(;<_J%?$>R0_Yo(q!!=mcz zQ}Jp-_SLIk932&2N6x;!5M(md&~EA8TZ;=I;qc*4)!Is}%wf))(U@JkpybUPz^H&k zB6*Ad_ooP1@18pXOAa2isYHu~dBw*!`y?mB>hW<{Y&L_lQh9}r2(PJ4aRJc#-j?F` z?`I23OP4#jxe2!G9vuzJl$1K{p+mxVw!{U1A+{-kh^njemdWLRe%H|fat{wsRaPd@ zLa}@H*c2Cldi{EFRadjG6pG={iVDE?ceH6Y0uzJg0>EEFq6*)*k)iAT;vNwJ&OScB z#q8L@G~2g}iVGmvWD*tHGMgI^(B&YP1GfEY1j1w#6&FB|(I~2~OG+5Nn13QybWtk1 z0}Td-<|Hb<7ZHX|OtDQ(OqrVc0|9tzwJrE_O!U@}xB$ei6iM6C!h(y6Rucd|Jk9hu fe&0S(eGcGXd0TozQ6I=600000NkvXXu0mjfKWb4+ literal 0 HcmV?d00001 diff --git a/public/markers/orange.png b/public/markers/orange.png new file mode 100644 index 0000000000000000000000000000000000000000..8bee9da397e37a094f7c7f4d1169d1282b0e41e1 GIT binary patch literal 3413 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 literal 0 HcmV?d00001 diff --git a/public/markers/purple.png b/public/markers/purple.png new file mode 100644 index 0000000000000000000000000000000000000000..b57873893261255efa18f98e7c47dcc0473d9bb7 GIT binary patch literal 1324 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 P00000NkvXXu0mjfV_aiO literal 0 HcmV?d00001 diff --git a/public/markers/yellow.png b/public/markers/yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..a9d65acca6b10c03c259ec547ba1f6bc85437e33 GIT binary patch literal 1309 zcmV+&1>*XNP)Pe%s z1_r!wnTrsT6YXJZx+A1)b^v#oIpFaLJm0u2;~DSf`XEmHkq8Xlj3V!5IBmu!9f=HI z30E$Kf@WBamn2M~`70KF=vWWxXd4`njK7)Y`0DL{?q8I^$dHO0%#|hMpio-qJsEI3 z4m9`FFn(7x#l$@oz*rofPlS`@et@qB_T)&@MuuY81%CZGf}E~i?Sa8Zj~Dykp(HNQ z%)tMJ6T$1MD&%w~G^Z-%ih;feHi3@T5aJ>coQ;ZD$vxS8!Dm9R$7F?7VzZWSThaKK&XJxFt&K1gk*VmSoYQ1h&5ZG##jnRiH33!g^5x z32}CGpduy#h5xb)vDgeIu;?r}2k3GfjRUDf0B$njb|!)R58U0bpo}y(1OrUOFYM_t z0l#k#r3FcIaKB8>ByizeFp>LPRx120IRVXm^}|0sPJgJ<3VVdGmi7fEfq`q0q_s)u zz~}P@cV|l`i_t?Cp+mVc;PLeDHhmT7bgM6tP2lz~*bDBcNO`eOFecJ)-XZsS6Ox|) z7<&d@KX&x6=Y~H;o{y+^6hGM|M-W1~1w)s^0_x?z7>-r>20@u1XOhGpn z{k`ElN3mHO2ADGo^mop7XAnHGXJVqKdj$R7ztQCj|Ic+cr z6c>1Dg-X2to|_eB{r&S_2f^}Xk3r_!PVx#2REB>_w812>D@&pk>wTcsWI+6D-R_ zEHeAd*vJq>4yN_^Cxl=!>V!$)rDO-4q@{|9)LBqKtD>!q$rrfwBC2Q`oiGU$ +

Map

+ + diff --git a/src/components/Carpool/CarpoolMap.tsx b/src/components/Carpool/CarpoolMap.tsx new file mode 100644 index 0000000..34dfeab --- /dev/null +++ b/src/components/Carpool/CarpoolMap.tsx @@ -0,0 +1,75 @@ +import { Map, Marker } from 'google-maps-react'; +import { useContext, useEffect, useMemo, useState } from 'react'; +import { useMe } from '../hooks'; +import { CarpoolContext } from './Carpool'; +import useSignups from './useSignups'; + +function ll(x: { latitude: number; longitude: number }) { + return { lat: x.latitude, lng: x.longitude }; +} + +const CarpoolMap = () => { + const { carpool } = useContext(CarpoolContext); + const memberIds = useMemo( + () => carpool.members.map((m) => m.id), + [carpool.members] + ); + const signups = useSignups(carpool.event.id, memberIds); + const me = useMe(); + const mySignup = useMemo( + () => signups.find((s) => s.user.id === me?.id), + [me?.id, signups] + ); + const [map, setMap] = useState(null); + + useEffect(() => { + const bounds = new google.maps.LatLngBounds(); + for (let signup of signups) { + if (signup.latitude) { + bounds.extend(ll(signup)); + } + } + bounds.extend(ll(carpool.event)); + map?.fitBounds(bounds); + map?.setZoom(map.getZoom() - 1); + }, [carpool.event, map, signups]); + + return ( + map && setMap(map)} + > + {signups.map( + (signup) => + signup.user.id !== me?.id && + signup.latitude && ( + + ) + )} + + + {mySignup?.latitude && ( + + )} + + ); +}; + +export default CarpoolMap; diff --git a/src/components/Carpool/CarpoolMapLegend.tsx b/src/components/Carpool/CarpoolMapLegend.tsx new file mode 100644 index 0000000..26d38a1 --- /dev/null +++ b/src/components/Carpool/CarpoolMapLegend.tsx @@ -0,0 +1,26 @@ +export default function CarpoolMapLegend() { + return ( +
+ Legend +
+ Red marker My location +
+
+ Blue marker Other member + location +
+
+ Green marker Event location +
+
+ ); +} diff --git a/src/components/Carpool/CarpoolRouteEstimator.tsx b/src/components/Carpool/CarpoolRouteEstimator.tsx index 8d972e0..f241ea3 100644 --- a/src/components/Carpool/CarpoolRouteEstimator.tsx +++ b/src/components/Carpool/CarpoolRouteEstimator.tsx @@ -43,7 +43,12 @@ export default function CarpoolRouteEstimator() {
- Best route: {path.distance.toFixed(1)} miles + Best route (estimate): {path.distance.toFixed(1)} miles +
+ + This number is lower than the distance of the actual route, and + should only be used to get a rough idea of the distance. +
{(() => { const driver = path.path.from; diff --git a/src/components/Carpool/MemberList.tsx b/src/components/Carpool/MemberList.tsx index 849cc20..431ba3b 100644 --- a/src/components/Carpool/MemberList.tsx +++ b/src/components/Carpool/MemberList.tsx @@ -41,6 +41,7 @@ export default function MemberList() { [carpool] ); const members = useSignups(carpool.id, memberIDs); + console.log(members); const membersToShow = useMemo( () => (expanded ? members : members.slice(0, shownMembersCount)), diff --git a/yarn.lock b/yarn.lock index 16e7a69..2fede20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3380,7 +3380,7 @@ arrify@^2.0.1: resolved "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz" integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== -asap@~2.0.6: +asap@~2.0.3, asap@~2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -3670,7 +3670,7 @@ babel-preset-react-app@^10.0.0: babel-plugin-macros "2.8.0" babel-plugin-transform-react-remove-prop-types "0.4.24" -babel-runtime@^6.26.0: +babel-runtime@^6.11.6, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz" integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= @@ -4092,6 +4092,11 @@ camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0: resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== +can-use-dom@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a" + integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz" @@ -4154,6 +4159,11 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +change-emitter@^0.1.2: + version "0.1.6" + resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" + integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU= + char-regex@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz" @@ -4531,6 +4541,11 @@ core-js-pure@^3.0.0: resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.9.0.tgz" integrity sha512-3pEcmMZC9Cq0D4ZBh3pe2HLtqxpGNJBLXF/kZ2YzK17RbKp94w0HFbdbSx8H8kAlZG5k76hvLrkPm57Uyef+kg== +core-js@^1.0.0: + version "1.2.7" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" + integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= + core-js@^2.4.0: version "2.6.12" resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz" @@ -5326,6 +5341,13 @@ encodeurl@~1.0.2: resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz" integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= +encoding@^0.1.11: + version "0.1.13" + resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9" + integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A== + dependencies: + iconv-lite "^0.6.2" + end-of-stream@^1.0.0, end-of-stream@^1.1.0: version "1.4.4" resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz" @@ -5933,6 +5955,19 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" +fbjs@^0.8.1: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + figgy-pudding@^3.5.1: version "3.5.2" resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz" @@ -6339,6 +6374,16 @@ globby@^6.1.0: pify "^2.0.0" pinkie-promise "^2.0.0" +google-maps-infobox@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz#1ea6de93c0cdf4138c2d586331835c83dcc59dc2" + integrity sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw== + +google-maps-react@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/google-maps-react/-/google-maps-react-2.0.6.tgz#0473356207ab6b47227b393b89e4b83f6eab06da" + integrity sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ== + graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4: version "4.2.6" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz" @@ -6481,6 +6526,11 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^2.3.1: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== + hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" @@ -6661,6 +6711,13 @@ iconv-lite@0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +iconv-lite@^0.6.2: + version "0.6.3" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" + integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== + dependencies: + safer-buffer ">= 2.1.2 < 3.0.0" + icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz" @@ -6821,7 +6878,7 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" -invariant@^2.2.4: +invariant@^2.2.1, invariant@^2.2.4: version "2.2.4" resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -7130,7 +7187,7 @@ is-root@2.1.0: resolved "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz" integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg== -is-stream@^1.1.0: +is-stream@^1.0.1, is-stream@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz" integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= @@ -7208,6 +7265,14 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz" integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= +isomorphic-fetch@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" + integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk= + dependencies: + node-fetch "^1.0.1" + whatwg-fetch ">=0.10.0" + isstream@~0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz" @@ -8102,7 +8167,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5: +"lodash@>=3.5 <5", lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8186,6 +8251,16 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +marker-clusterer-plus@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67" + integrity sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc= + +markerwithlabel@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/markerwithlabel/-/markerwithlabel-2.0.2.tgz#fa6aee4abb0ee553e24e2b708226858f58b8729e" + integrity sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg== + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz" @@ -8537,6 +8612,14 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +node-fetch@^1.0.1: + version "1.7.3" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" + integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ== + dependencies: + encoding "^0.1.11" + is-stream "^1.0.1" + node-forge@^0.10.0: version "0.10.0" resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz" @@ -9937,6 +10020,13 @@ promise-inflight@^1.0.1: resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== + dependencies: + asap "~2.0.3" + promise@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz" @@ -10204,6 +10294,23 @@ react-error-overlay@^6.0.9: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-google-maps@^9.4.5: + version "9.4.5" + resolved "https://registry.yarnpkg.com/react-google-maps/-/react-google-maps-9.4.5.tgz#920c199bdc925e0ce93880edffb09428d263aafa" + integrity sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA== + dependencies: + babel-runtime "^6.11.6" + can-use-dom "^0.1.0" + google-maps-infobox "^2.0.0" + invariant "^2.2.1" + lodash "^4.16.2" + marker-clusterer-plus "^2.1.4" + markerwithlabel "^2.0.1" + prop-types "^15.5.8" + recompose "^0.26.0" + scriptjs "^2.5.8" + warning "^3.0.0" + react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -10448,6 +10555,16 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +recompose@^0.26.0: + version "0.26.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30" + integrity sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog== + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + symbol-observable "^1.0.4" + recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz" @@ -10854,7 +10971,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: +"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -10937,6 +11054,11 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" +scriptjs@^2.5.8: + version "2.5.9" + resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f" + integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg== + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz" @@ -11040,7 +11162,7 @@ set-value@^2.0.0, set-value@^2.0.1: is-plain-object "^2.0.3" split-string "^3.0.1" -setimmediate@^1.0.4: +setimmediate@^1.0.4, setimmediate@^1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz" integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU= @@ -11640,6 +11762,11 @@ svgo@^1.0.0, svgo@^1.2.2: unquote "~1.1.1" util.promisify "~1.0.0" +symbol-observable@^1.0.4: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz" @@ -12036,6 +12163,11 @@ typescript@^4.2.4: resolved "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz" integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg== +ua-parser-js@^0.7.18: + version "0.7.28" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31" + integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g== + uncontrollable@^7.0.0, uncontrollable@^7.2.1: version "7.2.1" resolved "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz" @@ -12311,6 +12443,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= + dependencies: + loose-envify "^1.0.0" + warning@^4.0.0, warning@^4.0.3: version "4.0.3" resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz" @@ -12489,6 +12628,11 @@ whatwg-encoding@^1.0.5: dependencies: iconv-lite "0.4.24" +whatwg-fetch@>=0.10.0: + version "3.6.2" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" + integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== + whatwg-fetch@^3.4.1: version "3.6.1" resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.1.tgz"