Mobile Maps SDK

Visualizing data

Contents

Typically the Maps SDK will be used to visualize data on top of the map. Data could vary from simple dots-on-a-map to more complex pieces like 3D buildings, route paths, geofences, and more.

The recommended way to visualize custom data on top of the map is through the use of Sources and Layers.

Sources store the data you want to visualize. Layers, depending on the type set, will visualize that data on the map.

Creating a GeoJsonSource

You can only add sources with a unique sourceId. Attempts at adding a duplicate sourceId will result in an error. 

let sourceId = "source id"; // provide a string for source Id
const createGeoJsonSource = () => {
    let geojson = require('./path/to/geojson/file');
    let geojsonStr = JSON.stringify(geojson);

    await TrimbleMapsMapView.createGeoJsonSource(sourceId, geojsonStr);
    // add source to map style
    await TrimbleMapsMapView.addSourceToStyle(sourceId);
}

Any geojson source created will be stored in the module. To remove any source: 

// remove source from style if added previously
await TrimbleMapsMapView.removeSourceFromStyle(sourceId);
await TrimbleMapsMapView.removeGeoJsonSource(sourceId);

You can retrieve all geojson source ids by calling getAllGeoJsonSources. 

// returns list of string ids
let sourceIds = await GeoJsonSourceModule.getAllGeoJsonSources();

Adding custom layers

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.

Circle layer

A circle layer uses single coordinates from a source to display and render a circle at a location on a map.

First, create your circle layer properties. 

let circleProperties = {};
circleProperties[TrimbleMapsMapViewConstants.RADIUS] = 4;
circleProperties[TrimbleMapsMapViewConstants.COLOR] = "#FFFFFF";
circleProperties[TrimbleMapsMapViewConstants.STROKE_COLOR] = "#000000";
circleProperties[TrimbleMapsMapViewConstants.STROKE_WIDTH] = 5.0;

After creating and adding your geojson source for the circle layer, create a circle layer with createCircleLayerWithProperties. The circle layer is stored in the module. 

// create and add geojson source to module
...
let sourceId = "circle layer source id"; // provide a string for source Id
const createGeoJsonSource = () => {...}

const circleLayerId = "circleLayerId"; // define your circle layer id
const createCircleLayer = async () => {
  await createGeoJsonSource();
  //  define circleProperties
  let circleProperties = {...}

  // create circle layer
  await TrimbleMapsMapView.createCircleLayerWithProperties(
      circleLayerId,
      sourceId,
      circleProperties
  );
};

Add the layer to the map style for the layer to show on the map. This should be done after the map has loaded and after the circle layer is created. 

// depending on the platform, pass the respective mapViewTag
const createAndAddCircleLayer = async () => {
  await createCircleLayer();
  await TrimbleMapMapView.addLayerToStyle(circleLayerId,
   TrimbleMapsMapViewConstants.CIRCLE_LAYER);
}

To remove a circle layer from the map: 

const removeLayerFromMap = async() => {
  // removes layer from map
  await TrimbleMapsMapView.removeLayerFromStyle(circleLayerId,
   TrimbleMapsMapViewConstants.CIRCLE_LAYER);
}

const deleteLayer = async () => {
  // removes the created layer from module
  await TrimbleMapsMapView.removeCircleLayer(circleLayerId);
}

Line layer

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 line geometry in the source. 

// create and add geojson source for line layer
let lineSourceId = "lineSourceId"; // your geojson source id
const createGeoJsonSource = () => {...}

let lineLayerId = "lineLayerId"; // define your line layer id

// depending on the platform, pass the respective mapViewTag
const createAndAddLineLayer = async () => {
  await createGeoJsonSource();

  let lineProperties = {};
  lineProperties[TrimbleMapsMapViewConstants.WIDTH] = 4;
  lineProperties[TrimbleMapsMapViewConstants.COLOR] = "#0000FF";
  lineProperties[TrimbleMapsMapViewConstants.OPACITY] = 0.5;

  // create line layer
  await TrimbleMapsMapView.createLineLayerWithProperties(
    lineLayerId,
    lineSourceId,
    lineProperties
  );

  // add layer to the current map style
  await TrimbleMapsMapView.addLayerToStyle(lineLayerId,
   TrimbleMapsMapViewConstants.LINE_LAYER);
}

