Merge pull request #665 from NASA-IMPACT/update/stationary-icons

Update stationary platform icons
NASA-IMPACT · Jul 22, 2024 · 4b49a47 · 4b49a47
2 parents b78c041 + 6375186
commit 4b49a47
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/src/components/timeline/map.js b/src/components/timeline/map.js
@@ -129,11 +129,11 @@ export function DeploymentMap({
                   0,
                   4,
                   10,
-                  10,
+                  14,
                   22,
-                  18,
+                  20,
                 ],
-                "circle-stroke-width": 0.75,
+                "circle-stroke-width": 1,
                 "circle-stroke-color": iconColors,
               },
               filter: ["all", ["==", "$type", "Point"]],
@@ -155,7 +155,7 @@ export function DeploymentMap({
                 "icon-allow-overlap": true,
                 "icon-size": [
                   "interpolate",
-                  ["exponential", 0.3],
+                  ["exponential", 0.5],
                   ["zoom"],
                   0,
                   0.25,

diff --git a/src/icons/static-platform-icons.js b/src/icons/static-platform-icons.js
@@ -8,13 +8,13 @@ import { sizes } from "./utils"
 export const PermanentLandSiteIcon = ({ size = "extra-tiny" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
+    viewBox="0 0 576 512"
     width={sizes[size].width}
     height={sizes[size].height}
   >
     <path
       fill="currentColor"
-      d="M0 488V171.3c0-26.2 15.9-49.7 40.2-59.4L308.1 4.8c7.6-3.1 16.1-3.1 23.8 0L599.8 111.9c24.3 9.7 40.2 33.3 40.2 59.4V488c0 13.3-10.7 24-24 24H568c-13.3 0-24-10.7-24-24V224c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32V488c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zm488 24l-336 0c-13.3 0-24-10.7-24-24V432H512l0 56c0 13.3-10.7 24-24 24zM128 400V336H512v64H128zm0-96V224H512l0 80H128z"
+      d="M62.6 2.3C46.2-4.3 27.6 3.6 20.9 20C7.4 53.4 0 89.9 0 128s7.4 74.6 20.9 108c6.6 16.4 25.3 24.3 41.7 17.7S86.9 228.4 80.3 212C69.8 186.1 64 157.8 64 128s5.8-58.1 16.3-84C86.9 27.6 79 9 62.6 2.3zm450.8 0C497 9 489.1 27.6 495.7 44C506.2 69.9 512 98.2 512 128s-5.8 58.1-16.3 84c-6.6 16.4 1.3 35 17.7 41.7s35-1.3 41.7-17.7c13.5-33.4 20.9-69.9 20.9-108s-7.4-74.6-20.9-108C548.4 3.6 529.8-4.3 513.4 2.3zM340.1 165.2c7.5-10.5 11.9-23.3 11.9-37.2c0-35.3-28.7-64-64-64s-64 28.7-64 64c0 13.9 4.4 26.7 11.9 37.2L98.9 466.8c-7.3 16.1-.2 35.1 15.9 42.4s35.1 .2 42.4-15.9L177.7 448l220.6 0 20.6 45.2c7.3 16.1 26.3 23.2 42.4 15.9s23.2-26.3 15.9-42.4L340.1 165.2zM369.2 384l-162.4 0 14.5-32 133.3 0 14.5 32zM288 205.3L325.6 288l-75.2 0L288 205.3zM163.3 73.6c5.3-12.1-.2-26.3-12.4-31.6s-26.3 .2-31.6 12.4C109.5 77 104 101.9 104 128s5.5 51 15.3 73.6c5.3 12.1 19.5 17.7 31.6 12.4s17.7-19.5 12.4-31.6C156 165.8 152 147.4 152 128s4-37.8 11.3-54.4zM456.7 54.4c-5.3-12.1-19.5-17.7-31.6-12.4s-17.7 19.5-12.4 31.6C420 90.2 424 108.6 424 128s-4 37.8-11.3 54.4c-5.3 12.1 .2 26.3 12.4 31.6s26.3-.2 31.6-12.4C466.5 179 472 154.1 472 128s-5.5-51-15.3-73.6z"
     />
   </svg>
 )
@@ -50,13 +50,13 @@ export const BalloonIcon = ({ size = "extra-tiny" }) => (
 export const FieldSiteIcon = ({ size = "extra-tiny" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 576 512"
+    viewBox="0 0 512 512"
     width={sizes[size].width}
     height={sizes[size].height}
   >
     <path
       fill="currentColor"
-      d="M269.4 6C280.5-2 295.5-2 306.6 6l224 160c7.4 5.3 12.2 13.5 13.2 22.5l32 288c1 9-1.9 18.1-8 24.9s-14.7 10.7-23.8 10.7H464 435.8c-12.1 0-23.2-6.8-28.6-17.7L306.7 293.5c-1.7-3.4-5.1-5.5-8.8-5.5c-5.5 0-9.9 4.4-9.9 9.9V480c0 17.7-14.3 32-32 32H240 32c-9.1 0-17.8-3.9-23.8-10.7s-9-15.8-8-24.9l32-288c1-9 5.8-17.2 13.2-22.5L269.4 6z"
+      d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
     />
   </svg>
 )
@@ -98,7 +98,21 @@ export const MooredBuoyIcon = ({ size = "extra-tiny" }) => (
   >
     <path
       fill="currentColor"
-      d="M180.7 4.7c6.2-6.2 16.4-6.2 22.6 0l80 80c2.5 2.5 4.1 5.8 4.6 9.3l40.2 322H55.9L96.1 94c.4-3.5 2-6.8 4.6-9.3l80-80zM152 272c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24H152zM32 448H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
+      d="M192 0c-17.7 0-32 14.3-32 32c0 15.3 10.8 28.1 25.1 31.3L133.8 320 96 320c-17.7 0-32 14.3-32 32l0 16c0 8.2 .7 16.1 2 23.9c21-11.1 46.9-9.9 66.9 4.2c18 12.4 40.1 20.3 59.2 20.3c21.1 0 42-8.5 59.2-20.3c22.1-15.5 51.6-15.5 73.7 0c18.4 12.7 39.6 20.3 59.2 20.3c19 0 41.2-7.9 59.2-20.3c20-14.1 45.9-15.3 66.9-4.2c1.3-7.8 2-15.8 2-23.9l0-16c0-17.7-14.3-32-32-32l-37.8 0L390.9 63.3C405.2 60.1 416 47.3 416 32c0-17.7-14.3-32-32-32L192 0zM325.8 64l9.8 49L288 168.5 240.4 113l9.8-49 75.5 0zm21.8 108.8l17 84.9-44.9-52.4 27.9-32.6zm-91.1 32.6l-44.9 52.4 17-84.9 27.9 32.6zM221.3 320L288 242.2 354.7 320l-133.4 0zm85.2 101.9c-11.1-7.9-25.9-7.9-37 0C247 437.4 219.5 448 192 448c-26.9 0-55.3-10.8-77.4-26.1c0 0 0 0 0 0c-11.9-8.5-28.1-7.8-39.2 1.7c-14.4 11.9-32.5 21-50.6 25.2c-17.2 4-27.9 21.2-23.9 38.4s21.2 27.9 38.4 23.9c24.5-5.7 44.9-16.5 58.2-25C126.5 501.7 159 512 192 512c31.9 0 60.6-9.9 80.4-18.9c5.8-2.7 11.1-5.3 15.6-7.7c4.5 2.4 9.7 5.1 15.6 7.7c19.8 9 48.5 18.9 80.4 18.9c33 0 65.5-10.3 94.5-25.8c13.4 8.4 33.7 19.3 58.2 25c17.2 4 34.4-6.7 38.4-23.9s-6.7-34.4-23.9-38.4c-18.1-4.2-36.2-13.3-50.6-25.2c-11.1-9.4-27.3-10.1-39.2-1.7c0 0 0 0 0 0C439.4 437.2 410.9 448 384 448c-27.5 0-55-10.6-77.5-26.1z"
+    />
+  </svg>
+)
+
+export const ShipIcon = ({ size = "extra-tiny" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    width={sizes[size].width}
+    height={sizes[size].height}
+  >
+    <path
+      fill="currentColor"
+      d="M192 32c0-17.7 14.3-32 32-32L352 0c17.7 0 32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 128 44.4 14.8c23.1 7.7 29.5 37.5 11.5 53.9l-101 92.6c-16.2 9.4-34.7 15.1-50.9 15.1c-19.6 0-40.8-7.7-59.2-20.3c-22.1-15.5-51.6-15.5-73.7 0c-17.1 11.8-38 20.3-59.2 20.3c-16.2 0-34.7-5.7-50.9-15.1l-101-92.6c-18-16.5-11.6-46.2 11.5-53.9L96 240l0-128c0-26.5 21.5-48 48-48l48 0 0-32zM160 218.7l107.8-35.9c13.1-4.4 27.3-4.4 40.5 0L416 218.7l0-90.7-256 0 0 90.7zM306.5 421.9C329 437.4 356.5 448 384 448c26.9 0 55.4-10.8 77.4-26.1c0 0 0 0 0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 501.7 417 512 384 512c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7c0 0 0 0 0 0C136.7 437.2 165.1 448 192 448c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z"
     />
   </svg>
 )
diff --git a/src/utils/__tests__/platform-colors.test.js b/src/utils/__tests__/platform-colors.test.js
@@ -44,6 +44,8 @@ describe("getStaticIcons", () => {
       STATIC_PLATFORMS[5].mapIcon,
       STATIC_PLATFORMS[6].name,
       STATIC_PLATFORMS[6].mapIcon,
+      STATIC_PLATFORMS[7].name,
+      STATIC_PLATFORMS[7].mapIcon,
       "BalloonIcon",
     ]
     expect(getStaticIcons()).toEqual(result)

diff --git a/src/utils/platform-colors.js b/src/utils/platform-colors.js
@@ -8,6 +8,7 @@ import {
   PermanentLandSiteIcon,
   PermanentWaterSiteIcon,
   VehicleIcon,
+  ShipIcon,
 } from "../icons/static-platform-icons"
 
 export const MOVING_PLATFORMS_COLORS = [
@@ -66,6 +67,12 @@ export const STATIC_PLATFORMS = [
     icon: <MooredBuoyIcon />,
     mapIcon: "MooredBuoyIcon",
   },
+  {
+    name: "Ship",
+    color: "#F2290A",
+    icon: <ShipIcon />,
+    mapIcon: "ShipIcon",
+  },
 ]
 
 export const flightPathColors = platforms =>