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!
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
}
}