Repository: simonsfoundation/spectrum-autism-prevalence-map
Pull request #81: TTWWW-474: Prevalence Map expand button and zoom button styling
Author: login: mattga11ant
Created: 2025-03-13T15:22:48Z | Merged: 2025-03-15T21:11:05Z

Jira ticket for reference: https://simonsfoundation.atlassian.net/browse/TTWWW-474

- [x] pull this branch
- [x] compile CSS and JS changes
- [x] confirm that the position and styling of the expand button, zoom buttons, and Spectrum logo are correct according to the Figma design
- [x] confirm that clicking the Spectrum logo links to the correct location. I assumed this should link to: https://www.thetransmitter.org/spectrum
- [x] confirm that clicking the + and - zoom buttons works as expected
- [x] confirm that clicking the expand button changes the icon to the minimize icon, and clicking again returns to the expand icon
- [x] confirm that clicking the expand button hides the header, and the info card and map containers resize to take up that space
- [x] confirm that clicking the expand button scales the map to fit the new map container, as well as repositioning the map dots based on the new size
- [x] confirm that clicking the minimize button returns everything to its default state


Diff:
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-expand.svg b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-expand.svg
new file mode 100644
index 00000000..4f7d2519
--- /dev/null
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-expand.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 11.025C15.75 10.6522 15.4478 10.35 15.075 10.35C14.7022 10.35 14.4 10.6522 14.4 11.025L14.4 13.4454L10.8273 9.8727C10.5637 9.6091 10.1363 9.6091 9.8727 9.8727C9.6091 10.1363 9.6091 10.5637 9.8727 10.8273L13.4454 14.4L11.025 14.4C10.6522 14.4 10.35 14.7022 10.35 15.075C10.35 15.4478 10.6522 15.75 11.025 15.75L15.075 15.75C15.4478 15.75 15.75 15.4478 15.75 15.075L15.75 11.025Z" fill="#2E5367"/>
+<path d="M6.975 3.6C7.34779 3.6 7.65 3.29779 7.65 2.925C7.65 2.55221 7.34779 2.25 6.975 2.25L2.925 2.25C2.55221 2.25 2.25 2.55221 2.25 2.925L2.25 6.975C2.25 7.34779 2.55221 7.65 2.925 7.65C3.29779 7.65 3.6 7.34779 3.6 6.975L3.6 4.55459L7.1727 8.1273C7.43631 8.3909 7.86369 8.3909 8.1273 8.1273C8.3909 7.86369 8.3909 7.43631 8.1273 7.1727L4.55459 3.6L6.975 3.6Z" fill="#2E5367"/>
+<path d="M11.025 2.25C10.6522 2.25 10.35 2.55221 10.35 2.925C10.35 3.29779 10.6522 3.6 11.025 3.6L13.4454 3.6L9.8727 7.1727C9.6091 7.43631 9.6091 7.86369 9.8727 8.1273C10.1363 8.3909 10.5637 8.3909 10.8273 8.1273L14.4 4.55459V6.975C14.4 7.34779 14.7022 7.65 15.075 7.65C15.4478 7.65 15.75 7.34779 15.75 6.975V2.925C15.75 2.55221 15.4478 2.25 15.075 2.25L11.025 2.25Z" fill="#2E5367"/>
+<path d="M3.6 11.025C3.6 10.6522 3.29779 10.35 2.925 10.35C2.55221 10.35 2.25 10.6522 2.25 11.025L2.25 15.075C2.25 15.4478 2.55221 15.75 2.925 15.75H6.975C7.34779 15.75 7.65 15.4478 7.65 15.075C7.65 14.7022 7.34779 14.4 6.975 14.4H4.55459L8.1273 10.8273C8.3909 10.5637 8.3909 10.1363 8.1273 9.8727C7.86369 9.6091 7.43631 9.6091 7.1727 9.8727L3.6 13.4454L3.6 11.025Z" fill="#2E5367"/>
+</svg>
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minimize.svg b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minimize.svg
new file mode 100644
index 00000000..b0f08025
--- /dev/null
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minimize.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5973 15.5527L11.0246 11.98L11.0246 14.4004C11.0246 14.7732 10.7224 15.0754 10.3496 15.0754C9.97681 15.0754 9.6746 14.7732 9.6746 14.4004L9.6746 10.3504C9.6746 9.97757 9.97681 9.67537 10.3496 9.67537L14.3996 9.67537C14.7724 9.67537 15.0746 9.97757 15.0746 10.3504C15.0746 10.7232 14.7724 11.0254 14.3996 11.0254L11.9792 11.0254L15.5519 14.5981C15.8155 14.8617 15.8155 15.2891 15.5519 15.5527C15.2883 15.8163 14.8609 15.8163 14.5973 15.5527Z" fill="#2E5367"/>
+<path d="M8.3246 3.60037C8.3246 3.22757 8.0224 2.92537 7.6496 2.92537C7.27681 2.92537 6.9746 3.22757 6.9746 3.60037L6.9746 6.02077L3.4019 2.44807C3.1383 2.18446 2.71091 2.18446 2.44731 2.44807C2.1837 2.71167 2.1837 3.13906 2.44731 3.40266L6.02001 6.97537L3.5996 6.97537C3.22681 6.97537 2.9246 7.27757 2.9246 7.65037C2.9246 8.02316 3.22681 8.32537 3.5996 8.32537L7.6496 8.32537C8.0224 8.32537 8.3246 8.02316 8.3246 7.65037L8.3246 3.60037Z" fill="#2E5367"/>
+<path d="M15.5527 3.40266L11.98 6.97537H14.4004C14.7732 6.97537 15.0754 7.27757 15.0754 7.65037C15.0754 8.02316 14.7732 8.32537 14.4004 8.32537L10.3504 8.32537C9.9776 8.32537 9.6754 8.02316 9.6754 7.65037V3.60037C9.6754 3.22757 9.9776 2.92537 10.3504 2.92537C10.7232 2.92537 11.0254 3.22757 11.0254 3.60037V6.02077L14.5981 2.44807C14.8617 2.18447 15.2891 2.18447 15.5527 2.44807C15.8163 2.71167 15.8163 3.13906 15.5527 3.40266Z" fill="#2E5367"/>
+<path d="M3.6004 9.67537C3.2276 9.67537 2.9254 9.97757 2.9254 10.3504C2.9254 10.7232 3.2276 11.0254 3.6004 11.0254H6.0208L2.4481 14.5981C2.1845 14.8617 2.1845 15.2891 2.4481 15.5527C2.7117 15.8163 3.13909 15.8163 3.40269 15.5527L6.9754 11.98V14.4004C6.9754 14.7732 7.2776 15.0754 7.6504 15.0754C8.02319 15.0754 8.3254 14.7732 8.3254 14.4004L8.3254 10.3504C8.3254 9.97757 8.02319 9.67537 7.6504 9.67537H3.6004Z" fill="#2E5367"/>
+</svg>
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minus.svg b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minus.svg
new file mode 100644
index 00000000..b13775e7
--- /dev/null
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-minus.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="3" viewBox="0 0 15 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="1.24048" x2="14.4" y2="1.24048" stroke="#2E5367" stroke-width="2"/>
+</svg>
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-plus.svg b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-plus.svg
new file mode 100644
index 00000000..83fbab8f
--- /dev/null
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/icon-plus.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6.85167" y1="0.848145" x2="6.85167" y2="14.8788" stroke="#2E5367" stroke-width="2"/>
+<line y1="8.1012" x2="14.2105" y2="8.1012" stroke="#2E5367" stroke-width="2"/>
+</svg>
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/spectrum-logo.svg b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/spectrum-logo.svg
new file mode 100644
index 00000000..e4222be6
--- /dev/null
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/img/spectrum-logo.svg
@@ -0,0 +1,18 @@
+<svg width="125" height="25" viewBox="0 0 125 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_957_12081)">
+<path d="M125 18.0746C124.636 18.0763 124.272 18.0709 123.908 18.0831C123.769 18.0877 123.734 18.0319 123.719 17.9038C123.589 16.8469 123.453 15.7909 123.32 14.7346C123.163 13.4877 123.006 12.2407 122.846 10.9742C122.755 11.036 122.733 11.1224 122.696 11.194C121.504 13.4756 120.314 15.7582 119.122 18.0396C119.085 18.112 119.073 18.2253 118.975 18.2327C118.858 18.2416 118.849 18.1137 118.81 18.0379C117.62 15.7632 116.433 13.4871 115.246 11.2113C115.207 11.1358 115.166 11.0614 115.096 10.9318C115.045 11.313 115.001 11.6399 114.959 11.9671C114.709 13.9441 114.458 15.9209 114.214 17.8987C114.195 18.0484 114.147 18.0875 114.007 18.0828C113.699 18.0724 113.391 18.0743 113.083 18.0819C112.958 18.0851 112.93 18.0416 112.946 17.9191C113.15 16.3207 113.351 14.7217 113.551 13.1228C113.755 11.5024 113.956 9.88171 114.158 8.26122C114.212 7.83291 114.266 7.40464 114.323 6.97679C114.331 6.91291 114.298 6.81785 114.401 6.80334C114.495 6.79027 114.509 6.87996 114.54 6.94005C115.114 8.06018 115.687 9.18093 116.26 10.3016C117.122 11.9889 117.984 13.6764 118.848 15.3631C118.883 15.4309 118.902 15.511 118.981 15.5658C119.35 14.8439 119.718 14.125 120.085 13.4061C121.173 11.2795 122.26 9.15288 123.347 7.02626C123.367 6.98806 123.385 6.94894 123.405 6.91131C123.435 6.8559 123.458 6.78376 123.54 6.80368C123.612 6.8209 123.603 6.88955 123.61 6.94476C123.681 7.50867 123.751 8.07264 123.822 8.63665C124.023 10.2573 124.224 11.878 124.427 13.4985C124.602 14.9048 124.78 16.3108 124.957 17.717C124.965 17.78 124.953 17.8482 125 17.9017L125 18.0746Z" fill="#2E5367"/>
+<path d="M95.962 18.0784C95.4698 18.0784 94.9823 18.0785 94.4948 18.0784C94.3849 18.0784 94.3683 17.9754 94.3275 17.9074C93.6933 16.8469 93.0589 15.7865 92.4333 14.7207C92.3492 14.5775 92.258 14.5312 92.0989 14.5324C91.2937 14.5382 90.4884 14.5351 89.6833 14.524C89.5268 14.5218 89.4847 14.5632 89.4859 14.726C89.4934 15.7777 89.486 16.8295 89.4936 17.8812C89.4948 18.0448 89.4514 18.0891 89.2952 18.0832C88.9665 18.0707 88.637 18.0749 88.3081 18.0817C88.1882 18.0841 88.1505 18.0423 88.1525 17.9205C88.1585 17.546 88.1546 17.1713 88.1546 16.7967C88.1546 13.5982 88.1565 10.3997 88.15 7.20122C88.1495 6.99911 88.2056 6.95198 88.3944 6.95393C89.4096 6.96441 90.4255 6.94006 91.4401 6.96737C92.6666 7.00038 93.7917 7.35894 94.6885 8.26268C96.7182 10.308 95.6251 13.1072 93.753 14.0263C93.5601 14.121 93.5758 14.1841 93.674 14.3406C94.4064 15.5076 95.1312 16.6798 95.8569 17.8514C95.8967 17.9156 95.9567 17.9716 95.962 18.0784ZM89.4897 10.713C89.4897 11.4767 89.4988 12.2405 89.4839 13.0038C89.4797 13.2201 89.5491 13.2701 89.7413 13.2686C90.0701 13.2661 90.3993 13.2833 90.7278 13.3022C91.3109 13.3357 91.8905 13.3117 92.4619 13.1858C93.1389 13.0367 93.7482 12.76 94.1043 12.1026C94.5632 11.2555 94.619 9.66187 93.3505 8.80525C92.9946 8.56489 92.6062 8.40694 92.1934 8.31465C91.3353 8.12278 90.4636 8.2167 89.5973 8.19638C89.4563 8.19307 89.4909 8.3004 89.4907 8.37882C89.4891 9.15687 89.4897 9.93494 89.4897 10.713Z" fill="#2E5367"/>
+<path d="M51.9111 12.5177C51.9111 10.7381 51.9138 8.95854 51.907 7.17898C51.9063 6.99758 51.9546 6.95359 52.128 6.95402C54.551 6.95999 56.9741 6.96011 59.3971 6.95386C59.5748 6.95341 59.6231 7.00501 59.6134 7.18234C59.5986 7.45527 59.6015 7.73002 59.6127 8.00333C59.6188 8.15391 59.5738 8.20016 59.4262 8.19837C58.803 8.19083 58.1797 8.19524 57.5564 8.19525C56.2118 8.19527 54.8672 8.19846 53.5227 8.19134C53.3504 8.19042 53.2984 8.23359 53.3 8.4169C53.309 9.42549 53.3088 10.4342 53.3002 11.4428C53.2987 11.6261 53.3535 11.6674 53.5244 11.6666C54.932 11.6596 56.3396 11.6662 57.7472 11.6583C57.9292 11.6572 57.9924 11.6998 57.9793 11.8946C57.9616 12.1599 57.9638 12.4281 57.9787 12.6938C57.989 12.8766 57.9474 12.936 57.7539 12.9347C56.3463 12.9246 54.9386 12.9329 53.5311 12.9248C53.3499 12.9237 53.2976 12.9638 53.2993 13.1586C53.3095 14.3185 53.3093 15.4785 53.2997 16.6384C53.298 16.8452 53.3331 16.9145 53.556 16.9133C55.5938 16.9026 57.6317 16.9097 59.6696 16.9026C59.8577 16.9019 59.9252 16.9453 59.9109 17.1475C59.8925 17.4055 59.9004 17.6661 59.9089 17.9252C59.9131 18.0514 59.8689 18.0907 59.7524 18.0808C59.6551 18.0725 59.5565 18.0792 59.4585 18.0792C57.0214 18.0792 54.5843 18.0767 52.1473 18.0838C51.9535 18.0844 51.9059 18.0305 51.9068 17.8348C51.9141 16.0625 51.911 14.2901 51.9111 12.5177Z" fill="#2E5367"/>
+<path d="M109.161 10.6649C109.161 11.7885 109.191 12.9132 109.154 14.0355C109.081 16.2837 107.65 17.865 105.477 18.1597C104.327 18.3157 103.198 18.2641 102.121 17.7763C100.698 17.1317 99.9289 15.9785 99.7028 14.4171C99.6646 14.153 99.6544 13.887 99.6545 13.6201C99.6553 11.4735 99.6571 9.32697 99.6509 7.18042C99.6504 7.00237 99.6915 6.9445 99.8691 6.95351C100.176 6.96909 100.486 6.9686 100.793 6.95365C100.967 6.94517 101.014 6.99692 101.013 7.17823C101.007 9.28877 101.008 11.3993 101.01 13.5099C101.011 14.1233 101.139 14.7115 101.398 15.2636C101.904 16.3432 102.764 16.9037 103.906 17.0351C104.439 17.0964 104.97 17.0756 105.489 16.9317C106.784 16.5727 107.452 15.6334 107.726 14.3404C107.794 14.0231 107.817 13.7008 107.817 13.375C107.814 11.3149 107.818 9.25474 107.811 7.19461C107.811 7.01192 107.843 6.94054 108.038 6.95274C108.345 6.97195 108.654 6.9698 108.961 6.95336C109.145 6.94352 109.178 7.01337 109.177 7.18575C109.17 8.34544 109.173 9.50518 109.173 10.6649C109.169 10.6649 109.165 10.6649 109.161 10.6649Z" fill="#2E5367"/>
+<path d="M68.5087 18.2301C65.7146 18.2341 63.5551 16.4466 63.0405 13.6824C62.4673 10.6037 64.1309 7.72093 67.0342 6.9962C68.6867 6.5837 70.2759 6.77087 71.7003 7.82238C72.0844 8.10596 72.4015 8.46087 72.6898 8.84518C72.7643 8.94439 72.7545 8.99155 72.6547 9.05951C72.3804 9.2462 72.1093 9.43854 71.8458 9.64093C71.7412 9.72131 71.6913 9.69693 71.6087 9.60801C70.808 8.74616 69.8369 8.25547 68.6735 8.1511C66.6416 7.96883 64.8259 9.43295 64.5265 11.5094C64.4016 12.3761 64.403 13.2367 64.6728 14.0735C65.1793 15.6444 66.3057 16.5079 67.831 16.8083C69.3541 17.1083 70.6551 16.5673 71.7567 15.4824C71.8656 15.3752 71.9366 15.3485 72.0707 15.4289C72.3424 15.5917 72.6237 15.7382 72.9053 15.8827C73.0103 15.9366 73.0129 15.9788 72.9431 16.0714C72.0512 17.2558 70.8918 17.9622 69.4439 18.1603C69.117 18.205 68.7884 18.2171 68.5087 18.2301Z" fill="#2E5367"/>
+<path d="M40.5022 12.4953C40.5022 10.7234 40.5048 8.95159 40.4981 7.1798C40.4975 6.99782 40.5488 6.95243 40.7207 6.95402C41.7218 6.96321 42.7234 6.94164 43.7239 6.96651C44.8952 6.99561 45.9782 7.321 46.8726 8.13981C48.8355 9.93682 48.2576 13.1196 45.7902 14.1405C45.0753 14.4364 44.3279 14.5058 43.567 14.5041C43.0561 14.503 42.5451 14.526 42.0342 14.5231C41.8646 14.5221 41.8296 14.5826 41.8307 14.7459C41.8377 15.7902 41.8307 16.8347 41.8379 17.879C41.8391 18.0393 41.8009 18.0899 41.6415 18.0829C41.3341 18.0695 41.0252 18.0687 40.7178 18.083C40.5411 18.0912 40.4976 18.0319 40.4983 17.8539C40.5047 16.0677 40.5022 14.2815 40.5022 12.4953ZM41.8343 10.7155C41.8343 11.5009 41.8377 12.2864 41.8311 13.0718C41.8299 13.212 41.8707 13.2593 42.0053 13.2625C42.5443 13.2753 43.0831 13.3076 43.6221 13.3119C44.0708 13.3154 44.5162 13.2594 44.9523 13.1432C46.0672 12.8464 46.6276 12.165 46.7334 10.9787C46.8268 9.93249 46.3177 9.0482 45.3525 8.5826C45.0078 8.41637 44.6445 8.31393 44.2684 8.25909C43.5086 8.14825 42.7439 8.21457 41.9816 8.19291C41.8327 8.18869 41.8326 8.26967 41.833 8.38087C41.8354 9.15909 41.8343 9.93731 41.8343 10.7155Z" fill="#2E5367"/>
+<path d="M32.8174 18.2297C31.3009 18.1908 30.0247 17.5314 29.1706 16.0842C29.0798 15.9304 29.0866 15.8616 29.2512 15.7834C29.5493 15.6418 29.8383 15.4793 30.1277 15.3192C30.2195 15.2683 30.2788 15.2662 30.3191 15.3773C30.336 15.4239 30.3658 15.4656 30.3904 15.5091C31.1165 16.7969 32.504 17.3236 33.8796 16.8517C35.1843 16.4042 35.5726 14.7401 34.5002 13.7928C34.1514 13.4846 33.7577 13.2554 33.3439 13.0571C32.6279 12.7139 31.8907 12.4177 31.1948 12.0298C30.9296 11.882 30.6795 11.7118 30.441 11.5213C29.1591 10.4976 29.2722 8.5105 30.505 7.55216C31.1495 7.0511 31.8849 6.83236 32.6799 6.81262C33.6543 6.78841 34.5539 7.01921 35.3128 7.68884C35.5538 7.90148 35.7535 8.15042 35.9323 8.4194C35.9945 8.51295 36.0116 8.57087 35.8905 8.63167C35.6015 8.77677 35.3173 8.93235 35.0344 9.08993C34.9493 9.13735 34.9047 9.13449 34.8561 9.03815C34.2826 7.90201 32.7501 7.74595 31.928 8.14429C31.5766 8.31453 31.2931 8.56249 31.1071 8.91901C30.8365 9.43754 30.8982 9.96205 31.2849 10.3944C31.5642 10.7068 31.9135 10.9201 32.2741 11.1144C32.8383 11.4184 33.4293 11.6632 34.006 11.9395C34.4441 12.1494 34.8667 12.3864 35.2666 12.6683C37.0035 13.8925 36.915 16.1528 35.3411 17.4097C34.6282 17.979 33.8108 18.2292 32.8174 18.2297Z" fill="#2E5367"/>
+<path d="M80.6212 13.1011C80.6212 14.6858 80.6184 16.2705 80.6253 17.8552C80.626 18.0321 80.5861 18.0912 80.4082 18.083C80.0798 18.0679 79.7496 18.0659 79.4214 18.0833C79.2162 18.0942 79.1524 18.044 79.153 17.8165C79.1616 14.6903 79.1588 11.564 79.1588 8.43782C79.1588 8.23245 79.0594 8.12976 78.8607 8.12974C77.7404 8.12974 76.6201 8.12596 75.4999 8.13393C75.3379 8.13507 75.2969 8.08517 75.3034 7.92778C75.3147 7.65454 75.31 7.38041 75.3052 7.10677C75.3033 6.99799 75.3355 6.94299 75.4481 6.95702C75.4826 6.96132 75.5181 6.95758 75.5531 6.95758C78.4447 6.95758 81.3364 6.95988 84.228 6.95264C84.4314 6.95213 84.4974 7.00445 84.4805 7.21414C84.4619 7.44306 84.4648 7.6756 84.4799 7.90504C84.4917 8.08373 84.4385 8.13527 84.262 8.1339C83.1838 8.12555 82.1056 8.12973 81.0273 8.12973C80.7566 8.12973 80.6213 8.26694 80.6213 8.54137C80.6213 10.0613 80.6212 11.5812 80.6212 13.1011Z" fill="#2E5367"/>
+<path d="M14.9674 0.356079H0V12.9531L6.00205 24.4461L20.7944 12.5577L14.9674 0.356079ZM5.73238 22.2061L0.790748 12.7436V2.47688L5.73238 12.5375V22.2061ZM1.0417 1.17952H14.4776L19.6577 12.0266H6.36962L1.0417 1.17952ZM6.52312 22.9871V12.85H19.1365L6.52312 22.9871Z" fill="#2E5367"/>
+</g>
+<defs>
+<clipPath id="clip0_957_12081">
+<rect width="125" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/tailwind.config.js b/spectrum/autism_prevalence_map/static/autism_prevalence_map/tailwind.config.js
index 59a2d020..01eba534 100644
--- a/spectrum/autism_prevalence_map/static/autism_prevalence_map/tailwind.config.js
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/tailwind.config.js
@@ -107,6 +107,8 @@ module.exports = {
                 'sm': '0.25rem', // 4px
                 'sm-l': '0.25rem 0 0 0.25rem', // 4px
                 'sm-r': '0 0.25rem 0.25rem 0', // 4px
+                'sm-t': '0.25rem 0.25rem 0 0', // 4px
+                'sm-b': '0 0 0.25rem 0.25rem', // 4px
                 'sm2-b': '0 0 0.5rem 0.5rem', // 8px
                 'md': '0.5rem', // 9px
                 'lg': '0.75rem', // 12px
@@ -139,18 +141,25 @@ module.exports = {
                 'map-lg': '30.125rem',  // 482px
                 'map-xl': '39rem',  // 624px
                 'card-xl': '42.25rem', // 676px
+                'map-expand': '33.063rem', // 529px
+                'map-lg-expand': '34.813rem',  // 557px
+                'map-xl-expand': '43.688rem',  // 699px
+                'card-xl-expand': '46.938rem', // 751px
                 'timeline': '11.75rem', // 188px
                 'brush': '11.313rem', // 181px
                 'switchout': '1.5rem', // 24px
                 'switchin': '0.875rem', // 14px
                 'arrow': '0.5rem', // 8px
                 'arrow2': '6.5px', // 6.5px
+                'expand': '2.25rem', // 36px
+                'zoom': '2.375rem', // 38px
             },
             width: {
                 'search': '15.5rem', // 248px
                 'arrow': '0.75rem', // 12px
                 'arrow2': '0.813rem', // 13px
                 'switchin': '0.875rem', // 14px
+                'zoomcontrol': '2.25rem', // 36px
                 'switchout': '2.75rem', // 44px
                 'filter': '10.813rem', // 173px
                 'button': '12rem', // 192px
@@ -169,6 +178,9 @@ module.exports = {
                 'map': '51.625rem', // 826px
                 'map-lg': '55.75rem',  // 892px
                 'map-xl': '72.125rem',  // 1154px
+                'map-expand': '61.188rem', // 979px
+                'map-lg-expand': '64.438rem',  // 1031px
+                'map-xl-expand': '80.875rem',  // 1294px
             },
             maxHeight: {
                 'info1': 'calc(100% - 52px)', // height of the info card minus the sticky button wrapper at the bottom with 1 link
diff --git a/spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts b/spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
index 052a8811..849d0a2d 100644
--- a/spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
+++ b/spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
@@ -15,6 +15,7 @@ export function ttInitMap() {
         // globaly scope some variables for the timeline
         let timeline_height, brush, brushG, timelineDiv, timelineSVG, timelineG, timelineX, timelineY, max_Y_domain, studiesByYear, handle, handleText, timeMin, timeMax;
 
+        let originalWidth, originalScale;
 
         // add map data to the world map g container
         app.map.initializeMap = function() {
@@ -34,6 +35,10 @@ export function ttInitMap() {
             } else {
                 scale = 198;
             }
+
+            // store these for use when the expand button is clicked
+            originalWidth = width;
+            originalScale = scale;
             
             // data holder
             studies = null;
@@ -77,19 +82,18 @@ export function ttInitMap() {
             svg_zoom = d3.select('#map-svg');
 
             zoom = d3.zoom()
-                .scaleExtent([0.75, 5])
+                .scaleExtent([0.75, 6.5536])
                 .on('zoom', zoomed);
 
             svg_zoom.call(zoom);
 
             // define zooming function for zooming map
             function zoomed() {
-                //g_zoom.style('stroke-width', 1.5 / d3.event.scale + 'px');
-                g_zoom.attr('transform', `translate(${d3.event.transform.x},  ${d3.event.transform.y}) scale(${d3.event.transform.k})`);
-                // set pin sizes based on zoom level
+                // store the zoom level in currentZoom
+                currentZoom = d3.event.transform.k;
+                g_zoom.attr('transform', `translate(${d3.event.transform.x}, ${d3.event.transform.y}) scale(${d3.event.transform.k})`);
                 scalePins(d3.event.transform.k);
-                
-            };
+            }
 
             // create container for timeline
             timelineDiv = d3.select('#timeline'),
@@ -147,7 +151,7 @@ export function ttInitMap() {
                     
                 app.map.initializeTimeline();
 
-            });        
+            });       
         }
 
         // pull data and update timeline function
@@ -315,8 +319,7 @@ export function ttInitMap() {
 
             }
             
-            app.map.pullDataAndUpdate();
-                        
+            app.map.pullDataAndUpdate();             
         }
 
         app.map.updateTimeline = function() {
@@ -714,8 +717,7 @@ export function ttInitMap() {
 
             simulation = forceSimulation(nodes).on('tick', ticked);
 
-            zoom_transition(1); 
-
+            zoom_transition(1);
         }
 
         function forceSimulation(nodes) {
@@ -773,21 +775,25 @@ export function ttInitMap() {
         }
 
         // set up listeners for zoom
+        let currentZoom = 1;
+        const zoomInFactor = 1.6;
+        // exact inverse of 1.6
+        const zoomOutFactor = 0.625;
+        const center = [width / 2, height / 2];
+
         d3.selectAll('button').on('click', function() {
-            // zoom in 0.5 each time
             if (this.id === 'zoom-in') {
-                zoom_transition(1.75); 
-            }
-            // zoom out 0.5 each time
-            if (this.id === 'zoom-out') {
-                zoom_transition(0.575);
-            }
-            // return to initial state
-            if (this.id === 'zoom_init') {
-                svg_zoom.transition()
-                    .duration(500)
-                    .call(zoom.scaleTo, 1); 
+                // allow 4 zoom in levels
+                if (currentZoom >= 6.5536) return;
+                // if we are already below the base zoom level, reset to the base zoom level, otherwise zoom in
+                currentZoom = currentZoom < 1 ? 1 : currentZoom * zoomInFactor;
+            } else if (this.id === 'zoom-out') {
+                // only allow zooming out one level from the base zoom level
+                currentZoom = currentZoom <= 1 ? zoomOutFactor : Math.max(zoomOutFactor, currentZoom * zoomOutFactor);
             }
+
+            svg_zoom.transition()
+                .call(zoom.scaleTo, currentZoom, center);
         });
 
         function showHover(pk) {
@@ -1009,6 +1015,117 @@ export function ttInitMap() {
             }
         });
 
+        // function to update the map dimensions when the expand button is clicked
+        function resizeMap(savedTransform) {
+            // map dimensions before resize
+            const oldWidth = +svg.attr('width');
+            const oldHeight = +svg.attr('height');
+
+            // map dimensions after resize
+            const containerWidth = $('#map').width();
+            const containerHeight = $('#map').height();
+
+            // use saved transform if we have it
+            const transformData = savedTransform || { k: 1, x: 0, y: 0 };
+            
+            // new projection scale
+            const scaleFactor = containerWidth / originalWidth;
+            scale = originalScale * scaleFactor;
+
+            svg.attr('width', containerWidth)
+               .attr('height', containerHeight);
+
+            // update the projection
+            projection
+                .scale(scale)
+                .translate([containerWidth / 2, containerHeight / 2]);
+
+            // redraw the map paths with the updated projection
+            g.selectAll('path').attr('d', path);
+
+            // update positions of map nodes
+            if (nodes && nodes.length) {
+                if (simulation) {
+                    simulation.stop();
+                }
+                
+                nodes.forEach(function(d) {
+                    const pos = projection(d.geometry.coordinates);
+                    d.x = pos[0];
+                    d.y = pos[1];
+                    d.originalX = pos[0];
+                    d.originalY = pos[1];
+                });
+                
+                if (simulation) {
+                    simulation.nodes(nodes);
+                    simulation.alpha(1).restart();
+                }
+                
+                studiesG.selectAll('circle.map-circles')
+                    .attr('cx', function(d) { return d.x; })
+                    .attr('cy', function(d) { return d.y; });
+            }
+
+            // calculate the center point before and after resize
+            const oldCenterX = oldWidth / 2;
+            const oldCenterY = oldHeight / 2;
+            const newCenterX = containerWidth / 2;
+            const newCenterY = containerHeight / 2;
+            
+            const distanceFromCenterX = (transformData.x - oldCenterX) / transformData.k;
+            const distanceFromCenterY = (transformData.y - oldCenterY) / transformData.k;
+            
+            const newX = newCenterX + (distanceFromCenterX * transformData.k);
+            const newY = newCenterY + (distanceFromCenterY * transformData.k);
+            
+            const widthRatio = containerWidth / oldWidth;
+            const heightRatio = containerHeight / oldHeight;
+            
+            const adjustedX = transformData.x * widthRatio;
+            const adjustedY = transformData.y * heightRatio;
+            
+            // create and apply the new transform
+            const newTransform = d3.zoomIdentity
+                .translate(adjustedX, adjustedY)
+                .scale(transformData.k);
+            
+            svg_zoom.call(zoom.transform, newTransform);
+            
+            scalePins(transformData.k);
+        }
+
+        // handle the expand button functionality
+        $('#expand').on('click', function() {
+            const savedZoomLevel = currentZoom;
+            
+            // get the current position information
+            const currentTransform = g_zoom.attr('transform');
+            let transformData = { k: savedZoomLevel, x: 0, y: 0 };
+            
+            if (currentTransform) {
+                const translateMatch = currentTransform.match(/translate\(([^,]+),\s*([^)]+)\)/);
+                if (translateMatch && translateMatch.length >= 3) {
+                    transformData.x = parseFloat(translateMatch[1]);
+                    transformData.y = parseFloat(translateMatch[2]);
+                }
+            }
+
+            $('#map').data('savedTransform', transformData);
+            
+            // toggle classes to expand the map and info-card, hide the header, and modify the expand button
+            $('header').slideToggle(300);
+            $('#info-card-container').toggleClass('h-map-expand lg:h-map-lg-expand xl:h-card-xl-expand lg:mr-0 xl:mr-0');
+            $('#map').toggleClass('h-map-expand lg:h-map-lg-expand xl:h-map-xl-expand w-map-expand lg:w-map-lg-expand xl:w-map-xl-expand');
+            $(this).find('#icon-expand').toggleClass('hidden');
+            $(this).find('#icon-minimize').toggleClass('hidden');
+
+            // resize the SVG and its parts after animation completes
+            setTimeout(function(){
+                resizeMap($('#map').data('savedTransform'));
+            }, 300);
+        });
+
         // move to the front prototype
         d3.selection.prototype.moveToFront = function() {
             return this.each(function(){
diff --git a/spectrum/autism_prevalence_map/templates/autism_prevalence_map/map.html b/spectrum/autism_prevalence_map/templates/autism_prevalence_map/map.html
index 593d1909..ca6dee6b 100644
--- a/spectrum/autism_prevalence_map/templates/autism_prevalence_map/map.html
+++ b/spectrum/autism_prevalence_map/templates/autism_prevalence_map/map.html
@@ -1,6 +1,7 @@
 {% extends 'autism_prevalence_map/base.html' %} 
 
-{% load static %} 
+{% load static %}
+{% load svg %}
 
 {% block page_name %}map{% endblock %}
 
@@ -12,15 +13,40 @@
 
     <!-- Map div
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <div class='flex mb-6 xl:mb-10'>
-        <div id='info-card-container' class='relative h-map lg:h-map-lg xl:h-card-xl w-info lg:mr-10.5 xl:mr-12 pt-4 bg-white border-0.5 border-light-gray3 rounded-md shadow-info'>
+    <div class='relative flex mb-6 xl:mb-10'>
+        <div id='info-card-container' class='relative flex-shrink-0 h-map lg:h-map-lg xl:h-card-xl w-info lg:mr-10.5 xl:mr-12 pt-4 bg-white border-0.5 border-light-gray3 rounded-md shadow-info transition-all duration-300 ease-in-out'>
             <div id='info-card' data-content='welcome' class='relative overflow-y-scroll px-4 pb-0.75'>
                 <h1 class='mt-24 lg:mt-25.5 xl:mt-46.5 mb-3.25 max-w-welcome font-serif text-2md font-bold leading-7.2 text-med-navy'>Welcome to the Global Autism Prevalence Map.</h1>
                 <p class='mb-9 max-w-welcome font-serif text-sm3 leading-4.5 text-dark-gray2'>Click on any dot on the map to view detailed information about a study. Data from that study will be displayed in this panel.</p>
                 <a href='/about/' class='inline-block w-learn py-2.5 bg-med-navy rounded-sm text-sm font-bold text-light-navy-2 uppercase text-center no-underline'>Learn More</a>
             </div>
         </div>
-        <div id='map' class='h-map w-map lg:h-map-lg lg:w-map-lg xl:h-map-xl xl:w-map-xl xl:mt-6.5'></div>
+
+        <div id='map' class='h-map w-map lg:h-map-lg lg:w-map-lg xl:h-map-xl xl:w-map-xl xl:mt-6.5 transition-all duration-300 ease-in-out overflow-hidden'></div>
+
+        <div id='zoom-buttons' class='absolute bottom-0 right-0 flex flex-col items-end gap-6'>
+            <button type='button' id='expand' class='flex items-center justify-center w-zoomcontrol h-expand border-0.5 border-med-navy rounded-sm bg-light-gray cursor-pointer'>
+                <span id='icon-expand'>{% svg 'icon-expand' %}</span>
+                <span id='icon-minimize' class='hidden'>{% svg 'icon-minimize' %}</span>
+                <span class='sr-only'>Expand or Minimize</span>
+            </button>
+
+            <div class='flex flex-col'>
+                <button type='button' id='zoom-in' class='flex items-center justify-center w-zoomcontrol h-zoom border-0.5 border-b-0 border-med-navy rounded-sm-t bg-light-gray cursor-pointer'>
+                    {% svg 'icon-plus' %}
+                    <span class='sr-only'>Zoom In</span>
+                </button>
+                <button type='button' id='zoom-out' class='flex items-center justify-center w-zoomcontrol h-zoom border-0.5 border-med-navy rounded-sm-b bg-light-gray cursor-pointer'>
+                    {% svg 'icon-minus' %}
+                    <span class='sr-only'>Zoom Out</span>
+                </button>
+            </div>
+
+            <a class='inline-block' href='https://www.thetransmitter.org/spectrum/' target='_blank'>
+                {% svg 'spectrum-logo' %}
+                <span class='sr-only'>Spectrum</span>
+            </a>
+        </div>
     </div>
     <!-- Timeline div
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -44,15 +70,6 @@ <h2 class='mb-2.75 font-serif text-lg2 text-tan'>Timeline of studies</h2>
     </div>
 </div>
 
-<!-- Zoom buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<!--
-<div id='zoom-buttons' class='zoom-buttons btn-group-vertical'>
-    <button type='button' id='zoom-in' class='btn zoom-button'><i class='fas fa-plus'></i></button>
-    <button type='button' id='zoom-out' class='btn zoom-button'><i class='fas fa-minus'></i></button>
-</div>
--->
-
 <!-- More Information Card
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 <!--


Reviews:
user: login: yjfnyc
body: Looks good in general, in addition to the issue we discussed this morning, I found when expand(+) then shrink(-), a little of top/bottom of the map cannot be seen as the following screenshot
![Screenshot 2025-03-14 at 10 56 32 PM](https://github.com/user-attachments/assets/d8057235-c1e2-4504-9d70-babd7f984f75)

I also have some minor code comments. 
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-15T02:58:08Z
user: login: mattga11ant
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-15T20:17:24Z
user: login: mattga11ant
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-15T20:19:15Z
user: login: yjfnyc
body: This works great! Thanks @mattga11ant. I am glad you had fun with this.
state: APPROVED
author_association: NONE
submitted_at: 2025-03-15T21:10:54Z

Review comments:
diff_hunk: @@ -1009,6 +1014,73 @@ export function ttInitMap() {
             }
         });
 
+        // function to update the map dimensions when the expand button is clicked
+        function resizeMap() {
+            // new container dimensions after it is resized
+            const containerWidth  = $('#map').width();
+            const containerHeight = $('#map').height();
+
+            // calculate the correct new scale based on our original scale
+            const scaleFactor = containerWidth / originalWidth;
+            scale = originalScale * scaleFactor;
+
+            // resize the SVG
+            svg.attr('width', containerWidth)
+               .attr('height', containerHeight);
+
+            // center the map
+            projection
+                .scale(scale)
+                .translate([containerWidth / 2, containerHeight / 2]);
+
+            // redraw the map paths
+            g.selectAll('path').attr('d', path);
+
+            // update the position of the map dots
+            if (nodes && nodes.length) {
+                if (simulation) simulation.stop();
path: spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
user: login: yjfnyc
body: Please put opening and closing curly brace for this conditional.
created_at: 2025-03-15T02:20:08Z
author_association: NONE
diff_hunk: @@ -1009,6 +1014,73 @@ export function ttInitMap() {
             }
         });
 
+        // function to update the map dimensions when the expand button is clicked
+        function resizeMap() {
+            // new container dimensions after it is resized
+            const containerWidth  = $('#map').width();
+            const containerHeight = $('#map').height();
+
+            // calculate the correct new scale based on our original scale
+            const scaleFactor = containerWidth / originalWidth;
+            scale = originalScale * scaleFactor;
+
+            // resize the SVG
+            svg.attr('width', containerWidth)
+               .attr('height', containerHeight);
+
+            // center the map
+            projection
+                .scale(scale)
+                .translate([containerWidth / 2, containerHeight / 2]);
+
+            // redraw the map paths
+            g.selectAll('path').attr('d', path);
+
+            // update the position of the map dots
+            if (nodes && nodes.length) {
+                if (simulation) simulation.stop();
+
+                nodes.forEach(function(d) {
+                    const pos = projection(d.geometry.coordinates);
+                    d.x = pos[0];
+                    d.y = pos[1];
+                    d.originalX = pos[0];
+                    d.originalY = pos[1];
path: spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
user: login: yjfnyc
body: I am wondering why not just use `d.x` and `d.y` when `d.originalX` and `d.originalY` are used. They seem to be the same along the way.
created_at: 2025-03-15T02:53:55Z
author_association: NONE
diff_hunk: @@ -1009,6 +1014,73 @@ export function ttInitMap() {
             }
         });
 
+        // function to update the map dimensions when the expand button is clicked
+        function resizeMap() {
+            // new container dimensions after it is resized
+            const containerWidth  = $('#map').width();
+            const containerHeight = $('#map').height();
+
+            // calculate the correct new scale based on our original scale
+            const scaleFactor = containerWidth / originalWidth;
+            scale = originalScale * scaleFactor;
+
+            // resize the SVG
+            svg.attr('width', containerWidth)
+               .attr('height', containerHeight);
+
+            // center the map
+            projection
+                .scale(scale)
+                .translate([containerWidth / 2, containerHeight / 2]);
+
+            // redraw the map paths
+            g.selectAll('path').attr('d', path);
+
+            // update the position of the map dots
+            if (nodes && nodes.length) {
+                if (simulation) simulation.stop();
path: spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
user: login: mattga11ant
body: This has been updated.
created_at: 2025-03-15T20:17:24Z
author_association: COLLABORATOR
diff_hunk: @@ -1009,6 +1014,73 @@ export function ttInitMap() {
             }
         });
 
+        // function to update the map dimensions when the expand button is clicked
+        function resizeMap() {
+            // new container dimensions after it is resized
+            const containerWidth  = $('#map').width();
+            const containerHeight = $('#map').height();
+
+            // calculate the correct new scale based on our original scale
+            const scaleFactor = containerWidth / originalWidth;
+            scale = originalScale * scaleFactor;
+
+            // resize the SVG
+            svg.attr('width', containerWidth)
+               .attr('height', containerHeight);
+
+            // center the map
+            projection
+                .scale(scale)
+                .translate([containerWidth / 2, containerHeight / 2]);
+
+            // redraw the map paths
+            g.selectAll('path').attr('d', path);
+
+            // update the position of the map dots
+            if (nodes && nodes.length) {
+                if (simulation) simulation.stop();
+
+                nodes.forEach(function(d) {
+                    const pos = projection(d.geometry.coordinates);
+                    d.x = pos[0];
+                    d.y = pos[1];
+                    d.originalX = pos[0];
+                    d.originalY = pos[1];
path: spectrum/autism_prevalence_map/static/autism_prevalence_map/ts/map.ts
user: login: mattga11ant
body: @yjfnyc this is required because during the force simulation d.x and d.y change but we don't want the original values to change. I tried playing with this to see if there was another way I could do it, but this direction feels like it works the best. Happy to chat through this one if you are seeing something different.
created_at: 2025-03-15T20:19:15Z
author_association: COLLABORATOR

PR comments:
user: login: mattga11ant
created_at: 2025-03-15T20:17:10Z
body: > Looks good in general, in addition to the issue we discussed this morning, I found when expand(+) then shrink(-), a little of top/bottom of the map cannot be seen as the following screenshot ![Screenshot 2025-03-14 at 10 56 32 PM](https://private-user-images.githubusercontent.com/9726273/423011950-d8057235-c1e2-4504-9d70-babd7f984f75.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDIwNzAxMDUsIm5iZiI6MTc0MjA2OTgwNSwicGF0aCI6Ii85NzI2MjczLzQyMzAxMTk1MC1kODA1NzIzNS1jMWUyLTQ1MDQtOWQ3MC1iYWJkN2Y5ODRmNzUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDMxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAzMTVUMjAxNjQ1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODU0MzMzY2VkODEzMWJmMmVjZDNkNmZmZTlhOTk3ZDVmNDYyZmQ0MjI1NmE0NGRjYzNjODBmYmZjOTQwMTIyMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.cTLIsTp8VE7ycn44Ykn0VCRH0Coev9Sdjx7L3p3Kwro)
> 
> I also have some minor code comments.

@yjfnyc this should be corrected with my updates. I can no longer replicate this issue.
author_association: COLLABORATOR
user: login: mattga11ant
created_at: 2025-03-15T20:21:23Z
body: @yjfnyc I pushed updates that address the zoom and expand items I discovered were still not working as they should. Now the zoom and and zoom out buttons work as expected as well as using the mouse to zoom. When clicking expand or minimize when at the base zoom level, or while zoomed in (using the zoom buttons or your mouse) the map will stay centered and maintain the zoom level. This one was fun, but really challenging to work through!
author_association: COLLABORATOR