// clean up
const removeLayerFromMap = async() => {
  // removes layer from map
  await TrimbleMapsMapView.removeLayerFromStyle(lineLayerId,
   TrimbleMapsMapViewConstants.LINE_LAYER;
}

const deleteLayer = async () => {
  // removes the created layer from module
  await TrimbleMapsMapView.removeLineLayer(lineLayerId);
}

Fill Layer

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. 

// create and add geojson source for fill layer
let fillSourceId = "fillSourceId"; // your geojson source id
const createGeoJsonSource = () => {...}

let fillLayerId = "fillLayerId"; // define your fill layer id

const createAndAddFillLayer = async() => {

  let fillProperties = {};
  fillProperties[TrimbleMapsMapViewConstants.OUTLINE_COLOR] = "#000FF";
  fillProperties[TrimbleMapsMapViewConstants.COLOR] = "#0000FF";
  fillProperties[TrimbleMapsMapViewConstants.OPACITY] = 0.5;

  // create fill layer
  await FillLayerModule.createFillLayerWithProperties(
    fillLayerId,
    fillSourceId,
    fillProperties
  );

  // add layer to the current map style
  await TrimbleMapsMapView.addLayerToStyle(fillLayerId,
    TrimbleMapsMapViewConstants.FILL_LAYER);
};

// clean up
const removeLayerFromMap = async() => {
  // removes layer from map
  await TrimbleMapsMapView.removeLayerFromStyle(fillLayerId,
   TrimbleMapsMapViewConstants.FILL_LAYER;
}

const deleteLayer = async () => {
  // removes the created layer from module
  await TrimbleMapsMapView.removeFillLayer(fillLayerId);
}

Symbol Layer

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.

Create and add a symbol to the map style: 

let imageId = "image id"; // unique image id for identifying the image source

const img = require("./path/to/image");
let resolvedImg = Image.resolveAssetSource(img);
await TrimbleMapsMapView.addImageToStyle(imageId, resolvedImg.uri);

Then you can create and add the layer similar to the other layers. 

// create and add geojson source for symbol layer
let symbolSourceId = "symbolSourceId"; // your geojson source id
const createGeoJsonSource = () => {...}

let symbolLayerId = "symbolLayerId"; // define your symbol layer id

let imageId = "image id"; // unique image id for identifying the image source
const img = require("./path/to/image");
let resolvedImg = Image.resolveAssetSource(img);
await TrimbleMapsMapView.addImageToStyle(imageId, resolvedImg.uri);

const createAndAddSymbolLayer = async () => {
  let symbolProperties = {};
  // set icon image property to the image id
  symbolProperties[TrimbleMapsMapViewConstants.ICON_IMAGE] = imageId;

  // create symbol layer
  await TrimbleMapsMapView.createSymbolLayerWithProperties(
    symbolLayerId,
    symbolSourceId,
    symbolProperties
  );

  // add layer to the current map style
  await TrimbleMapsMapView.addLayerToStyle(symbolLayerId,
   TrimbleMapsMapViewConstants.SYMBOL_LAYER);
};

// clean up
const removeLayerFromMap = async() => {
  // removes layer from map
  await TrimbleMapsMapView.removeLayerFromStyle(symbolLayerId,
   TrimbleMapsMapViewConstants.SYMBOL_LAYER);
  // remove image from map style
  await TrimbleMapsMapView.removeImageFromStyle(imageId);
}

const deleteLayer = async () => {
  // removes the created layer from module
  await TrimbleMapsMapView.removeFillLayer(fillLayerId);
}
Last updated February 15, 2024.
Contents