Pin Free Nodes

MapWeave Basics

Pin nodes in position after a user has dragged them.

Drag a node to a new location to pin it. Zoom in and out on the map to see what happens.

By default, free nodes can adjust their positions to achieve an optimal graph layout. You can use the pin() APIpin prop to prevent this for specific nodes.

drag-end event
Pinned Nodes docs

Code

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

const pinnableIds = ["A", "B", "C", "D", "E"];
const infoboxContent = document.getElementById("infobox-content");

function formatList(items) {
  return items.length === 0 ? "None" : items.join(", ");
}

function listPinnedNodes() {
  const pinned = networkLayer.pin();
  const pinnedIds = pinnableIds.filter((id) => pinned[id] !== undefined);
  const unpinnedIds = pinnableIds.filter((id) => pinned[id] === undefined);
  infoboxContent.textContent = `Unpinned: ${formatList(unpinnedIds)}\nPinned: ${formatList(pinnedIds)}`;
}

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("drag-end", (e) => {
  if (e.position === null || e.id === null) {
    return;
  }

  const currentPinned = networkLayer.pin();
  networkLayer.pin({ ...currentPinned, [e.id]: e.position });

  listPinnedNodes();
});

document.getElementById("unpin").addEventListener("click", () => {
  networkLayer.pin({});
  listPinnedNodes();
});

listPinnedNodes();

Data

const latitude = 42.6334;
const longitude = -71.3162;

const nodeSize = 10;
const labelFontSize = 12;

export const networkData = {
  node1: {
    type: "node",
    latitude,
    longitude,
    color: "#2471a3",
    size: nodeSize,
  },
};

for (const id of "ABCDE") {
  networkData[id] = {
    type: "node",
    color: "#27ae60",
    size: nodeSize,
    label: {
      text: id,
      position: "center",
      fontSize: labelFontSize,
      backgroundColor: "rgba(0,0,0,0)",
    },
  };

  networkData[`link${id}`] = {
    type: "link",
    color: "#34495e",
    id1: id,
    id2: "node1",
  };
}

export const defaultView = {
  latitude: 42.6334,
  longitude: -71.3162,
  zoom: 6,
};

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/mw/css/examples.css" />
  </head>
  <body>
    <div id="mw">
      <div class="example__infobox" style="position: absolute; margin: 5px">
        <pre id="infobox-content"></pre>
        <button id="unpin">Unpin All</button>
      </div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>

Code

import React, { useRef, useState } 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 };

const pinnableIds = ["A", "B", "C", "D", "E"];
const infoboxStyle = { position: "absolute", margin: 5 };

function formatList(items) {
  return items.length === 0 ? "None" : items.join(", ");
}

function listPinnedNodes(pinned) {
  const pinnedIds = pinnableIds.filter((id) => pinned[id] !== undefined);
  const unpinnedIds = pinnableIds.filter((id) => pinned[id] === undefined);
  return `Unpinned: ${formatList(unpinnedIds)}\nPinned: ${formatList(pinnedIds)}`;
}

function Demo() {
  const networkLayer = useRef(null);
  const [pinnedNodes, setPinnedNodes] = useState({});

  return (
    <>
      <div className="example__infobox" style={infoboxStyle}>
        <pre>{}</pre>
        <button
          onClick={() => {
            setPinnedNodes({});
          }}
        >
          Unpin All
        </button>
      </div>
      <MapWeave
        options={mapWeaveOptions}
        view={defaultView}
        onDragEnd={({ id, position }) => {
          if (id === null || position === null) {
            return;
          }

          setPinnedNodes({ ...pinnedNodes, [id]: position });
        }}
      >
        <NetworkLayer data={networkData} pin={pinnedNodes} ref={networkLayer} />
      </MapWeave>
    </>
  );
}

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

Data

const latitude = 42.6334;
const longitude = -71.3162;

const nodeSize = 10;
const labelFontSize = 12;

export const networkData = {
  node1: {
    type: "node",
    latitude,
    longitude,
    color: "#2471a3",
    size: nodeSize,
  },
};

for (const id of "ABCDE") {
  networkData[id] = {
    type: "node",
    color: "#27ae60",
    size: nodeSize,
    label: {
      text: id,
      position: "center",
      fontSize: labelFontSize,
      backgroundColor: "rgba(0,0,0,0)",
    },
  };

  networkData[`link${id}`] = {
    type: "link",
    color: "#34495e",
    id1: id,
    id2: "node1",
  };
}

export const defaultView = {
  latitude: 42.6334,
  longitude: -71.3162,
  zoom: 6,
};

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

Pin Free Nodes

Terms of use