[Android] - Satellite Map Style (or any style) Causes Crash with Layers

[tikimcfee]

Hey there folks, got one for ya that I can't seem to solve. I'm just trying to add some Fill/Line layers to a map that has the Satellite style set. Without that style, everything works perfectly - layers are showing their sources, filters work, etc. However, setting the style causes problems. Layers don't show, and even interacting with the layers in simple ways like getId() causes a native crash. This appears to happen on any device I've tested with (API 16 emulator, S3, Nexus 4, S4).

Platform: Android
Mapbox SDK version: 4.2.1 / 4.2.2 / 5.0.0-beta.1

Steps to trigger behavior

1. In onMapReady() callback, set MapboxMap style to Style.SATELLITE.
2. Add a geoJson source to the map with an id of "A"; make sure it contains at least one valid Polygon feature.
3. Add one (or more) Fill/Line layers to the map that target the geoJson source "A", with unique ids. Set some color properties to make sure you can see them.
4. (1) The feature is not visible on the map
5. In a callback of onMapClick(), call getId() on one of the layers you've added.
6. Crash.

Expected behavior

1. The added layers should be visible on top of the satellite imagery
2. Calling getId() should not crash

Actual behavior

1. The layers are not visible
2. Calling getId() crashes

I'm also adding a crash log gist to this - I hope it's helpful. Otherwise, I'm at your disposal for more info. Thanks much for your time!

https://gist.github.com/tikimcfee/d0670e413a58723cbbd9f014c0c047c7

[tikimcfee]

More info for ya - it looks like setting any style breaks layers. For clarification, I'm setting styles with:
mapboxMap.setStyleUrl(Style.SATELLITE);

I've iterated through all of the Style constants, and each seems to have a slightly different problem. Sometimes, it works great on the Emulator but fails on a physical device (S3). Other times, it crashes on the emulator (never works on device).

I've also tried this method:

RasterSource rasterSource = new RasterSource("SP_MAP_RASTER_SOURCE", "mapbox://mapbox.satellite");
RasterLayer rasterLayer = new RasterLayer("SP_MAP_LAYER", rasterSource.getId());
mapboxMap.addSource(rasterSource);
mapboxMap.addLayer(rasterLayer);

But the behavior is almost exactly the same. I can try to get a screen recording if you need a visual example of this as well, but it looks like repro is pretty easy.

[tobrun]

@tikimcfee would you be able to do a quick test and set the style through xml or MapView#setStyleUrl and see if this changes the issue shown in OP?

[tikimcfee]

@tobrun Hey there! Absolutely - just stepped in, so I'll give the programmatic setter and xml property a try right now.

[tikimcfee]

@tobrun
Results! Still looks a little wonky. Here's what it looks like for three test phones, Nexus 4, Galaxy S3, and API 16 emulator using MapView#setStyleUrl:

Notice the N4 and Emulator are lookin' pretty good. The S3 is totally borked though.

After trying as an XML property, the N4 and emulator ran just as well, but the S3 looked like this:

I tried to capture the first frame coming back as almost correctly rendered, but that pinching/zooming borks it up more.

EDIT:

Here's one more look into the S3, this time when using the RasterSource/Layer method. Of note, the url is mapbox://mapbox.satellite, and the map seems to occasionally load up great when it first appears, but again, the pinch/zoom breaks it:

[tikimcfee]

One more bit of info. It turns out that on 4.2.1 and 4.2.2, the RasterSource/Layer mentioned above for satellite imagery does work on the S3, as well as the other devices - N4, Emulator, etc. However, as soon as you bump to 5.0.0-beta.1, you get the problems shown above.

[tikimcfee]

Hey folks! I see that 5.0.0-beta.2 is on the horizon - nicely done! I'm wondering if this has been looked at some more, or perhaps reproduced / fixed in that new build?

[tobrun]

Haven't pinpointed the source of this issue yet, adding this to the 5.0.0 milestone to not forget to look into this before an actual release.

[tikimcfee]

@tobrun That's awesome - thank you so much for the tag! Also, side note, hope the S3 outage isn't killing you guys...

[tobrun]

@tikimcfee I was able to reproduce the issue shown in the OP. The underlying issue is that loading a style is asynchronous and you need to wait for that style to be loaded before manipulating the layer and sources.

Option 1

Move mapbox.setStyleUrl before the OnMapReady code block. The OnMapReady callback will be invoked when the style has finished loading.

    mapView = (MapView) findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.setStyleUrl(Style.SATELLITE);
    mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(@NonNull final MapboxMap map) {
        mapboxMap = map;

        try {
          mapboxMap.addSource(new GeoJsonSource("bus_stop",
            new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson")));
        } catch (MalformedURLException malformedUrlException) {
          Timber.e("That's not an url... ", malformedUrlException);
        }

        layer = new CircleLayer("stops_layer", "bus_stop");
        layer.setProperties(
          circleColor(Color.parseColor("#FF9800")),
          circleRadius(1.0f)
        );

        mapboxMap.addLayer(layer);
      }
 }

Option 2

Listen to an event that the style has finished loading by using the OnMapChangeListener:

    mapView = (MapView) findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(@NonNull final MapboxMap map) {
        mapboxMap = map;
        mapView.addOnMapChangedListener(new MapView.OnMapChangedListener() {
          @Override
          public void onMapChanged(@MapView.MapChange int change) {
            if (change == MapView.DID_FINISH_LOADING_STYLE) {
              try {
                mapboxMap.addSource(new GeoJsonSource("bus_stop",
                  new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson")));
              } catch (MalformedURLException malformedUrlException) {
                Timber.e("That's not an url... ", malformedUrlException);
              }

              layer = new CircleLayer("stops_layer", "bus_stop");
              layer.setProperties(
                circleColor(Color.parseColor("#FF9800")),
                circleRadius(1.0f)
              );

              mapboxMap.addLayer(layer);
            }
          }
        });

        mapboxMap.setStyleUrl(Style.SATELLITE);
      }
    });

Some follow up questions related to rendering on the s3.

• Is this an emulator? If yes, are you able to reproduce the issue on an actual device?
• What Android OS version does this s3 have?

[tobrun]

Feel free to open a separate issue for the rendering part, in #8262 I added style loading with a callback. Thank you for reaching out! Closing as handled.