MapView - Overlay Marker Image too Large

[yonson]

Hi,
have searched through the tutorials on this but can't find anything that solves this.

I'm running a MapView, using the overlay marker images as shown in the excellent tutorial (OSMDroid - MapView for B4A tutorial), however my problem is that on my device (Samsung Note II), the overlay image marker is always rendered too large (e.g. not 48 pixels wide etc).

The relevant code is :-

Dim bm_user As BitmapDrawable
bm_user.Initialize(LoadBitmap(File.DirAssets, "mapuser.png"))
Dim user_marker As Marker
user_marker.Initialize("My Location", "some location",lat,lon, bm_user)

Note that this is working fine, its just drawing the image too big.

I've tried a number of solutions including:-

- loading a scaled bitmap image into it
- resizing the bitmap after creation
- trying different sized images

Its always too large however, and the same size. can anyone tell me what to do to make it render properly and shrink it to its natural size?

Thanks

 

[KY Leng]

I have similar problem:

If I load the customized icon as below, the marker's size change from phone to phone (LG 3D Optimus is fine, but Galaxy Note II is big)

Dim Icon5 As BitmapDrawable
Dim Marker2 As Marker
Dim Markers As List
Icon5.Initialize(LoadBitmap(File.DirAssets, "Marker-Gray.png"))
Marker2.Initialize("Title","Infor",104.123456, 11.123456,Icon5)
Markers.Add (Marker2)

And if I load the icon by using below method, the size is fix but the resolution is not good.

Icon5.Initialize(LoadBitmapSample(File.DirAssets, "Marker-Gray.png",24,24))

What I mean by "resolution is not good" <=> picture is no longer clear/beautifull as the original.

Note that when I use default icon

Marker2.Initialize("Title","Infor",11.123456, 104.123456, null)

the Icon size seem to be fix from phone to phone and keep the same apparence.

I want my customized icon look the sae as default icon, but I don't know how to do.

An other question, do "default icon" has many color or icon for us to choose?

Anyone can solve the problem? Please help me.
Hope to receive some reply soon.
Thank you in advance

 

[warwound]

There's a solution to the icon scaling problem here:
http://www.b4x.com/android/forum/threads/osmdroid-mapview-for-b4a.16309/page-3#post-115572.

Within the OSMDroid library, methods are used to automatically prevent the built in icons/other drawables from being auto scaled.

There's only one built in Marker icon - no others to choose from.

Martin.

 

[adrianstanescu85]

I tried the new solution (using the AndroidResources library) and it works a lot better, but here is the problem:

The actual marker image is displayed on a larger surface, about 4 times larger than the initial image - unless - I set the bitmap gravity to Center (or whatever), which renders the image at its correct size, but at the same time centered over the same 4 times larger area corresponding to the marker!

It seems to me that if for instance I got a 40x40 px marker image it will be displayed by this method over a marker area of about 160x160 px or so, fully scaled to that area (so even so the image appears larger than it should), oooor if I set the gravity.center I'd get a correct 40x40px image centered on a transparent 160x160 marker area.

What seems to be the problem with this?

 

[adrianstanescu85]

I also noticed that on different scale/resolution devices, the AndroidResource approach gives different results, most probably because the actual pixel size of the marker image is kept. However, every marker image appears larger even so. Any idea why?

 

[warwound]

I find myself lost when trying to understand pixel density .
In theory your marker image in the resources folder 'drawable-nodpi' should be loaded without android performing any scaling on it.
Images in the other 'drawable' folders generally get scaled based on the device screen density.

So your marker image loaded from drawable-nodpi is let's say for example 128 pixels square.
It will look different in size on screens with different densities.

Are we talking about displaying the marker image as an OSMDroid Marker icon or are are you displaying the image elsewhere in an ImageView?
You mention setting the Gravity so i'm wondering if you're using the image as a Marker icon or not?

 

[adrianstanescu85]

I'll point two examples here with different results, and both will use AndroidResourses (look at the yellow-black triangle).

1)

IcoAccident = AndroidRes.GetApplicationDrawable("eveniment")
MkAccident.Initialize("Accident", "Event location", TouchGeoPoint.Latitude, TouchGeoPoint.Longitude, IcoAccident)

The end result looks like this on my Samsung Note 3:

2) Here is the Gravity added:

