✨ (static-map) increase stroke width on mobile

owid · Dec 15, 2023 · c5152ba · c5152ba
1 parent c24739c
commit c5152ba
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -576,6 +576,10 @@ export class MapChart
         return 0
     }
 
+    @computed get strokeWidth(): number | undefined {
+        return this.manager.isStaticAndSmall ? 2 : undefined
+    }
+
     renderMapLegend(): JSX.Element {
         const { numericLegend, categoryLegend } = this
 
@@ -629,7 +633,9 @@ export class MapChart
 declare type SVGMouseEvent = React.MouseEvent<SVGElement>
 
 @observer
-class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
+class ChoroplethMap extends React.Component<{
+    manager: ChoroplethMapManager
+}> {
     base: React.RefObject<SVGGElement> = React.createRef()
 
     @computed private get uid(): number {
@@ -640,6 +646,10 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
         return this.props.manager
     }
 
+    @computed private get strokeWidth(): number {
+        return this.manager.strokeWidth ?? 1
+    }
+
     @computed.struct private get bounds(): Bounds {
         return this.manager.choroplethMapBounds
     }
@@ -843,8 +853,10 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
             featuresWithData,
         } = this
         const focusStrokeColor = "#111"
-        const focusStrokeWidth = 1.5
-        const selectedStrokeWidth = 1
+        const defaultStrokeWidth = this.strokeWidth * 0.3
+        const focusStrokeWidth = this.strokeWidth * 1.5
+        const selectedStrokeWidth = this.strokeWidth * 1
+        const patternStrokeWidth = this.strokeWidth * 0.7
         const blurFillOpacity = 0.2
         const blurStrokeOpacity = 0.5
 
@@ -883,7 +895,9 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
                                     <path
                                         key={feature.id}
                                         d={feature.path}
-                                        strokeWidth={0.3 / viewportScale}
+                                        strokeWidth={
+                                            defaultStrokeWidth / viewportScale
+                                        }
                                         stroke={"#aaa"}
                                         fill={"#fff"}
                                     />
@@ -912,7 +926,7 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
                                     <path
                                         d="M -1,2 l 6,0"
                                         stroke="#ccc"
-                                        strokeWidth="0.7"
+                                        strokeWidth={patternStrokeWidth}
                                     />
                                 </pattern>
                             </defs>
@@ -935,7 +949,9 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
                                         key={feature.id}
                                         d={feature.path}
                                         strokeWidth={
-                                            (isFocus ? focusStrokeWidth : 0.3) /
+                                            (isFocus
+                                                ? focusStrokeWidth
+                                                : defaultStrokeWidth) /
                                             viewportScale
                                         }
                                         stroke={stroke}
@@ -991,7 +1007,8 @@ class ChoroplethMap extends React.Component<{ manager: ChoroplethMapManager }> {
                                             ? focusStrokeWidth
                                             : showSelectedStyle
                                             ? selectedStrokeWidth
-                                            : 0.3) / viewportScale
+                                            : defaultStrokeWidth) /
+                                        viewportScale
                                     }
                                     stroke={stroke}
                                     strokeOpacity={strokeOpacity}

diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChartConstants.ts b/packages/@ourworldindata/grapher/src/mapCharts/MapChartConstants.ts
@@ -41,6 +41,7 @@ export interface ChoroplethMapManager {
     onClick: (d: GeoFeature, ev: React.MouseEvent<SVGElement>) => void
     onMapMouseOver: (d: GeoFeature) => void
     onMapMouseLeave: () => void
+    strokeWidth?: number
 }
 
 export interface RenderFeature {