Styling

Styling

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.

Network Layer

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

MapWeave Example

Nodes

Nodes have different elements that can be adjusted depending on your data and design. Use the sliders in the example to see how node size, border width, halo radius and halo width change.

Notice how the node border is drawn equally inside and outside the edge of the node. The node size doesn't change when the border changes, but the appearance is different.

MapWeave Example

Setting the node scale scales the node and halo equally.

Override 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 (for example, 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 750 meters 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.

MapWeave Example

// 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>
    </>
  );
}

Ping

Use ping to draw attention to one or more nodes with an animated halo effect. Call ping when the user interacts with MapWeave, for example, by clicking on a node.

mapweave.on("click", ({ id, item }) => {
  const clickedNodeId = item?.type === "node" ? id : null;
  if (clickedNodeId) {
    networkLayer.ping(clickedNodeId, { repeat: 3 });
  }
});

const pingOptions = { repeat: 1 };

function Demo() {
  const networkLayerRef = useRef();

  const onClick = ({ id }) => {
    networkLayerRef.current.ping(id, pingOptions);
  };

  return (
    <MapWeave options={options} onClick={onClick}>
      <NetworkLayer ref={networkLayerRef} data={networkData} />
    </MapWeave>
  );
}

For more information about events in MapWeave, see the Event Handling docs.

Search

Network Layer

Nodes

Override Styles

Ping

Terms of use