[Android] Offline Map Icons

[atomheartother]

Hello all,

I'm attempting to have custom icons for a SymbolLayer displayed on a map that's been downloaded for offline use. Here are the results I'm getting when I try to display the offline map, that is when I've downloaded the map in the background without displaying the map online, cut the internet then get on the map screen:

• If the icon is in the custom style, it simply doesn't show up. If I get online, the icon displays normally and responds to presses as normal.
• If the icon is in the app's sources and included via a require() in the shapesource (via images={{example: exampleIcon}}) it also doesn't show up. If I get online, the icon shows up, shrunk (possibly due to iconSize being applied twice??) and responds to presses. -If the icon is in the android drawable folder, then the icon shows up, but it's too large and doesn't respond to presses. If I zoom in, they stop displaying, and zooming out doesn't bring them back. Going online fixes the issue and the icon shows up normally.

So... 3 different behaviors depending on how I include this icon, and none of them actually work offline. Has anyone here managed to have custom icons work on an offline map?

I'm on the master branch.

[kristfal]

Hey,

We’ve successfully run custom styles with offline. There are some things we’ve learned:

Make sure the style you use for offline pack contains all the sprites and fonts that you expect to use while offline. For instance, we heavily rely on runtime styling and add new icons/fonts on the fly. As a result, the custom style.json we use contain “dummy” layers that references all the fonts and sprites we use at runtime.

I highly recommend that you build your own sprite sheet with the icons you need and build your own style.json for offline use. That will give you full control of what is available while offline.

So to follow up, do you use any fonts with your custom layer(s)? If so, does these fonts render while you are offline?

[atomheartother]

Thanks for the reply. Yes, we use custom fonts in our SymbolLayer, the fonts render just fine, it's simply the icons that don't.

You mention a style.json, I assume you mean you guys are using a custom JSON style file as opposed to a style URL? I've never tried that, I'll do it and see if it makes a difference.

I'll definitely try the dummy layer idea, it might force the offline packager to download these assets

[atomheartother]

After experimenting a bit more, it looks like no icons ever load with a style url, it's not just my custom icons but even the ones for bus stops, etc, built into the style. So I guess moving to a style.json might be the only choice...

[kristfal]

To me it sounds like something is wrong here.

Are you able to just use a plain basemap (without custom layers) offline?

Also, do make sure that you use the exact same style for the offline pack and for the MapView.

[atomheartother]

I use a single mapbox URL for everything yes, I just double-checked.

After you asked about basemaps, I tried this:

• I tried to switch to Mapbox.StyleURL.Dark for offline use, booted it and it displays fine but indeed, the train icons and the likes didn't display once I zoomed in.
• I figured it must be because of zoom levels I asked for in the offline pack - and that's exactly what it was, as style icons displayed fine after I tried increasing maxZoom. So I switched back to my custom style and tried again with the new zoom values.
• With my custom style, at the proper zoom level, the style icons did display (yay) including a layer that has custom icons, but my runtime SymbolLayer icons sre still nowhere to be found. So we're back to square one.

I also just tried to use a style.json offline but it never starts downloading, with styleUrl=asset://style.json the style displays online properly but it seems to never actually start downloading with the offlinemanager, I'll report back when I have more.

[kristfal]

This is the issue:

but my runtime SymbolLayer icons sre still nowhere to be found.

You need to ensure that the icons you add at runtime are statically declared in the style you download. I've never tried to load a style.json from assets:// but doing this from a remote server works just fine.

[atomheartother]

Sorry for the delay, I'm coming back to this issue after i had to divert to my attention to more pressing features.

@kristfal that's what I've been doing all along, However after making a small testing app I can confirm this module does behave as expected, i'll be looking into it but it's likely the error comes from my app.

[atomheartother]

I am reopening this as I have found what was causing it and I do believe it's related to the library. When testing this issue, you need to have a textField property set on the style you're using for the symbolLayer. Then the bug will manifest as I've described.

I've made a demo app to test and show off this bug: https://github.com/atomheartother/mapboxBugTest

• Launch the app, wait for the offline pack to download (buttons lighting up)
• Take your phone offline (plane mode)
• Click on the Map button
• Nothing displays, no icon and no text
• Go online, the icon and text display

And now to prove the textField is responsible:

• Go in Map.js and comment line 18 (the textField)
• Refresh the app and clean all app data (you can also just uninstall and reinstall it to clear all data)
• Redo the steps above
• The icon will now display immediately even when offline.

This test app, I believe, uniquely identifies the sources of this bug, since it's as minimal as possible, so here are the factors that I think cause this:

• Offline mode where the map was never loaded (Having internet on the map screen for one second fixes the bug)
• A text field on the symbolLayer (removing the textField property fixes the bug)

[armnugraha]

hai i have same problem about this, i have symbol layer not show in offline mode. any solution ?

[Kayre-Scott-Primon]

Im having the same problem too, any suggestion for solve this?