PictureMarkerSymbol blurry/pixelated

3827
7
01-12-2016 03:14 PM
JeffJohnson2
New Contributor II

I've been working on a map that places PictureMarkerSymbols with custom drawables, and I've noticed that the PictureMarkerSymbols are blurry when displayed on the map.

I've tried the following:

  1. drawables in drawable-mdpi, drawable-hdpi, drawable-xhdpi, etc. and the PictureMarkerSymbol(Context, Drawable) constructor. Images are not sharp at all (though appropriately sized)
  2. drawables in drawable-mdpi, drawable-hdpi, drawable-xhdpi, etc. and the PictureMarkerSymbol(Drawable) constructor. Images are somewhat sharp and way too big
  3. drawables in drawable-nodpi and PictureMarkerSymbol(Drawable) constructor. I just used the smallest Drawable I had, which was the mdpi one. Drawables were appropriately sized but still blurry
  4. drawable in the drawable (no qualifiers) folder and the PictureMarkerSymbol(Drawable) constructor. Huge and blurry

The my location (blue dot) icon is very crisp. How do you achieve this.

Note: after more testing, I've noticed the blurriness is more pronounced with a LayerDrawable. Could this be the source of my issue?

0 Kudos
7 Replies
AlexanderNohe1
Occasional Contributor III

Do you have the picture that you are trying to use available for us to test with?

JeffJohnson2
New Contributor II

After more testing, I'm 99% certain it's the fact that I was using a LayerDrawable. For some reason, PictureMarkerSymbol doesn't scale these correctly. For testing, it should produce this effect for any LayerDrawable (or xml drawable <layer-list>)

0 Kudos
AlexanderNohe1
Occasional Contributor III

Hey Jeff,

After testing this offline for a little bit, I believe that this might be a suitable workaround for you.  I believe that if you store the image as an asset and then create it as a drawable at Runtime, you will get better results with the display of the image.

new PictureMarkerSymbol(Drawable.createFromStream(getAssets().open("Shell-Red-Icon.png"), null))

I look forward to seeing how this works for you.

AlexanderNohe1
Occasional Contributor III

Upon even further testing, I think I have some evidence that helps show the difference between loading the image in as a drawable image asset and just as an asset.  Using the code snippet above, the difference is noticable for the red shell icon.  What do you think?

Loading as a drawable, the shell looks blurry:

device-2016-01-13-105507.png

Loading as an asset, the shell looks clear:

asAsset.png

JeffJohnson2
New Contributor II

That did not do the trick for me unfortunately. Both loading from drawables and loading from assets have the same amount of blurriness, at least to the naked eye. I may be wrong, and feel free to correct me if I am, but I think I may know why you saw improvements in your example. If you use drawables and the PictureMarker(Drawable) constructor (not PictureMarkerSymbol(Context, Drawable)), it will not resize the drawable. For some reason, using Drawable.createFromStream() does resize it. It looks like to me that loading from assets, and using the PictureMarkerSymbol(Context, Drawable) constructor accomplishes the same thing

For anyone who comes across this later, my biggest issue was using `LayerDrawable`. To solve this problem, I just put multiple graphics on the screen to imitate one drawable with many layers

JeffJohnson2
New Contributor II

That looks promising, I'll try it out and report back. Thanks!

0 Kudos
MarceloGalante
New Contributor

I have the same problem, but in a Web Application. Can any one help me with this issue. I am developing a Web Application with ArcGIs API Javascript that was working with Google API. You can notice the diference between the Original Image and the same image that was opened over the map using PictureMarkerSymbol

Original Image

Visualizador_Image.png

Web Application using Google API

FRST_Google.png

NEW Web Application using ArcGis API Javascript

FRST_ESRI.png

0 Kudos