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.
import com.trimblemaps.mapsdk.style.layers.CircleLayer ;
import com.trimblemaps.mapsdk.style.layers.PropertyFactory ;
import android.graphics.Color ;
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 );
}
});
import com.trimblemaps.mapsdk.style.layers.CircleLayer
import com.trimblemaps.mapsdk.style.layers.PropertyFactory
import android.graphics.Color
map !! . getStyle { style ->
val myCircleLayer = 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.
import com.trimblemaps.mapsdk.style.layers.LineLayer ;
import com.trimblemaps.mapsdk.style.layers.PropertyFactory ;
import android.graphics.Color ;
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 );
}
});
import com.trimblemaps.mapsdk.style.layers.LineLayer
import com.trimblemaps.mapsdk.style.layers.PropertyFactory
import android.graphics.Color
map !! . getStyle { style ->
val myLineLayer = LineLayer ( "line-layer-id" , "source-id-for-this-layer" )
myLineLayer . setProperties (
PropertyFactory . lineWidth ( 3f ),
PropertyFactory . lineColor ( Color . RED )
)
style . addLayer ( myLineLayer )
}
A more detailed example of the LineLayer
in action can be found in the Lines on a Map code example.
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.
import com.trimblemaps.mapsdk.style.layers.FillLayer ;
import com.trimblemaps.mapsdk.style.layers.PropertyFactory ;
import android.graphics.Color ;
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 );
}
});
import com.trimblemaps.mapsdk.style.layers.FillLayer
import com.trimblemaps.mapsdk.style.layers.PropertyFactory
import android.graphics.Color
map !! . getStyle { style ->
val myFillLayer = 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:
import android.graphics.Bitmap ;
import com.trimblemaps.mapsdk.utils.BitmapUtils ;
import com.trimblemaps.mapsdk.style.layers.SymbolLayer ;
import com.trimblemaps.mapsdk.style.layers.PropertyFactory ;
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 );
}
});
import com.trimblemaps.mapsdk.utils.BitmapUtils
import com.trimblemaps.mapsdk.style.layers.SymbolLayer
import com.trimblemaps.mapsdk.style.layers.PropertyFactory
map !! . getStyle { style ->
val customIcon = BitmapUtils . getBitmapFromDrawable ( getDrawable ( R . drawable . your_custom_icon ))
style . addImage ( "custom-icon-id" , customIcon !! )
val mySymbolLayer = 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
.