Animate route with geojson in Android SDK

Deprecated Maps SDK for Android (deprecated)
#1

Hi all,

I would like to animate a line in the Android SDK like this example for Mapbox for web:

I see in the documentation that with “dynamic map sources” I can add a geojson to the map. My idea is then to update the geojson every 0.2 sec or so to animate a walked route in an app.

However, I already get stuck by adding a geojson to the map. I added the following code and I don’t see anything. Anybody knows how to do this? Thanks!

String geoJsonData = “{\n” +
" “type”: “FeatureCollection”,\n" +
" “features”: [\n" +
" {\n" +
" “id”: “GeoJSON Polygon”,\n" +
" “type”: “Feature”,\n" +
" “properties”: {" +
" “line-color”: “rgba(26, 203, 207, 1)”,\n" +
" “line-width”: 6},\n" +
" “geometry”: {\n" +
" “type”: “Polygon”,\n" +
" “coordinates”: [\n" +
" [\n" +
" [48.893478, 2.334595],\n" +
" [48.893479, 2.334597],\n" +
" [48.893482, 2.334599],\n" +
" [48.893485, 2.334600],\n" +
" [48.893489, 2.334605],\n" +
" [48.893491, 2.334608],\n" +
" [48.893495, 2.334610],\n" +
" [48.893499, 2.334612],\n" +
" [48.893500, 2.334616],\n" +
" [48.893504, 2.334619],\n" +
" [48.893508, 2.334620],\n" +
" [48.893509, 2.334622],\n" +
" [48.893512, 2.334623],\n" +
" [48.893516, 2.334626],\n" +
" [48.893518, 2.334628],\n" +
" [48.893520, 2.334630],\n" +
" [48.893522, 2.334632],\n" +
" [48.893528, 2.334633],\n" +
" [48.893529, 2.334635],\n" +
" [48.893530, 2.334637],\n" +
" [48.893534, 2.334639]\n" +
" ]\n" +
" ]\n" +
" }\n" +
" }\n" +
" ]\n" +
“}”;

//tag::add_geo_json_source[]
//GEOJSON_SOURCE_ID = unique_source_id
//GeoJsonData = JSON representing source data
GeoJsonSource source = SourceFactory.createGeoJsonSource(GEOJSON_SOURCE_ID);
source.setGeoJson(geoJsonData);
map.getStyleSettings().addSource(source);

#2

Hello Sander,

Indeed there is a possibility to add GeoJSON onto the map but you also need to add an layer which will use that source.

So your GeoJSON source should look like this instead:
{
“type”: “FeatureCollection”,
“features”: [
{
“id”: “GeoJSON Polygon”,
“type”: “Feature”,
“properties”: {},
“geometry”: {
“type”: “Polygon”,
“coordinates”: [
[
[48.893478, 2.334595],
[48.893479, 2.334597],
[48.893482, 2.334599],
[48.893485, 2.334600],
[48.893489, 2.334605],
[48.893491, 2.334608],
[48.893495, 2.334610],
[48.893499, 2.334612],
[48.893500, 2.334616],
[48.893504, 2.334619],
[48.893508, 2.334620],
[48.893509, 2.334622],
[48.893512, 2.334623],
[48.893516, 2.334626],
[48.893518, 2.334628],
[48.893520, 2.334630],
[48.893522, 2.334632],
[48.893528, 2.334633],
[48.893529, 2.334635],
[48.893530, 2.334637],
[48.893534, 2.334639]
]
]
}
}
]
}

Then you add it like you did:
GeoJsonSource source = SourceFactory.createGeoJsonSource(GEOJSON_SOURCE_ID);
source.setGeoJson(geoJsonData);
map.getStyleSettings().addSource(source);

And now you need to prepare a JSON of an layer and provide the ID of the GeoJSON source to it:
{
“id”: “layer-line-id”,
“type”: “line”,
“layout”: {
“visibility”: “visible”
},
“paint”: {
“line-color”: “rgba(26, 203, 207, 1)”,
“line-width”: 6
},
“source”: “geojson-source-id”
}

Finally add a layer to the map by calling:
Layer layer = LayerFactory.createLayer(layerJson);
tomtomMap.getStyleSettings().addLayer(layer);

After that line will be visible. Then to update the GeoJSON you need to obtain source reference and set new GeoJSON data:
Optional sourceOptional = tomtomMap.getStyleSettings().findSourceById(GEOJSON_SOURCE_ID);

   FuncUtils.apply(sourceOptional, source -> {
       GeoJsonSource geoJsonSource = (GeoJsonSource) source;
       geoJsonSource.setGeoJson(geoJsonData);
   });

Best regards,
Damian

2 Likes
#3

Thanks for you reply. I will try to implement it and let you know if it works!

1 Like
#4

Below gist contains a small piece of code, that animates a route taken from a routing API in Android.

Maybe it’ll be helpful for someone.

3 Likes
#5

Thanks a lot! Got it working in my own project now as well!