Styling – MapWeave Docs

Styling

Styling Items

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

Network Layer: Nodes and node labels, links and link labels.
Observations Layer: Observed entities and observations.
GeoJSON Layer: GeoJSON features.

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
  },
};

Styling Network Playground

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. To clear any style overrides, store the StyleReset function returned when calling overrideStyle (e.g. in a variable) and then call that StyleReset function.

All styles set in the layer data can be dynamically overridden without changing the values in that data. Use the overrideStyles API to update the styling.

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.

A code snippet is shown below, or open the example in the playground to see the full code.

Override Style Playground

// create a variable to store the reset function
let resetStyleFunction;
// override the style when a button is clicked
overrideButton.addEventListener('click', () => {
  // reset any overridden styles
  resetStyleFunction?.();
  // override the style for 'obs10' and store the function to reset the styles
  resetStyleFunction = myObservationsLayer.overrideStyle('obs10', { color: '#FFC40C' });
});

// remove the override style when a button is clicked
resetButton.addEventListener('click', () => resetStyleFunction?.());

function App() {
  // define the styles to override
  let overriddenStyles = { ids: 'myObservationId', overrideStyle: { color: '#FFC40C' } };
  return (
    <>
      <MapWeave options={options}>
        {/* Add the overrideStyles prop to the observations layer */}
        <ObservationsLayer data={myData} overrideStyles={overriddenStyles} />
      </MapWeave>
    </>
  );
}