1 (edited by office 2018-12-14 08:37:16)

Topic: Retina Images (with Mapbox)

EDIT: See solution further below!

Hi!

I am using Online Maps 3.0.0.30 in combination with Mapbox.
We have played around with the official mapbox SDK for Unity aswell.

I must say, features and handling of your plugin are really great!

What I am currently struggling with though is, that the map itself doesn't look as crisp as with the Mapbox plugin. I think it's because in mapbox, you can enable "use retina" and it then uses high resolution images.

Is there a way to get that into your plugin?

I tried a custom provider with the url
https://api.mapbox.com/styles/v1/[USERID]/[MAPID]/draft/tiles/512/{zoom}/{x}/{y}?access_token=[TOKEN]
But that didn't help.

I'd be grateful for any guidance!

Thanks!
Christian

PS: It doesnt have to be Mapbox, we'd use any service for crisp maps wink

2 (edited by office 2018-12-13 13:49:41)

Re: Retina Images (with Mapbox)

Update! I found this: https://www.mapbox.com/api-documentation/#rate-limits
Investigating ... it's not 256 or 512, it's a different flag it seems (@2x).
Also, I never deleted the cache ...

3 (edited by office 2018-12-13 14:04:07)

Re: Retina Images (with Mapbox)

I am certain, the correct url is

https://api.mapbox.com/styles/v1/{userid}/{mapid}/tiles/256/{z}/{x}/{y}@2x?events=true&access_token={accesstoken}

(OnlineMapsProvider.cs)
Tested it with my IDs in the browser (with and without @2x).

But I am not yet sure, what I must else do to make it visible ingame (the textures themselves mustn't be 256 but 512).

Re: Retina Images (with Mapbox)

Hi again,

I made changes:

OnlineMapsEditor:
    private int textureHeight = 512;
    private int textureWidth = 512;

    
OnlineMapsCache:
    private void LoadTile(OnlineMapsTile tile, byte[] bytes)
    {
        Texture2D texture = new Texture2D(512, 512, TextureFormat.ARGB32, map.control.mipmapForTiles);

OnlineMapsUtils
    public const short tileSize = 512;
    
    
OnlineMapsProvider:
    urlWithLabels = "[url]https://api.mapbox.com/styles/v1/{userid}/{mapid}/tiles/256/{z}/{x}/{y}@2x?events=true&access_token={accesstoken}[/url]",
    
    
CustomDownloadTileExample
    Texture2D tileTexture = new Texture2D(512, 512);
    
    
OnlineMapsRasterTile
    Texture2D tileTexture = new Texture2D(512, 512, TextureFormat.RGB24, map.control.mipmapForTiles)

   
   
And it seems to work.
Not sure about yet what I broke.

My question is: Is there any chance, you are gonna implement something like a "isRetina" setting?

That would be awesome!

Thanks
Christian

Re: Retina Images (with Mapbox)

Hello.

Online Maps is built around 256x256 raster tiles.
Mapbox support was added a MUCH later.
I have not tested 512 tiles, so I don’t know if something’s broken or not.

When using 512 tiles, did the map look different or not?
When using “@2x”, downloading tiles is counted as a map view or as monthly active users?

In fact, you only need to change OnlineMapsUtils.tileSize.
All other places do not matter.

In order not to modify existing providers, you can register a new one:
http://infinity-code.com/atlas/online-m … ample.html

Yes, I will try to add this feature.
I hope it will be useful to someone.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: Retina Images (with Mapbox)

Hi!

Thanks for the reply!

I will take a look at the custom map provider.

The map actually should look the same like 256. I will do a comparison project and provide screenshots (and code for you).

If you change 256 to 512 via mapbox api, the map texture looks different (more content visible).

If you change 256 to 256@2x, it just gets rendered with more details, meaning e.g. the fonts are more crisp on newer devices.

So in that case, I think you also have to change the texture resolutions like I did?

I will do some more testing and get back to you.

I also can imagine, that e.g. Google Maps offers something like this and possibly others aswell?


Thanks for now!

7 (edited by office 2018-12-14 07:44:37)

Re: Retina Images (with Mapbox)

Just so you see what I am talking about, this is a screenshot of the difference in the editor.
It gets worse, when you zoom around on a mobile device.

Side note: You must not forget to clear the cache after each session wink

https://modalog.at/projects/onlinemaps/online-maps-2x.png

In order for both Maps to have the same "viewport rect" you must change:
In the Online Maps component @Inspector I set width and height (pixels) to 1024.
In @2x Online Maps Tileset Control Script "Size in Scene" is 512.
In @1x Online Maps Tileset Control Script "Size in Scene" is 1024.

I will contine researching ...

Re: Retina Images (with Mapbox)

I think I don't understand.

If I just change

urlWithLabels = "https://api.mapbox.com/styles/v1/{userid}/{mapid}/tiles/256/{z}/{x}/{y}@2x?events=true&access_token={accesstoken}",

(see the @2x), it's enough and it works!

Why mustn't I change the texture dimensions in e.g. OnlineMapsCache.LoadTile?
I haven't debugged into it, but is this not called?

I assumed the cache textures have to be stored and imported as 512, not 256.
Or does it remain the downloaded size?


Next test: Custom provider like you suggested.

9 (edited by office 2018-12-14 08:38:19)

Re: Retina Images (with Mapbox)

CreateCustomStylesExample.cs:

If you switch between these two:

private string style1 = "https://a.tiles.mapbox.com/v4/mapbox.streets/{zoom}/{x}/{y}.png?access_token=";
private string style2 = "https://a.tiles.mapbox.com/v4/mapbox.streets/{zoom}/{x}/{y}@2x.png?access_token=";

Via the button, you can toggle between non retina and retina.

For us and for now, I think our case is solved!

Thanks for pointing me in the right direction smile


PS: Maybe you could still elaborate, why I didn't have to change anything else.

Re: Retina Images (with Mapbox)

Thanks for the screenshots. I see what you are talking about.

Actually, I tested it a bit and you do not need to modify anything at all.
Tileset works well with 512 tiles out of the box.
You only need to register a new provider.

Why it works:
Tileset draws tiles based on UV for which the actual size of the texture is does not matter.

Places like Texture2D texture = new Texture2D work correctly because the size of the texture does not matter when you load it from a file later. You can create a texture with 1 pixel, and then load a 4096x4096 image. And it will work.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: Retina Images (with Mapbox)

Alex Vertax wrote:

Places like Texture2D texture = new Texture2D work correctly because the size of the texture does not matter when you load it from a file later. You can create a texture with 1 pixel, and then load a 4096x4096 image. And it will work.

Thats good to know, thanks wink