Map Visualizations

Overview

map visualizations are rendered on the map component of the viewer. They are automatically detected as map visualizations in VisualizationSidebar.vue to be added to the "Map Visualizations" list, where the "Toggle Visibility", "Edit", and "Delete" options exist.

The code to actually render the map visualizations exists in MapView.vue.

Adding a map Visualization Type

createVisualizations()

The createVisualizations() function is automatically called when newly created map visualizations are detected. It takes in an array of the added visualization IDs, fetches the associated OSHVisualization objects, and then proceeds to handle visualization creation based on the type.

1. Add an if condition to handle code for the desired visualization type.

if (viz.type === 'pointmarker')

2. Generate SweApi instances for each datastream using the createDatasource() helper function. Connect and store each instance.

for (const dsProps of dsArray) {
  const dsInstance = createDatasource(dsProps);

  // Other datastream specific code...

  dsInstance.connect();
  dsInstances.push(dsInstance);
}

3. Create the DataLayer for the visualization (e.g. PointMarkerLayer, LobLayer)

const pmLayer = new PointMarkerLayer({...})

4. Push the layer to mapItemLayers with its ID value. This is what maintains all current map visualizations

mapItemLayers.value.set(viz.id, pmLayer)

5. Add the layer to mapView to be rendered on the current map component

mapView.value.addLayer(pmLayer)

Removing a map Visualization Type

To remove a visualization type, simply remove the associated if condition and code from the createVisualizations() function.

Example map Visualization Code

Below is the code for rendering a Pointmarker visualization type:

/**
 * Create new visualizations based on viz type
 * 
 * @param addedVizIds - OSHVisualization IDs of visualizations to be added
 */
function createVisualizations(addedVizIds: string[]) {
  const newOSHVisualizations: OSHVisualization[] = addedVizIds
    .map(id => visualizationStore.getVisualizationById(id))
    .filter(Boolean) as OSHVisualization[];

  for (const viz of newOSHVisualizations) {
    const dsArray: ISweApiDataSourceProperties[] = viz.visualizationComponents.dataSource // Array of datasources
    const dsInstances: SweApi[] = []; // Array of SweApi instances for datasources

    if (viz.type === 'pointmarker') {
      // Undefined initially
      let getLocation: any;
      let getOrientation: any;
      let getMarkerId: any;

      for (const dsProps of dsArray) {
        const dsInstance = createDatasource(dsProps);

        // Check for location property
        if (dsProps.properties.location) {
          getLocation = {
            dataSourceIds: [dsInstance.id],
            handler: (rec: any) => {
              return {
                x: rec[dsProps.properties.location.property].lon,
                y: rec[dsProps.properties.location.property].lat,
                z: rec[dsProps.properties.location.property].alt || 0, // Default to 0 if altitude is not provided
              }
            },
          }
        }
        // Check for orientation property
        if (dsProps.properties.orientation) {
          getOrientation = {
            dataSourceIds: [dsInstance.id],
            handler: (rec: any) => {
              return {
                heading: rec[dsProps.properties.orientation.property].heading,
              }
            },
          }
        }
        // Check for markerId property
        if (dsProps.properties.markerId) {
          getMarkerId = {
            dataSourceIds: [dsInstance.id],
            handler: (rec: any) => {
              return rec[dsProps.properties.markerId.property];
            },
          }
        }

        dsInstance.connect();
        dsInstances.push(dsInstance);
        listDatasourceInstances.value.push(dsInstance); // Push to list of active datasources
      }

      console.log('[MapView] Creating datasource for PointMarkerLayer:', dsInstances)
      const layerOpts = viz.visualizationComponents.dataLayer as IPointMarkerLayerProperties
      const pmLayer = new PointMarkerLayer({
        ...layerOpts,
        name: viz.name,
        id: viz.id,
        dataSourceIds: dsInstances.map(ds => ds.id),
        ...(getLocation ? { getLocation } : {}),
        ...(getOrientation ? { getOrientation } : {}),
        ...(getMarkerId ? { getMarkerId } : {}),
      })
      mapItemLayers.value.set(viz.id, pmLayer)
      mapView.value.addLayer(pmLayer)
      console.log('[MapView] Creating PointMarkerLayer:', pmLayer)
    }
    else if (viz.type === 'lob') {...}
    else if (viz.type === 'geoPtz') {...}
  }
}