Open the data tab to explore the link designs created in this example.
The NetworkLink API supports a number of link styling properties.
import { MapWeave } from "mapweave/mapbox";
import { NetworkLayer } from "mapweave/layers";
import { networkData } from "./data";
const mapweave = new MapWeave({ container: "mw", options: { accessToken: VITE_MAPBOX_API_KEY } });
const networkLayer = new NetworkLayer({ data: networkData });
mapweave.addLayer(networkLayer);
mapweave.fitBounds();const red = "#FF1764";
const redWithAlpha = "rgba(255,0,0,0.3)";
const yellow = "#FFB92E";
const green = "#0FAB7C";
const darkGreen = "#407767";
const blue = "#2471A3";
const lightBlue = "#64C1DD";
const orange = "#FFC177";
const transparent = "rgba(0,0,0,0)";
export const networkData = {
node1: { type: "node", latitude: -34.6, longitude: -58.38 },
node2: { type: "node", latitude: -26.2, longitude: 28.03 },
node3: {
type: "node",
latitude: 28.7,
longitude: 77.1,
},
node4: {
type: "node",
latitude: -35.3,
longitude: 149.1,
},
node5: {
type: "node",
latitude: 35.68,
longitude: 139.65,
},
node6: {
type: "node",
latitude: 52.52,
longitude: 60,
},
node7: {
type: "node",
latitude: 52.52,
longitude: 0,
},
node8: {
type: "node",
latitude: 34.05,
longitude: -118.24,
},
yellowLink: {
type: "link",
id1: "node1",
id2: "node2",
color: yellow,
width: 4,
end2: { arrow: true },
label: {
text: "16pt label\nwith one arrow",
color: "black",
backgroundColor: yellow,
fontSize: 16,
},
},
thinGreenLink: {
type: "link",
id1: "node2",
id2: "node3",
color: green,
width: 1,
label: {
text: "8pt label",
color: "black",
backgroundColor: green,
fontSize: 8,
},
},
defaultWidthLightBlueLink: {
type: "link",
id1: "node3",
id2: "node4",
color: lightBlue,
label: {
text: "No background",
color: lightBlue,
fontSize: 12,
backgroundColor: transparent,
},
},
translucentRedLink: {
type: "link",
id1: "node4",
id2: "node5",
color: redWithAlpha,
width: 6,
label: {
text: "Translucent link",
color: "white",
backgroundColor: redWithAlpha,
},
},
wideDarkGreenLink: {
type: "link",
id1: "node5",
id2: "node6",
color: darkGreen,
width: 18,
flow: {
velocity: 20,
color: "rgba(200, 220, 200, 1.0)",
},
label: {
text: "Wide link\nwith flow",
color: "white",
fontSize: 12,
backgroundColor: green,
},
},
lightBlueLink: {
type: "link",
id1: "node6",
id2: "node7",
color: lightBlue,
width: 4,
label: {
text: "Label with border",
color: "black",
backgroundColor: lightBlue,
border: {
color: blue,
width: 4,
},
},
},
orangeLink: {
type: "link",
id1: "node7",
id2: "node8",
color: orange,
width: 7,
end1: { arrow: true },
end2: { arrow: true },
label: {
text: "Square corners\nand two arrows",
border: { radius: 0 },
color: "black",
fontSize: 14,
backgroundColor: orange,
},
},
thickRedLink: {
type: "link",
id1: "node8",
id2: "node1",
color: red,
width: 7,
label: {
text: "Serif label",
color: "white",
fontFamily: "serif",
fontSize: 14,
backgroundColor: red,
},
},
};<!doctype html>
<html>
<body>
<div id="mw"></div>
<script type="module" src="./code.js"></script>
</body>
</html>import React from "react";
import { createRoot } from "react-dom/client";
import { MapWeave } from "mapweave/react/mapbox";
import { NetworkLayer } from "mapweave/react/layers";
import { networkData } from "./data";
const mapWeaveOptions = { accessToken: VITE_MAPBOX_API_KEY };
function Demo() {
return (
<MapWeave options={mapWeaveOptions}>
<NetworkLayer data={networkData} />
</MapWeave>
);
}
const root = createRoot(document.getElementById("mw"));
root.render(<Demo />);const red = "#FF1764";
const redWithAlpha = "rgba(255,0,0,0.3)";
const yellow = "#FFB92E";
const green = "#0FAB7C";
const darkGreen = "#407767";
const blue = "#2471A3";
const lightBlue = "#64C1DD";
const orange = "#FFC177";
const transparent = "rgba(0,0,0,0)";
export const networkData = {
node1: { type: "node", latitude: -34.6, longitude: -58.38 },
node2: { type: "node", latitude: -26.2, longitude: 28.03 },
node3: {
type: "node",
latitude: 28.7,
longitude: 77.1,
},
node4: {
type: "node",
latitude: -35.3,
longitude: 149.1,
},
node5: {
type: "node",
latitude: 35.68,
longitude: 139.65,
},
node6: {
type: "node",
latitude: 52.52,
longitude: 60,
},
node7: {
type: "node",
latitude: 52.52,
longitude: 0,
},
node8: {
type: "node",
latitude: 34.05,
longitude: -118.24,
},
yellowLink: {
type: "link",
id1: "node1",
id2: "node2",
color: yellow,
width: 4,
end2: { arrow: true },
label: {
text: "16pt label\nwith one arrow",
color: "black",
backgroundColor: yellow,
fontSize: 16,
},
},
thinGreenLink: {
type: "link",
id1: "node2",
id2: "node3",
color: green,
width: 1,
label: {
text: "8pt label",
color: "black",
backgroundColor: green,
fontSize: 8,
},
},
defaultWidthLightBlueLink: {
type: "link",
id1: "node3",
id2: "node4",
color: lightBlue,
label: {
text: "No background",
color: lightBlue,
fontSize: 12,
backgroundColor: transparent,
},
},
translucentRedLink: {
type: "link",
id1: "node4",
id2: "node5",
color: redWithAlpha,
width: 6,
label: {
text: "Translucent link",
color: "white",
backgroundColor: redWithAlpha,
},
},
wideDarkGreenLink: {
type: "link",
id1: "node5",
id2: "node6",
color: darkGreen,
width: 18,
flow: {
velocity: 20,
color: "rgba(200, 220, 200, 1.0)",
},
label: {
text: "Wide link\nwith flow",
color: "white",
fontSize: 12,
backgroundColor: green,
},
},
lightBlueLink: {
type: "link",
id1: "node6",
id2: "node7",
color: lightBlue,
width: 4,
label: {
text: "Label with border",
color: "black",
backgroundColor: lightBlue,
border: {
color: blue,
width: 4,
},
},
},
orangeLink: {
type: "link",
id1: "node7",
id2: "node8",
color: orange,
width: 7,
end1: { arrow: true },
end2: { arrow: true },
label: {
text: "Square corners\nand two arrows",
border: { radius: 0 },
color: "black",
fontSize: 14,
backgroundColor: orange,
},
},
thickRedLink: {
type: "link",
id1: "node8",
id2: "node1",
color: red,
width: 7,
label: {
text: "Serif label",
color: "white",
fontFamily: "serif",
fontSize: 14,
backgroundColor: red,
},
},
};<!doctype html>
<html>
<body>
<div id="mw"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>