IcoAccident = AndroidRes.GetApplicationDrawable("eveniment")
    IcoAccident.Gravity = Gravity.CENTER
MkAccident.Initialize("Accident", "Event location", TouchGeoPoint.Latitude, TouchGeoPoint.Longitude, IcoAccident)

The end result looks like this on the same Samsung Note 3:

As you can see, the results are very different just by using the Gravity. The first marker is clearly scaled, I used vector graphics to generate it just to make sure I get no quality loss and that particular rendered image came at 40x35 px and is located in the Objects\res\drawable-nodpi folder. The Samsung Note 3 is 1920x1080 px screenwide and clearly the correct image is rendered in the Gravity example and not in the first one, where the marker appears scaled (and pixelated). The interesting thing about it comes when checking the Click event with that marker, because even if the first example has a larger than it should image, the whole of it responds to the Click event. The last one, i.e. the one when using Gravity, is surrounded by transparent space on the same surface as in the first example, because the whole of that area responds to the click event, but only the center portion of the area is covered by the rendered image. You may notice the little yellow triangle is located just in the middle of the large yellow triangle from the upper example, since it was placed on the same Lat/Long coordinates.

 

[Roger Daley]

Hi Yonson,

This may help, I am no expert but this is what I did to over come the problem.
1. Set the marker bit map the Alpha zero [IE Transparent]
2. Created an ImageView that sits on top of the marker
3. Sized the ImageView using Dip
This is the code where I used this method. Antenna Bearing Tool

Please remember this is a case of the blind leading the blind so this could be a bad idea but it appears to work with some limitations. The markers seem to lack touch sensitivity but I am still looking at that.


On the issue of pixel density I too have been confused when it comes to Dips.
My current understanding is that by using Dips you effectively convert pixel count to a linear measurement.
Example: The default layout in the IDE is 320 by 480 pixels with a density of 160 pixel per inch. Layout therefore 2 inches by 3 inches. If a square label in this lay out is 40 pixels by 40 pixels it will be physically 0.25 of an inch square.
If the App is run on a device with a different pixel density the square will be a different physical size if the square is defined in pixels.
If the square is defined in Dips [40Dip * 40Dip] the square will be 0.25 inches square irrespective of the devices pixel density.

That is how I understand it until someone shoots me down.

Regards Roger

 

[adrianstanescu85]

This refers to GoogleMaps, right? We are consindering the problem too, with the examples above, for MapView

 

[eurojam]

Hi,
IMO it is like Martin pointed out, there is no reason to use the Gravity. I have made some Apps with OSMdroid and it always works well using this code:

        Dim Marker1 as Marker
        Dim Icon As BitmapDrawable
        Icon = AndroidResources1.GetApplicationDrawable("icon1")
        Marker1.Initialize4(myID, MyPOIName, myPoiTeaser,lat,lon,Icon)

The icon is 32x32 pix and is located in the resources folder 'drawable-nodpi'. The result is always the same on different devices.

on my nexus 5:

 

[adrianstanescu85]

Does the Nexus 5 have a screen resolution of 1080 x 1920? It would be the same as my Note 3.

So if that's the resolution of your Nexus 5 and your whole screen height is 1920px, you'd need exactly 60 icons of 32x32px put one on top of the other to fill those 1920px. From the image you've shown, you only get about 23. In other words, it may look well to the eye but it's not accurate, those icons are also upscaled, and on larger resolution devices the scaling will be visible.

Does it make sense what I'm trying to show here, with your image above too?

 

[eurojam]

yes it has a physical resolution of 1080x1920. But my understandig of the drawable-nodpi is, that android will not upscale the bitmap. Is it correct take the pixel of the icon in relation to the pixel resolution or do we shall take account of the pixeldensity which is ~445 ppi pixel density for my nexus 5. the following screenshot is from asus phonetab which has a resolution 800 x 1280 pixels (~216 ppi pixel density). The icons are more or less the same size, whereas the route (red line) is upscaled due to the less resolution of the device:

 

[gravel]

As a forum search throws this up and the discussion didn't reach a conclusion.

I think the reason is here https://www.b4x.com/android/forum/threads/osmdroid-mapview-for-b4a.16309/page-20#post-433151

Version 4.1 of OSMDroid doesn't seem to show the problem.