Map pin icons are different sizes on iOS and Android; blurry on iOS

[ltseng]

Description

The pins are enormous on iOS, but not on Android. The following screenshots have been taken on both iOS and Android at roughly the same scale, aka whatever scale the map is set to upon first opening the app.

Android

iOS

[shrouxm]

@paulschreiber can you look into this? i think the only relevant values should be in dev-client/src/components/home/SiteMap.tsx. we specify the size in these two places:

• when generating the static icon image here:

  terraso-mobile-client/dev-client/src/components/home/SiteMap.tsx

  Lines 223 to 227 in e66af6f

  	sitePin: MapIcon.getImageSourceSync(
  	'location-on',
  	35,
  	colors.secondary.main,
  	),

• when specifying the layer styles here:

  terraso-mobile-client/dev-client/src/components/home/SiteMap.tsx

  Lines 270 to 275 in e66af6f

  	siteLayer: {
  	iconAllowOverlap: true,
  	iconAnchor: 'bottom',
  	iconSize: 3.0,
  	iconImage: 'sitePin',
  	} satisfies Mapbox.SymbolLayerStyle,

i'm guessing one (hopefully not both 😱) of the values behaves differently per platform, so if you could find a set of values that creates the same size icon on android and iOS that should resolve the issue. See e.g. here in the design for the expected size. (We aren't displaying the cluster icons or increasing the icon size when it is selected yet).

[paulschreiber]

Filed rnmapbox/maps#3009

[paulschreiber]

Please retest on build 24 or later.

[ltseng]

Map markers on Android are now tiny. On iPad and iPhone, they're a good size, but blurry.

Android

iPad

iPhone

[ltseng]

This is leading to a secondary issue of me not being able to select the correct pin when two are moderately close together

Upload.from.GitHub.for.iOS.MOV

[shrouxm]

huh that's weird, paul confirmed that this was working for both clients on his dev build 🤔 i will take a look at this this week! it does seem to confirm that the underlying issue is a style parameter that doesn't get correctly applied to the android build

[shrouxm]

ok soooooo i have tried:

• to coax rnmapbox to accept SVGs in many different ways
• to upload the SVG to mapbox studio
• to convert the SVG to SDF
• to convert PNGs to SDF
• to just use PNGs

and nothing works perfectly. it seems that the reason nothing works perfectly is outlined in this little snippet buried in the mapbox docs:

Vector formats, like SVGs, can also be good candidates for generating an SDF. Although SVGs are a vector image format, the Mapbox GL renderer cannot treat them as vector data in the same way it handles vector tiles or GeoJSON. Converting them to SDFs, however, makes it possible to add a scalable, recolorable SVG to your map.

while they mention earlier that SDFs are a raster format and so look terrible when scaled. in fact even in the official mapbox docs for SDFs the demo map they display has jagged pixelated icons. the inability to render vector icons also explains why even if i upload an svg to mapbox studio, it will look blurry

so i think our only option is to programmatically pre-generate raster icons for each size and color we need at appropriate pixel densities for the running device. which will hopefully not be as difficult as it sounds because of RN's PixelRatio function and the existing vector icon getImageSource method

i will attempt to implement this at a time that is later 👍

i do feel like i'm missing something because this seems ridiculous, but at the same time the docs are clearly stating that they can't render vector symbols (even though the entire core innovation of Mapbox as a company is rendering maps from vector data)

[ltseng]

This is looking good on both Android and iOS now!