Using map inside fragment, shows totally blank

[ivan-avalos]

Hello! I'm having trouble using MapFragment inside a Fragment. The map style is successfully fetched according to the logs, but the map is totally black, not even markers seem to show up. 😢

I'm using the latest version of both MapLibre and the annotation plugin.

@DelicateCoroutinesApi
class MapFragment: Fragment() {
    private var _binding: MapFragmentBinding? = null
    private val binding get() = _binding!!

    private val unitsViewModel: UnitsViewModel by viewModel()

    private var mapView: MapView? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        Mapbox.getInstance(activity!!.applicationContext)
        _binding = MapFragmentBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        initMap(view, savedInstanceState)
        setupObservers()
    }

    override fun onStart() {
        super.onStart()
        mapView?.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView?.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView?.onPause()
    }

    override fun onStop() {
        super.onStop()
        mapView?.onStop()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView?.onSaveInstanceState(outState)
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView?.onLowMemory()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView?.onDestroy()
    }

    private fun initMap(view: View, savedInstanceState: Bundle?) {
        val mapLocationIqKey = getString(R.string.locationiq_token)
        val styleUrl = "https://tiles.locationiq.com/v3/streets/tiles.json?key=${mapLocationIqKey}"

        mapView = view.findViewById(R.id.mapView)
        mapView?.onCreate(savedInstanceState)
        mapView?.onStart()
        mapView?.addOnDidFailLoadingMapListener {
            Toast.makeText(view.context, it, Toast.LENGTH_LONG).show()
        }
        mapView?.getMapAsync { map ->
            map.setStyle(styleUrl) {
                map.uiSettings.setAttributionMargins(15, 0, 0, 15)
                map.cameraPosition = CameraPosition.Builder()
                    .target(LatLng(23.191, -100.36))
                    .zoom(5.0)
                    .build()

                // Add default marker
                val markerDrawable = BitmapUtils.getDrawableFromRes(context!!, R.drawable.ic_launcher_foreground)
                val markerBitmap = BitmapUtils.getBitmapFromDrawable(markerDrawable)
                it.addImage("default", markerBitmap!!, true)

                // Create symbol manager
                val symbolManager = SymbolManager(mapView!!, map, it)
                symbolManager.iconAllowOverlap = true
                symbolManager.iconIgnorePlacement = true

                // Add a symbol to map
                val symbolOptions = SymbolOptions()
                    .withLatLng(LatLng(23.191, -100.36))
                    .withIconImage("default")
                    .withIconSize(1.3f)
                symbolManager.create(symbolOptions)
            }
        }
    }

    private fun setupObservers() {
        unitsViewModel.units.observe(this) { units ->
            Log.d("MapFragment", "Success $units")
        }
    }
}

Here's a screenshot:

[ivan-avalos]

There's a related issue in Mapbox: mapbox/mapbox-gl-native-android#122