Custom layers

Contents

Once a source is set and has data, a layer can reference it. Layers are used to visualize the data from a source. There are a variety of layer types including: Circle, Line, Fill and Symbol.

CircleLayer

A CircleLayer uses single coordinates from a source to display and render a circle at a location on a map. Circles can be styled with size options, coloring, opacity etc.

map.getStyle(new Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull @NotNull Style style) {
        CircleLayer myCircleLayer = new CircleLayer("circle-layer-id", "source-id-for-this-layer");
        myCircleLayer.setProperties(
                PropertyFactory.circleRadius(10f),
                PropertyFactory.circleColor(Color.RED)
        );
        style.addLayer(myCircleLayer);
    }
});

A more detailed example of the CircleLayer in action can be found in the Dots On A Map code example.

LineLayer

The LineLayer is used to visualize a series of coordinates as a line on the map. A line is drawn between each coordinate provided in the LineString geometry in the source.

map.getStyle(new Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull @NotNull Style style) {
        LineLayer myLineLayer = new LineLayer("line-layer-id", "source-id-for-this-layer");
        myLineLayer.setProperties(
                PropertyFactory.lineWidth(3f),
                PropertyFactory.lineColor(Color.RED)
        );

        style.addLayer(myLineLayer);
    }
});

FillLayer

A FillLayer makes use of the Polygon geometry from the linked source. A shape is drawn enclosed on the map and the shape is filled in.

map.getStyle(new Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull @NotNull Style style) {
        FillLayer myFillLayer = new FillLayer("fill-layer-id", "source-id-for-this-layer");
        myFillLayer.setProperties(
                PropertyFactory.fillOpacity(0.5f),
                PropertyFactory.fillColor(Color.RED)
        );

        style.addLayer(myFillLayer);
    }
});

SymbolLayer

The SymbolLayer is used for displaying text or icons on the map. The locations for rendering are pulled from the coordinates in the source’s data. The example below shows how you can use your own custom icon on the map:

map.getStyle(new Style.OnStyleLoaded() {
    @Override
    public void onStyleLoaded(@NonNull @NotNull Style style) {
        Bitmap customIcon = BitmapUtils.getBitmapFromDrawable(getDrawable(R.drawable.your_custom_icon));
        style.addImage("custom-icon-id", customIcon);

        SymbolLayer mySymbolLayer = new SymbolLayer("symbol-layer-id", "source-id-for-this-layer");
        mySymbolLayer.setProperties(
                PropertyFactory.iconImage("custom-icon-id")
        );

        style.addLayer(mySymbolLayer);
    }
});

Other layers

A variety of other layers are also available for use, such as the HeatmapLayer and the FillExtrusionLayer.

Routing plugin

In the dependencies of the project’s gradle file, add the code below to get access to the features in the route plugin.

Implementation : com.trimblemaps.mapsdk:maps-android-plugin-route: 0.9.23 

When initializing the RoutePlugin, you can customize the stop icons and the text color used to draw routes. The code below depicts how you can do this when initializing the Route Plugin.

  • mapView – the MapView to apply the route plugin to
  • mapboxMap – the TrimbleMapsMap to apply route plugin with
  • belowLayer – the layer id where you’d like the route to display below
  • stopStartIconDrawable – custom Drawable to use for the first stop (origin)
  • stopEndIconDrawable – custom Drawable to use for the last stop (destination)
  • stopIconDrawable – custom Drawable to use for the intermediate stops
  • stopIconTextColor – custom color to use for the stop numbers on the intermediate stop icons
mRoutePlugin = RoutePlugin(mapView , mapboxMap , belowLayer ,
  stopStartIconDrawable,
  stopEndIconDrawable,
  bitmapDrawableFromVectorResource(R.drawable.ic_stop_blue),
  Color.parseColor(“#FFFFFF))

Once we have a valid route, we can pass that route into the RoutePlugin and it will draw the route on the map.

mRoutePlugin.addRoute(mRoute)

If you want to clear the route via the RoutePlugin, you just use clearRoutes()

mRoutePlugin.clearRoutes()

You can also frame the route passed with the frameRoutes method. You also have the option to set custom padding to the frame if you wish to zoom out or zoom in to the route drawn.

mRoutePlugin.frameRoutes(mPaddingLeft,mPaddingTop,mPaddingRight, mPaddingBottom)

How to generate a route

In order to use the route plugin, you must first create a route to pass in. To generate a route, you need to define and initiate the RouteOptions. If there are only two stops in a trip, then the coordinates origin and destination should be defined and the intermediate stops can be null. If a trip has more than one stop, then you need to define the origin and destination, and put all the other stops in listOfMiddlePoints.

val builder = RouteOptions.builder()
builder.applyDefaultParams()
  .coordinates(originPoint, listOfMiddlePoints, destinationPoint)
  .language(Settings.language.get(MainApplication.sharedPreferences()))
  .voiceUnits(Settings.distanceUnits.get(MainApplication.sharedPreferences()))
  .routeProfile(profile)
val routeOptions = builder.build()

Now we can pass the routeOptions into the requestRoutes to get a route back from the server.

mTrimbleMapsNavigation?.requestRoutes(routeOptions, routeReCallback)

In the code below we define what we want to do with the response when:

  • onRoutesReady, which gives you a route when the server successfully creates one,
  • onRoutesRequestFailure, which gives you an error body in case anything happens, and
  • onRoutesRequestCanceled, which lets you define what to do in case the user decides to cancel trip.
Private val routesReqCallback = object : RoutesRequestCallback {
override fun onRoutesReady(routes: List<DirectionsRoute>) {
    // Here we will be given back a list of routes.
    Timber.d(route request success %s, routes.toString())
    if(routes.isNotEmpty()){
      SharedData.directionsRoute = routes[0]
      navigationTrimbleMapsMap?drawRoute(routes[0]).
        animateCameraForRouteOverview(routes[0],
          buildRouteOverviewPaddingBeforeNavigation())
}
  }
override fun onRoutesRequestFailure(throwable:Throwable,   ,routeOptions:RouteOptions) {
    // This will return the error
    Timber.e(route request failure %s, throwable.toString())
}
  override fun onRoutesRequestCanceled(routeOptions: RouteOptions) {
    // Allows the developer to define what to do when user cancels the route
}
}
Last updated September 22, 2021.