androidmapboxmapbox-gl-jsmapbox-android

Custom tiles server is not showing in MapBox android


this is my first time using MapBox for anything. I am trying to replicate this in Android app. I have followed MapBox documentation for showing Vector tiles server from third party. Currently I have my own tile server and styling json file added in the project assets folder but it does not seem to be working for me as in no tiles shows up in mapbox.

Here is my activity:

class MapBoxActivity : AppCompatActivity() {
    private lateinit var mapboxMap: MapboxMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val mapView = MapView(this)
        setContentView(mapView)
        mapboxMap = mapView.mapboxMap

        mapboxMap.setCamera(
            CameraOptions.Builder()
                .zoom(12.0)
                .center(Point.fromLngLat(-87.622088, 41.878781))
                .build()
        )

        val styleJson = loadStyleFromAssets("mapbox_style.json")
        if (styleJson != null) {
            mapboxMap.loadStyleJson(styleJson) { style ->
                updateTileSource(style)
            }
        }
    }

    private fun updateTileSource(style: Style) {
        
        val url = "http://ts.carsprogram.org/public.rwrc_view/{z}/{x}/{y}.pbf"

        // Remove existing source if it exists
        if (style.styleSourceExists(SOURCE_ID)) {
            style.removeStyleSource(SOURCE_ID)
        }

        // Add new source with updated URL
        style.addSource(
            vectorSource(SOURCE_ID) {
                tiles(listOf(url))
                minzoom(6)
                maxzoom(14)
            }
        )

        // Add or update the layer
        if (!style.styleLayerExists(LAYER_ID)) {
            style.addLayerBelow(
                lineLayer(LAYER_ID, SOURCE_ID) {
                    sourceLayer(SOURCE_LAYER_ID)
                    lineCap(LineCap.ROUND)
                    lineJoin(LineJoin.ROUND)
                    lineOpacity(0.6)
                    lineColor(Expression.rgb(53.0, 175.0, 109.0))
                    lineWidth(2.0)
                },
                BELOW_LAYER_ID
            )
        }
    }

    private fun loadStyleFromAssets(fileName: String): String? {
        return try {
            val inputStream = assets.open(fileName)
            val size = inputStream.available()
            val buffer = ByteArray(size)
            inputStream.read(buffer)
            inputStream.close()
            String(buffer, Charsets.UTF_8)
        } catch (e: Exception) {
            e.printStackTrace()
            null
        }
    }

    private companion object {
        const val SOURCE_ID = "mapillary"
        const val LAYER_ID = SOURCE_ID
        const val TAG = SOURCE_ID
        const val SOURCE_LAYER_ID = "sequence"
        const val BELOW_LAYER_ID = "road-label-simple"
    }
}

Here is my styling json file:

{
  "id": "public.rwrc_view",
  "schema": "public",
  "name": "rwrc_view",
  "properties": [
    {
      "name": "objectid",
      "type": "int8",
      "description": ""
    },
    {
      "name": "road_condition",
      "type": "float8",
      "description": ""
    },
    {
      "name": "color",
      "type": "text",
      "description": ""
    },
    {
      "name": "segment_id",
      "type": "text",
      "description": ""
    },
    {
      "name": "segment_name",
      "type": "text",
      "description": ""
    },
    {
      "name": "headline",
      "type": "text",
      "description": ""
    },
    {
      "name": "status",
      "type": "text",
      "description": ""
    },
    {
      "name": "route_name",
      "type": "text",
      "description": ""
    },
    {
      "name": "primarymp",
      "type": "text",
      "description": ""
    },
    {
      "name": "secondarymp",
      "type": "text",
      "description": ""
    },
    {
      "name": "primarylat",
      "type": "text",
      "description": ""
    },
    {
      "name": "primarylong",
      "type": "text",
      "description": ""
    },
    {
      "name": "secondarylat",
      "type": "text",
      "description": ""
    },
    {
      "name": "secondarylong",
      "type": "text",
      "description": ""
    },
    {
      "name": "description",
      "type": "text",
      "description": ""
    },
    {
      "name": "source",
      "type": "text",
      "description": ""
    },
    {
      "name": "source_link",
      "type": "text",
      "description": ""
    },
    {
      "name": "report_updated",
      "type": "float8",
      "description": ""
    },
    {
      "name": "report_created",
      "type": "float8",
      "description": ""
    },
    {
      "name": "report_id",
      "type": "text",
      "description": ""
    },
    {
      "name": "creationdate",
      "type": "int8",
      "description": ""
    },
    {
      "name": "creator",
      "type": "text",
      "description": ""
    },
    {
      "name": "editdate",
      "type": "int8",
      "description": ""
    },
    {
      "name": "editor",
      "type": "text",
      "description": ""
    },
    {
      "name": "route_rank",
      "type": "float8",
      "description": ""
    },
    {
      "name": "pk",
      "type": "int4",
      "description": ""
    }
  ],
  "geometrytype": "Geometry",
  "center": [
    -95.51685333251953,
    42.49988555908203
  ],
  "bounds": [
    -104.055908203125,
    35.99919891357422,
    -86.97779846191406,
    49.000572204589844
  ],
  "minzoom": 2,
  "maxzoom": 22,
  "tileurl": "http://ts.carsprogram.org/public.rwrc_view/{z}/{x}/{y}.pbf"
}

Need some guidance what I am doing wrong here. Thanks!


Solution

  • I found the issue. The original example from MapBox sdk used addLayerBelow method which was not needed in my case and also I was not using SOURCE_LAYER_ID from my server which is an important mistake I made.

    Here is my updated code which works for my custom tile server:

    class MapBoxActivity : AppCompatActivity() {
    private lateinit var mapboxMap: MapboxMap
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val mapView = MapView(this)
        setContentView(mapView)
        mapboxMap = mapView.mapboxMap
    
        mapboxMap.setCamera(
            CameraOptions.Builder()
                .zoom(12.0)
                .center(Point.fromLngLat(-87.622088, 41.878781))
                .build()
        )
    
        mapboxMap.loadStyle(Style.LIGHT) {
            it.addSource(
                vectorSource(SOURCE_ID) {
                    tiles(listOf("http://ts.carsprogram.org/public.rwrc_view/{z}/{x}/{y}.pbf"))
                    minzoom(2)
                    maxzoom(22)
                }
            )
            it.addLayer(
                lineLayer(LAYER_ID, SOURCE_ID) {
                    sourceLayer(SOURCE_LAYER_ID)
                    lineCap(LineCap.ROUND)
                    lineJoin(LineJoin.ROUND)
                    lineOpacity(0.6)
                    lineColor(Expression.rgb(53.0, 175.0, 109.0))
                    lineWidth(2.0)
                }
            )
        }
    }
    
    private companion object {
        const val SOURCE_ID = "mapillary"
        const val LAYER_ID = SOURCE_ID
        const val TAG = SOURCE_ID
        const val SOURCE_LAYER_ID = "public.rwrc_view" //this is server tile layer id
    }
    
    }