Need Style for Marker image

[MichelDiz]

The <image> from RN have bugs while updating the markes. We need something more "native" from the Map module.

P.S. Things like control the Size.

Best Regards

[ericapply]

Currently you can put Image component as children of Marker to add custom style.
However, you may run into this bug #100

[DiMaNacho]

+1

[alvelig]

Why do you need to change marker image size?
Could you be more specific on what exactly do you want to style? You know, that it's worth to fix Image bugs than to reimplement React for native marker image component, with all the limitations the standard marker layout has.

[alvelig]

@christopherdro I think we can close it as it's old and out of scope of the library, nor in the roadmap or refers to bugs in other libs.

[MichelDiz]

If you say to me that has another kind of solution better or replaceable I close it myself. Because I think this is necessary. The costumization option.

[MichelDiz]

Why do you need to change marker image size?

I had tested at the time a map that I did in RN with this lib. And it featured distinct sizes in different simulators. And different smartphones. Some he burst and the others size he looked normal. So if you have anything that can keep the ratio of the marker would be great. Proportion is important.

[alvelig]

@MichelDiz

1. Yes, there is a solution and it's obvious and documented: just use ReactNative view within the Marker. If you have problems with RNImage elements these are this element's issues. You may find workarounds like prefetch image in this repo.
2. As far as I understand your problem, different sizes are due to the pixel depth of each phone. You have to use different dpi images (@2x, @3x on iOS, and mdpi, hdpi, xhdpi... in Android), as on different phones the same image will look different: https://facebook.github.io/react-native/docs/images.html

So, you can't set image width in native marker. The image is used as is and that is documented native behavior.

[SKempin]

@alvelig as we cannot set the image width or height in the native marker, do I need to simply recreate the image at the different pixel densities for the @2x and @3x images? For example, save the image at 480 DPI for @3x, and at 320 DPI for the @2x versions?

I am trying to clarify this as I have tested the @3x image structure (as referenced here) which does select the @3x image correctly on my LG Nexus 5, but displays it at full size (300 x 300) rather than the intended 100 x 100 as there are obviosuly no size dimensions set on the native marker.

Recreating the image at the correct DPI for the @2x and @3x appears to work. Please see the screenshot below.

[alvelig]

@SKempin Check naming and pixels. It should work. You can try to check it in android emulators to see if this is device specific (it happens).

Naming should be according to this specs (see @4x for android): https://developer.android.com/images/screens_support/devices-density_2x.png

[SKempin]

@alvelig This doesn't work without a style attribute, which obviously cannot be applied to the native marker.

Creating images at the relevant DPI's does work (as illustrated above) it seems, but simply creating the same image three times larger results in it displaying three times larger (as in the blue square on the example).

[alvelig]

If you have a square image files like this:

image.png (100x100) 
image@2x.png (200x200) 
image@3x.png (300x300) 
image@4x.png (400x400) 

it MUST give you 100x100 picture on hdpi, xdpi, xxdpi and xxxdpi devices accordingly.

If it doesn't, please make a test project to reproduce your problem and mention models and resolutions you've tried.

[SKempin]

@alvelig This does not happen. I am using an LG Nexus 5 (real device). Unfortunately I don't have time to create a test project currently, but I experience the same issues with standard Image component in RN. If the width and height dimensions are not specified then the image displays at full size - so image@4x.png (400x400) would display at 400 x 400, instead of the intended 100 x 100. The only way to ensure it would display correctly at 100 x 100 is to set the width and height to this on the image's style attribute (again this is obviously not possible on the native map marker, hence the issue).

[alvelig]

So, first that's a react-native issue, not react-native-maps one.

Second, I recently used the same technique for my project to have a complex marker with an image and it works perfectly. I bet that if you take time and make a simple project with one marker (it should take 15 minutes or so), I'll find a problem in your code. :)

And third, also test it on the emulator with corresponding resolution to see that it works (or doesn't and there .

[SKempin]

@alvelig I will attempt to make a project tomorrow and share with you, thanks.

Was the image a child of the marker or the prop of the marker in your project? Thanks

[alvelig]

prop:

import markerImg from '../../images/marker.png';
import androidMarkerImg from '../../images/marker-android.png';

/***
Size | name
5275 marker-android.png
17851 marker-android@2x.png
21757 marker-android@3x.png
30902 marker-android@4x.png
5885 marker.png
12293 marker@2x.png
21757 marker@3x.png
***/

<Marker
      identifier={`${shop.id}`}
      coordinate={{
        latitude: shop.location.lat,
        longitude: shop.location.lng
      }}
      image={Platform.OS === 'ios' ? markerImg : androidMarkerImg}
      onPress={goToShop(dispatch, shop.id)}
    >
<View style={{ height: 100, width: 100, alignItems: 'center', justifyContent: 'center'  }}>
  <Text>{shop.name}</Text>
</View>
</Marker>

I had to make 7 images (3 ios and 4 android) to fit this marker, because of differences in ios and android. But that was because of the complexity of the marker that's why I had to use image, otherwise I would have done it with views.

[SKempin]

@alvelig I've now created the demo repo and I'm still getting the same results on my LG Nexus 5.

As you can see in the screenshot, the @3x image is correctly being chosen but it is displaying at 300 x 300, since the native marker cannot have a style attribute applied to make it display at 100 x 100. I have also manually inserted the 100 x 100 sized marker for comparison.

I haven't been able to test on any emulators as of yet.

Thanks and I look forward to seeing what results you get.

[alvelig]

@SKempin it doesn't let me open it :) Please, can you check permissions for the project?

[SKempin]

@alvelig Please try again now - https://github.com/SKempin/markers-demo

Thanks

[alvelig]

Add this marker:

<MapView.Marker
              key={3}
              title={"@3x image"}
              coordinate={{ latitude: 51.509, longitude: -0.15 }}
            >
            <View style={{ 
              borderWidth: 5, 
              borderColor: 'green', 
              backgroundColor: 'white',
              height: 100, 
              width: 100 }}>
              <Text>I'm a 100x100 box</Text>
            </View>
          </MapView.Marker>

See:

Analyse :)
See that your 100x100 image is 4 times smaller and the 400x400 on xxxhdpi is 100x100 (nearly). That is the effect I'm talking about. If you have a single image without @2x, @3x and @4x it will be 4 times smaller in xxxhdpi.

P.S. I'm not happy that the images are not exact as the box. But that's how they appear somehow on Android.

[SKempin]

@alvelig Thanks very much. I understand now - basically I shouldn't have been judging the dimensions from the original 100 x 100 image, as your <View> and <Text> elements prove the actual size of a 100 x 100 element. That was where the confusion was arising.

So to clarify, what size would you advise a marker image to be generally? The original image size, not the @3x or @4x size (I will scale the image up for these)?

[alvelig]

@SKempin Glad to help.
The original size should be pixel equal to @1x (hdpi)
@2x should be twice big each side - to fit 2x density (xhdpi)
@3x should be triple big each side compared to @1x - to fit 3x density (xxhdpi)
@4x - 4 times larger then...

[pytyl]

@alvelig thanks for your helpful responses. Isn't @1x for mdpi, @1.5x for hdpi, and so on? Or is PixelRatio something different? Here is reference to PixelRatio:
https://facebook.github.io/react-native/docs/pixelratio

The whole numbers (@1x, @2x, @3x, @4x) are straightforward. How would we represent the decimal densities like an image for @1.5x, @3.5x? I am guessing we can't just store an image like test@1.5x.png.

If we can't store the decimal images like 1.5 and 3.5, would this mean those phones would find the nearest image (like 2 or 3)?