Skip to main content

Data driven styling

Contents

Apply different styles to data depending on specific parameters. In the example below, the points are colored differently based on the state in which they are located. (Green - Pennsylvania; Red - New Jersey; Blue - New York)

data driven styling

activity_sample_data_driven_styling.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent">

    <com.trimblemaps.mapsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

SampleDataDrivenStylingActivity.java

public class SampleDataDrivenStylingActivity extends AppCompatActivity implements Style.OnStyleLoaded  {

    private MapView mapView;
    private TrimbleMapsMap map;
    private final String SOURCE_ID = "tristatepoints";
    private final String LAYER_ID = "tristatepoints";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);// Authorize the api key for the session.
        // .apiKey() requires your Trimble Maps API key
        TrimbleMapsAccount trimbleMapsAccount = TrimbleMapsAccount.builder()
                .apiKey(getString(R.string.API_KEY))
                .addLicensedFeature(LicensedFeature.MAPS_SDK)
                .build();

        // Initialize the session
        TrimbleMapsAccountManager.initialize(trimbleMapsAccount);
        TrimbleMapsAccountManager.awaitInitialization();

        // Get an instance of the map, done before the layout is set.
        TrimbleMaps.getInstance(this);
        setContentView(R.layout.activity_sample_data_driven_styling);

        // Set up the MapView from the layout
        mapView = (MapView) findViewById(R.id.mapView);

        // the onMapReadyCallback is fired when the map is ready to be worked with
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull TrimbleMapsMap trimbleMapsMap) {
                // The TrimbleMapsMap object is created, now a style can be applied to render a map.
                map = trimbleMapsMap;
                CameraPosition position = new CameraPosition.Builder()
                        .target(new LatLng(41.36290180612575, -74.6946761628674))
                        .zoom(13)
                        .build();
                map.setCameraPosition(position);

                // This class implements the onStyleLoaded method, that will be called when
                // the style has been loaded.
                map.setStyle(Style.MOBILE_NIGHT, SampleDataDrivenStylingActivity.this);
            }
        });
    }


    @Override
    public void onStyleLoaded(Style style) {
        // In this example a .json file from the assets folder is being used as the source
        // This sample can be found here: @TODO ADD LINK
        // Geojson can either be passed in as a string or the result of a URI call.

        try {
            // Create a source and add it to the style. Important to note, sources are linked to styles.
            // If you change the style you may need to re-add your source and layers
            style.addSource(new GeoJsonSource(SOURCE_ID, new URI("asset://tristate.json")));
            // See sample JSON file (tristate.json) below

            // Create a CircleLayer to display our source information.
            CircleLayer circleLayer = new CircleLayer(LAYER_ID, SOURCE_ID);
            circleLayer.setProperties(
                    // Changing the circle radius and stroke width based on the zoom level
                    PropertyFactory.circleRadius(interpolate(linear(),
                            zoom(),
                            stop(12f, 2f),
                            stop(22f, 10f)
                    )),

                    PropertyFactory.circleStrokeWidth(interpolate(linear(),
                            zoom(),
                            stop(12f, 1f),
                            stop(22f, 12f)
                    )),

                    // Change the color of the circle stroke based on the "state" property in the
                    // json source data. The first color used is the default color if no 'match' is
                    // found
                    PropertyFactory.circleStrokeColor(
                            Expression.match(Expression.get("state"), Expression.color(Color.BLACK),
                                    Expression.stop("PA", Expression.color(Color.GREEN)),
                                    Expression.stop("NY", Expression.color(Color.BLUE)),
                                    Expression.stop("NJ", Expression.color(Color.RED))
                                    )
                    ),
                    PropertyFactory.circleColor(Color.WHITE)

            );

            // add the layer
            style.addLayer(circleLayer);

        } catch (URISyntaxException e) {
            e.printStackTrace();
        }

    }
}

Sample JSON (tristate.json)

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.68954,
          41.369863
        ]
      },
      "properties": {
        "state": "NY"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.687882,
          41.36892
        ]
      },
      "properties": {
        "state": "NY"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.687007,
          41.349811
        ]
      },
      "properties": {
        "state": "NJ"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.68222,
          41.36056
        ]
      },
      "properties": {
        "state": "NY"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.704292,
          41.364475
        ]
      },
      "properties": {
        "state": "PA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.710335,
          41.360504
        ]
      },
      "properties": {
        "state": "PA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.695556,
          41.367119
        ]
      },
      "properties": {
        "state": "PA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.694232,
          41.354974
        ]
      },
      "properties": {
        "state": "NJ"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.698967,
          41.370361
        ]
      },
      "properties": {
        "state": "PA"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -74.709572,
          41.360474
        ]
      },
      "properties": {
        "state": "PA"
      }
    }
  ]
}
Last updated September 2, 2022.
Contents