Ping a Node

Interactions

Spotlight a node with an animated ping.

Click on a node to trigger an animated halo effect.

Use an event handler to pass the node id and options to the ping() API.

Event Handling docs
Ping docs

Code

import { MapWeave } from "mapweave/mapbox";
import { NetworkLayer } from "mapweave/layers";
import { networkData, defaultView } from "./data";

const mapweave = new MapWeave({
  container: "mw",
  options: { accessToken: VITE_MAPBOX_API_KEY },
});
const networkLayer = new NetworkLayer({ data: networkData });

mapweave.addLayer(networkLayer);
mapweave.view(defaultView);

mapweave.on("click", ({ id, item }) => {
  if (item?.type === "node") {
    networkLayer.ping(id, {
      color: "#FF1764",
      haloWidth: 20,
      haloRadius: 50,
      time: 1000,
      repeat: 2,
    });
  }
});

Data

export const defaultView = {
  latitude: 51.5,
  longitude: -0.128,
  zoom: 6,
};

export const networkData = {
  London: {
    type: "node",
    color: "#0FAB7C",
    latitude: 51.507387,
    longitude: -0.127663,
    scale: 2,
  },
  A: {
    type: "node",
    color: "#0FAB7C",
  },
  linkA: {
    type: "link",
    id: "LinkA",
    id1: "A",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  B: {
    type: "node",
    color: "#0FAB7C",
  },
  linkB: {
    type: "link",
    id: "LinkB",
    id1: "B",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  C: {
    type: "node",
    color: "#0FAB7C",
  },
  linkC: {
    type: "link",
    id: "LinkC",
    id1: "C",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  D: {
    type: "node",
    color: "#0FAB7C",
  },
  linkD: {
    type: "link",
    id: "LinkD",
    id1: "D",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  E: {
    type: "node",
    color: "#0FAB7C",
  },
  linkE: {
    type: "link",
    id: "LinkE",
    id1: "E",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  F: {
    type: "node",
    color: "#0FAB7C",
  },
  linkF: {
    type: "link",
    id: "LinkF",
    id1: "F",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  G: {
    type: "node",
    color: "#0FAB7C",
  },
  linkG: {
    type: "link",
    id: "LinkG",
    id1: "G",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
};

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/mw/css/examples.css" />
  </head>
  <body>
    <div id="mw"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>

Code

import React, { useRef } from "react";
import { createRoot } from "react-dom/client";
import { MapWeave } from "mapweave/react/mapbox";
import { NetworkLayer } from "mapweave/react/layers";

import { networkData, defaultView } from "./data";

const mapWeaveOptions = { accessToken: VITE_MAPBOX_API_KEY };

function Demo() {
  const networkLayer = useRef(null);

  const handleClick = ({ id, item }) => {
    if (item?.type === "node") {
      networkLayer.current?.ping(id, {
        color: "#FF1764",
        haloWidth: 20,
        haloRadius: 50,
        time: 1000,
        repeat: 2,
      });
    }
  };

  return (
    <MapWeave
      options={mapWeaveOptions}
      view={defaultView}
      onClick={handleClick}
    >
      <NetworkLayer data={networkData} ref={networkLayer} />
    </MapWeave>
  );
}

const root = createRoot(document.getElementById("mw"));
root.render(<Demo />);

Data

export const defaultView = {
  latitude: 51.5,
  longitude: -0.128,
  zoom: 6,
};

export const networkData = {
  London: {
    type: "node",
    color: "#0FAB7C",
    latitude: 51.507387,
    longitude: -0.127663,
    scale: 2,
  },
  A: {
    type: "node",
    color: "#0FAB7C",
  },
  linkA: {
    type: "link",
    id: "LinkA",
    id1: "A",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  B: {
    type: "node",
    color: "#0FAB7C",
  },
  linkB: {
    type: "link",
    id: "LinkB",
    id1: "B",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  C: {
    type: "node",
    color: "#0FAB7C",
  },
  linkC: {
    type: "link",
    id: "LinkC",
    id1: "C",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  D: {
    type: "node",
    color: "#0FAB7C",
  },
  linkD: {
    type: "link",
    id: "LinkD",
    id1: "D",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  E: {
    type: "node",
    color: "#0FAB7C",
  },
  linkE: {
    type: "link",
    id: "LinkE",
    id1: "E",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  F: {
    type: "node",
    color: "#0FAB7C",
  },
  linkF: {
    type: "link",
    id: "LinkF",
    id1: "F",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
  G: {
    type: "node",
    color: "#0FAB7C",
  },
  linkG: {
    type: "link",
    id: "LinkG",
    id1: "G",
    id2: "London",
    color: "#0FAB7C",
    width: 2,
  },
};

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/mw/css/examples.css" />
  </head>
  <body>
    <div id="mw"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Search

Ping a Node

Terms of use