aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>2021-07-06 19:50:08 -0700
committerAubrey-Li <63608597+Aubrey-Li@users.noreply.github.com>2021-07-06 19:50:08 -0700
commit5f3486d68dd6a6c2b13acf7127188220a4012290 (patch)
treec607c5c459763787b131521b347cd65553fc52bd
parent89ae6933ed13209497151c6a09bc88f600c53a57 (diff)
fix link to map; ownerdocument error
-rw-r--r--deploy/index.html1
-rw-r--r--package-lock.json321
-rw-r--r--package.json1
-rw-r--r--src/client/views/collections/MapView/CollectionMapView.tsx206
4 files changed, 422 insertions, 107 deletions
diff --git a/deploy/index.html b/deploy/index.html
index dda0c6457..33cc0906a 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg&libraries=places"></script>
<script>
function getCookie(cname) {
diff --git a/package-lock.json b/package-lock.json
index 9f82ee33f..2b1dba232 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1109,6 +1109,12 @@
"resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.8.tgz",
"integrity": "sha512-z03u79t1v8QIktoUXypWD06Fzl499/hA162hurA+eCDlWXxFynuU+hMZIaferILF5Gzr4PMX1ShHszT666sUHQ=="
},
+ "@types/html-minifier-terser": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+ "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
+ "dev": true
+ },
"@types/jquery": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.0.tgz",
@@ -3334,6 +3340,24 @@
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
},
+ "camel-case": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+ "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+ "dev": true,
+ "requires": {
+ "pascal-case": "^3.1.2",
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -5739,6 +5763,15 @@
"resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
"integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
},
+ "dom-converter": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+ "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+ "dev": true,
+ "requires": {
+ "utila": "~0.4"
+ }
+ },
"dom-helpers": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
@@ -5805,6 +5838,24 @@
"domelementtype": "1"
}
},
+ "dot-case": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+ "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+ "dev": true,
+ "requires": {
+ "no-case": "^3.0.4",
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"dot-prop": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
@@ -7768,6 +7819,29 @@
"integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
"dev": true
},
+ "html-minifier-terser": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
+ "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+ "dev": true,
+ "requires": {
+ "camel-case": "^4.1.1",
+ "clean-css": "^4.2.3",
+ "commander": "^4.1.1",
+ "he": "^1.2.0",
+ "param-case": "^3.0.3",
+ "relateurl": "^0.2.7",
+ "terser": "^4.6.3"
+ },
+ "dependencies": {
+ "commander": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+ "dev": true
+ }
+ }
+ },
"html-to-image": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-0.1.1.tgz",
@@ -7784,6 +7858,33 @@
"minimist": "^1.2.0"
}
},
+ "html-webpack-plugin": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.3.2.tgz",
+ "integrity": "sha512-HvB33boVNCz2lTyBsSiMffsJ+m0YLIQ+pskblXgN9fnjS1BgEcuAfdInfXfGrkdXV406k9FiDi86eVCDBgJOyQ==",
+ "dev": true,
+ "requires": {
+ "@types/html-minifier-terser": "^5.0.0",
+ "html-minifier-terser": "^5.0.1",
+ "lodash": "^4.17.21",
+ "pretty-error": "^3.0.4",
+ "tapable": "^2.0.0"
+ },
+ "dependencies": {
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ },
+ "tapable": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
+ "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
+ "dev": true
+ }
+ }
+ },
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -9314,6 +9415,23 @@
"signal-exit": "^3.0.0"
}
},
+ "lower-case": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+ "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+ "dev": true,
+ "requires": {
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"lowercase-keys": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
@@ -10136,6 +10254,24 @@
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
"dev": true
},
+ "no-case": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+ "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+ "dev": true,
+ "requires": {
+ "lower-case": "^2.0.2",
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"node-abi": {
"version": "2.16.0",
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.16.0.tgz",
@@ -13937,6 +14073,24 @@
}
}
},
+ "param-case": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+ "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+ "dev": true,
+ "requires": {
+ "dot-case": "^3.0.4",
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -14004,6 +14158,24 @@
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
},
+ "pascal-case": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+ "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+ "dev": true,
+ "requires": {
+ "no-case": "^3.0.4",
+ "tslib": "^2.0.3"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+ "dev": true
+ }
+ }
+ },
"pascalcase": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -14432,6 +14604,24 @@
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
},
+ "pretty-error": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-3.0.4.tgz",
+ "integrity": "sha512-ytLFLfv1So4AO1UkoBF6GXQgJRaKbiSiGFICaOPNwQ3CMvBvXpLRubeQWyPGnsbV/t9ml9qto6IeCsho0aEvwQ==",
+ "dev": true,
+ "requires": {
+ "lodash": "^4.17.20",
+ "renderkid": "^2.0.6"
+ },
+ "dependencies": {
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ }
+ }
+ },
"probe-image-size": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/probe-image-size/-/probe-image-size-4.1.1.tgz",
@@ -15629,11 +15819,136 @@
"rc": "^1.0.1"
}
},
+ "relateurl": {
+ "version": "0.2.7",
+ "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+ "dev": true
+ },
"remove-trailing-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
"integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
},
+ "renderkid": {
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+ "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
+ "dev": true,
+ "requires": {
+ "css-select": "^4.1.3",
+ "dom-converter": "^0.2.0",
+ "htmlparser2": "^6.1.0",
+ "lodash": "^4.17.21",
+ "strip-ansi": "^3.0.1"
+ },
+ "dependencies": {
+ "ansi-regex": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+ "dev": true
+ },
+ "css-select": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+ "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+ "dev": true,
+ "requires": {
+ "boolbase": "^1.0.0",
+ "css-what": "^5.0.0",
+ "domhandler": "^4.2.0",
+ "domutils": "^2.6.0",
+ "nth-check": "^2.0.0"
+ }
+ },
+ "css-what": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+ "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+ "dev": true
+ },
+ "dom-serializer": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+ "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+ "dev": true,
+ "requires": {
+ "domelementtype": "^2.0.1",
+ "domhandler": "^4.2.0",
+ "entities": "^2.0.0"
+ }
+ },
+ "domelementtype": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+ "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+ "dev": true
+ },
+ "domhandler": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+ "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+ "dev": true,
+ "requires": {
+ "domelementtype": "^2.2.0"
+ }
+ },
+ "domutils": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+ "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+ "dev": true,
+ "requires": {
+ "dom-serializer": "^1.0.1",
+ "domelementtype": "^2.2.0",
+ "domhandler": "^4.2.0"
+ }
+ },
+ "entities": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+ "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+ "dev": true
+ },
+ "htmlparser2": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+ "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+ "dev": true,
+ "requires": {
+ "domelementtype": "^2.0.1",
+ "domhandler": "^4.0.0",
+ "domutils": "^2.5.2",
+ "entities": "^2.0.0"
+ }
+ },
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ },
+ "nth-check": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+ "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+ "dev": true,
+ "requires": {
+ "boolbase": "^1.0.0"
+ }
+ },
+ "strip-ansi": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+ "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+ "dev": true,
+ "requires": {
+ "ansi-regex": "^2.0.0"
+ }
+ }
+ }
+ },
"repeat-element": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
@@ -18501,6 +18816,12 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
},
+ "utila": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+ "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
+ "dev": true
+ },
"utility-types": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
diff --git a/package.json b/package.json
index 666ebc946..42f2af28f 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
"dotenv": "^8.6.0",
"file-loader": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.6.0",
+ "html-webpack-plugin": "^5.3.2",
"jsdom": "^15.2.1",
"mocha": "^5.2.0",
"sass-loader": "^7.3.1",
diff --git a/src/client/views/collections/MapView/CollectionMapView.tsx b/src/client/views/collections/MapView/CollectionMapView.tsx
index 42059b61c..4243b89a5 100644
--- a/src/client/views/collections/MapView/CollectionMapView.tsx
+++ b/src/client/views/collections/MapView/CollectionMapView.tsx
@@ -1,4 +1,4 @@
-import { GoogleMap, Marker, InfoWindow, InfoBox, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
+import { GoogleMap, Marker, InfoWindow, InfoBox, useJsApiLoader, LoadScript, GoogleMapProps, StandaloneSearchBox, DrawingManager } from '@react-google-maps/api';
import { observable, action, computed, Lambda, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../../fields/Doc";
@@ -35,6 +35,7 @@ const defaultCenter = {
@observer
export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {
+ @observable private _map = null as any
@observable private mapRef = null as any;
@observable private selectedPlace: LocationData = { id: undefined, pos: undefined };
@observable private markerMap = {};
@@ -42,6 +43,10 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
@observable private zoom = 2.5;
@observable private clickedLatLng = null;
@observable private infoWindowOpen = false;
+ @observable private bounds = new window.google.maps.LatLngBounds();
+ @observable private inputRef = React.createRef<HTMLInputElement>();
+ @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+ @observable private searchMarkers: google.maps.Marker[] = [];
@observable private myPlaces = [
{ id: 1, pos: { lat: 39.09366509575983, lng: -94.58751660204751 } },
@@ -50,15 +55,19 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
{ id: 4, pos: { lat: 36.7783, lng: 119.4179 } }
];
+ @action
+ private setSearchBox = (searchBox: any) => {
+ this.searchBox = searchBox;
+ }
+
// iterate myPlaces to size, center, and zoom map to contain all markers
private fitBounds = (map: any) => {
- const bounds = new window.google.maps.LatLngBounds();
- console.log('map bound is:' + bounds);
+ console.log('map bound is:' + this.bounds);
this.myPlaces.map(place => {
- bounds.extend(place.pos);
+ this.bounds.extend(place.pos);
return place.id;
});
- map.fitBounds(bounds)
+ map.fitBounds(this.bounds)
}
// store a reference to google map instance; fit map bounds to contain all markers
@@ -125,31 +134,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
}
}
- /**
- * func that handles user's search location and zoom/pan on the input location
- */
- private searchLocation = () => {
-
- }
-
- /**
- * func that adds marker to google maps
- */
- @undoBatch
- private addMarker = () => {
-
- }
-
- /**
- * func that updates suggested results (and auto-complete) during user input
- */
- private handleChange = () => {
-
- }
-
// private mapRef = document.getElementById("map")
// private markers: google.maps.Marker[] = [];
- @observable private inputRef = React.createRef<HTMLInputElement>();
+
// @action
// private setInputRef = (element: HTMLInputElement) => {
@@ -159,8 +146,9 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
// }
// }
- @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+ // @observable private searchBox = new window.google.maps.places.SearchBox(this.inputRef.current!);
+ @action
private handlePlacesChanged = () => {
console.log(this.searchBox);
const places = this.searchBox.getPlaces();
@@ -169,49 +157,51 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
if (places.length == 0) { return; }
- // // clear out old markers
- // this.markers.forEach((marker) => {
- // marker.setMap(null);
- // });
- // this.markers = []
+ // clear out old markers
+ this.searchMarkers.forEach((marker) => {
+ marker.setMap(null);
+ });
+ this.searchMarkers = []
- // // for each place, get icon, name, location
- const bounds = new window.google.maps.LatLngBounds();
+ // for each place, get icon, name, location
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
- // const icon = {
- // url: place.icon as string,
- // size: new google.maps.Size(71, 71),
- // origin: new google.maps.Point(0, 0),
- // anchor: new google.maps.Point(17, 34),
- // scaledSize: new google.maps.Size(25, 25),
- // }
-
- // //create a marker for each place
- // this.markers.push(
- // new google.maps.Marker({
- // mapRef,
- // title: place.name,
- // position: place.geometry.location,
- // })
- // );
+ const icon = {
+ url: place.icon as string,
+ size: new google.maps.Size(71, 71),
+ origin: new google.maps.Point(0, 0),
+ anchor: new google.maps.Point(17, 34),
+ scaledSize: new google.maps.Size(25, 25),
+ }
+
+ //create a marker for each place
+ this.searchMarkers.push(
+ new google.maps.Marker({
+ map: this._map,
+ icon: icon,
+ title: place.name,
+ position: place.geometry.location,
+ })
+ );
if (place.geometry.viewport) {
// only geocodes have viewport
- bounds.union(place.geometry.viewport);
+ this.bounds.union(place.geometry.viewport);
}
else {
- bounds.extend(place.geometry.location);
+ this.bounds.extend(place.geometry.location);
}
});
+
+ console.log(this.searchMarkers);
}
private onBoundsChanged = () => {
- this.searchBox.setBounds(this.mapRef.getBounds())
+ this.searchBox.setBounds(this.bounds);
}
private onCenterChanged = () => {
@@ -250,62 +240,64 @@ export default class CollectionMapView extends CollectionSubView<MapSchema, Goog
style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
onWheel={e => e.stopPropagation()}
onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >
- <LoadScript
+ {/* <LoadScript
googleMapsApiKey={process.env.GOOGLE_MAPS!}
libraries={['places', 'drawing']}
- >
- <div className="map-wrapper">
- <GoogleMap
- mapContainerStyle={mapContainerStyle}
- zoom={this.zoom}
- center={this.center}
- onLoad={map => this.loadHandler(map)}
- onBoundsChanged={this.onBoundsChanged}
- onCenterChanged={this.onCenterChanged}
- >
- <StandaloneSearchBox
- onPlacesChanged={this.handlePlacesChanged}>
- <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
- </StandaloneSearchBox>
-
- {this.myPlaces.map(place => (
- <Marker
- key={place.id}
- position={place.pos}
- // onLoad={marker => this.markerLoadHandler(marker, place)}
- onClick={e => this.markerClickHandler(e, place)}
- draggable={true}
- onDragEnd={marker => this.handleDragMarker(marker, place)}
- />
- ))}
- {this.infoWindowOpen && this.selectedPlace && (
- <InfoWindow
- // anchor={this.markerMap[this.selectedPlace.id]}
- onCloseClick={this.handleInfoWindowClose}
- position={this.selectedPlace.pos}
- // options={{ enableEventPropagation: true }}
- >
- <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
- <div style={{ fontSize: 16 }}>
- <div>
- <a>a link to another node</a>
- </div>
- <div>
- <a>a link to another node</a>
- </div>
- <div>
- <a>a link to another node</a>
- </div>
- <div>
- <button>New +</button>
- </div>
+ > */}
+ <div className="map-wrapper">
+ <GoogleMap
+ ref={(map) => this._map = map}
+ mapContainerStyle={mapContainerStyle}
+ zoom={this.zoom}
+ center={this.center}
+ onLoad={map => this.loadHandler(map)}
+ onBoundsChanged={this.onBoundsChanged}
+ onCenterChanged={this.onCenterChanged}
+ >
+ <StandaloneSearchBox
+ onLoad={this.setSearchBox}
+ onPlacesChanged={this.handlePlacesChanged}>
+ <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" />
+ </StandaloneSearchBox>
+
+ {this.myPlaces.map(place => (
+ <Marker
+ key={place.id}
+ position={place.pos}
+ // onLoad={marker => this.markerLoadHandler(marker, place)}
+ onClick={e => this.markerClickHandler(e, place)}
+ draggable={true}
+ onDragEnd={marker => this.handleDragMarker(marker, place)}
+ />
+ ))}
+ {this.infoWindowOpen && this.selectedPlace && (
+ <InfoWindow
+ // anchor={this.markerMap[this.selectedPlace.id]}
+ onCloseClick={this.handleInfoWindowClose}
+ position={this.selectedPlace.pos}
+ // options={{ enableEventPropagation: true }}
+ >
+ <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}>
+ <div style={{ fontSize: 16 }}>
+ <div>
+ <a>a link to another node</a>
+ </div>
+ <div>
+ <a>a link to another node</a>
+ </div>
+ <div>
+ <a>a link to another node</a>
+ </div>
+ <div>
+ <button>New +</button>
</div>
</div>
- </InfoWindow>
- )}
- </GoogleMap>
- </div>
- </LoadScript >
+ </div>
+ </InfoWindow>
+ )}
+ </GoogleMap>
+ </div>
+ {/* </LoadScript > */}
</div >
</div >;
}