Skip to main content

Styling

Styling Items​

Basic item styling is defined within the data objects for each layer. The items available for styling are:

The map below shows a simple network defined in the network layer. The color has been set for nodes, links, labels and text and an arrow has been added to end2 of the link with arrow.

Expand to see the charging stations object.

const linkColor = '#FD9067';
const textColor = '#F4F4F5';
const labelColor = '#6E7379';
const freeNodeColor = '#FD9067';
const fixedNodeColor = '#774299';

export const chargingStations = {
  Mainland: {
    type: 'node',
    color: fixedNodeColor, // sets the color of the node
    latitude: 49.27684,
    longitude: -123.11887,
    label: {
      text: '959-979 Mainland St',
      color: textColor, // sets the color of the label text
      backgroundColor: labelColor, // sets the background color of the label
    },
  },
  Vancouver: {
    type: 'node',
    color: freeNodeColor, // sets the color of the node
    label: {
      text: 'City of Vancouver',
      color: textColor, // sets the color of the label text
      backgroundColor: labelColor, // sets the background color of the label
    },
  },
  Beach: {
    type: 'node',
    color: fixedNodeColor, // sets the color of the node
    latitude: 49.272594,
    longitude: -123.12836,
    label: {
      text: '456 Beach Crescent',
      color: textColor, // sets the color of the label text
      backgroundColor: labelColor, // sets the background color of the label
    },
  },
  Richards: {
    type: 'node',
    color: fixedNodeColor, // sets the color of the node
    latitude: 49.279403,
    longitude: -123.118908,
    label: {
      text: '860 Richards St',
      color: textColor, // sets the color of the label text
      backgroundColor: labelColor, // sets the background color of the label
    },
  },
  link1: {
    type: 'link',
    color: linkColor, // sets the color of the link
    id1: 'Vancouver',
    id2: 'Mainland',
    end2: { arrow: true }, // adds an arrow to the id2 end of the link
  },
  link2: {
    type: 'link',
    color: linkColor, // sets the color of the link
    id1: 'Vancouver',
    id2: 'Beach',
    end2: { arrow: true }, // adds an arrow to the id2 end of the link
  },
  link3: {
    type: 'link',
    color: linkColor, // sets the color of the link
    id1: 'Vancouver',
    id2: 'Richards',
    end2: { arrow: true }, // adds an arrow to the id2 end of the link
  },
};

Useful APIs:

NetworkNode color | NetworkNodeLabel color | NetworkNodeLabel backgroundColor | NetworkLink color | NetworkLink end2.arrow

Useful Examples:

Override Item Styles​

All styles set in the layer data can be dynamically overridden without changing the values in that data. Use the overrideStyle API to update the styling, then remove it with the returned reset function.

Useful APIs:

Network Layer overrideStyle | Observations Layer overrideStyle | GeoJSON Layer overrideStyle

The following map of Zürich uses the observations layer to show the path of a drone (created from a subset of GPS coordinates from The Zurich Urban Micro Aerial Vehicle Dataset) and a GeoJSON feature showing the area within 750m of the main train station, Zürich Hauptbahnhof.

Click Override Style to change the color of the observations within the radius to yellow. Click Reset Style to remove the overridden color.


Useful APIs:

ObservedEntity color | GeoJSONFeatureStyle radius

Useful Examples: