Search

Filter a Network

GeoJSON Boundaries

Create an interactive GeoJSON layer to filter networks.

Filter a Network
View live example →

Click a region to filter out any nodes and links outside of the clicked region.

You can add event handlers to the GeoJSON layer and create a filtering interaction such as the one in this example.

Use the click event with overrideStyle() to update the styling.

Clear the styling override by calling the returned StyleReset function.

Use the onClick event prop with overrideStyles to update the styling.

import { MapWeave } from "mapweave/mapbox";
import { NetworkLayer, GeoJsonLayer } from "mapweave/layers";
import { nodesPerRegion, getRegionColor, networkData, geojsonData } from "./data";

const networkLayerOptions = {
  nodes: { zoomScaling: { max: 0 } },
};

const hoveredAlpha = 0.4;
const selectedAlpha = 0.5;

let selectedRegionId = null;

function filterNetworkData() {
  if (selectedRegionId === null) {
    return networkData;
  }
  const nodesToInclude = nodesPerRegion.get(selectedRegionId);
  return Object.fromEntries(
    Object.entries(networkData).filter(([id, item]) =>
      item.type === "link"
        ? nodesToInclude.has(item.id1) && nodesToInclude.has(item.id2)
        : nodesToInclude.has(id)
    )
  );
}

// Return id if it is a valid region id, otherwise null
function getRegionId(id) {
  return nodesPerRegion.has(id) ? id : null;
}

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

mapweave.layers([networkLayer, geoJsonLayer]);

let selectStyleReset;

mapweave.on("click", ({ id }) => {
  selectStyleReset?.();
  selectedRegionId = getRegionId(id);
  networkLayer.data(filterNetworkData());
  if (selectedRegionId !== null) {
    const color = getRegionColor(selectedRegionId, selectedAlpha);
    selectStyleReset = geoJsonLayer.overrideStyle(selectedRegionId, { color });
  }
});

let hoverStyleReset;

mapweave.on("hover", ({ id }) => {
  hoverStyleReset?.();
  const regionId = getRegionId(id);
  if (regionId !== null && regionId !== selectedRegionId) {
    const color = getRegionColor(regionId, hoveredAlpha);
    hoverStyleReset = geoJsonLayer.overrideStyle(regionId, { color });
  }
});

mapweave.fitBounds();
const states = [
  // id, latitude, longitude, connected states
  ["AL", 32.361538, -86.279118, "FL", "GA", "LA", "MS"],
  ["AR", 34.736009, -92.331122, "LA", "MO", "MS", "OK", "TN"],
  ["AZ", 33.448457, -112.073844, "NM", "NV", "UT"],
  ["CA", 38.555605, -121.468926, "NV", "OR"],
  ["CO", 39.7391667, -104.984167, "NE", "NM", "OK", "UT", "WY"],
  ["CT", 41.767, -72.677, "MA", "NJ", "NY", "RI"],
  ["DE", 39.161921, -75.526755, "MD", "NJ", "PA", "VA"],
  ["FL", 30.4518, -84.27277, "GA", "SC"],
  ["GA", 33.76, -84.39, "SC", "TN", "WV"],
  ["IA", 41.590939, -93.620866, "KS", "MN", "MO", "NE", "WI"],
  ["ID", 43.613739, -116.237651, "MT", "NV", "OR", "UT", "WA"],
  ["IL", 39.78325, -89.650373, "IN", "MO", "WI"],
  ["IN", 39.790942, -86.147685, "KY", "MI", "OH", "TN"],
  ["KS", 39.04, -95.69, "MO", "NE", "OK"],
  ["KY", 38.197274, -84.86311, "OH", "TN", "WV"],
  ["LA", 30.45809, -91.140229, "MS", "TX"],
  ["MA", 42.2352, -71.0275, "ME", "NH", "RI"],
  ["MD", 38.972945, -76.501157, "PA", "VA"],
  ["ME", 44.323535, -69.765261, "NH", "VT"],
  ["MI", 42.7335, -84.5467, "OH", "PA", "WI"],
  ["MN", 44.95, -93.094, "ND", "NE", "WI"],
  ["MO", 38.572954, -92.189283, "OK", "TN"],
  ["MS", 32.32, -90.207, "TN"],
  ["MT", 46.595805, -112.027031, "ND", "UT", "WA", "WY"],
  ["NC", 35.771, -78.638, "SC", "VA", "WV"],
  ["ND", 48.813343, -100.779004, "SD", "WY"],
  ["NE", 40.809868, -96.675345, "SD"],
  ["NH", 43.220093, -71.549127, "NY", "VT"],
  ["NJ", 40.221741, -74.756138, "NY", "PA"],
  ["NM", 35.667231, -105.964575, "OK", "TX"],
  ["NV", 39.160949, -119.753877, "OR", "UT"],
  ["NY", 42.659829, -73.781339, "PA", "VT"],
  ["OH", 39.962245, -83.000647, "PA", "WV"],
  ["OK", 35.482309, -97.534994, "TX"],
  ["OR", 44.931109, -123.029159, "WA"],
  ["PA", 40.269789, -76.875613, "WV"],
  ["RI", 41.82355, -71.422132],
  ["SC", 34, -81.035],
  ["SD", 44.367966, -100.336378, "WY"],
  ["TN", 36.165, -86.784],
  ["TX", 30.266667, -97.75],
  ["UT", 40.7547, -111.892622, "WY"],
  ["VA", 37.54, -77.46, "WV"],
  ["VT", 44.26639, -72.57194],
  ["WA", 47.042418, -122.893077],
  ["WI", 43.074722, -89.384444],
  ["WV", 38.349497, -81.633294],
  ["WY", 41.145548, -104.802042],
];

function makeNetworkData() {
  const result = {};

  for (const [id1, latitude, longitude, ...links] of states) {
    result[id1] = {
      type: "node",
      latitude,
      longitude,
    };
    for (const id2 of links) {
      const id = `${id1}-${id2}`;
      result[id] = {
        type: "link",
        id1,
        id2,
      };
    }
  }

  return result;
}

export const networkData = makeNetworkData();

const standardAlpha = 0.3;

const regions = {
  blueRegion: { south: 29, west: -125, north: 49.6, east: -99.3, rgb: "36, 113, 163" },
  redRegion: { south: 29, west: -98.9, north: 49.6, east: -80.4, rgb: "255, 23, 100" },
  greenRegion: { south: 29, west: -80, north: 49.6, east: -68, rgb: "15, 171, 124" },
};

function isPointInRegion(latitude, longitude, { south, west, north, east }) {
  return longitude >= west && longitude <= east && latitude >= south && latitude <= north;
}

// Determine which nodes are in which regions
export const nodesPerRegion = new Map();
for (const [regionId, region] of Object.entries(regions)) {
  const nodesInThisRegion = new Set();
  for (const [nodeId, latitude, longitude] of states) {
    if (isPointInRegion(latitude, longitude, region)) {
      nodesInThisRegion.add(nodeId);
    }
  }
  nodesPerRegion.set(regionId, nodesInThisRegion);
}

export function getRegionColor(id, alpha) {
  return `rgba(${regions[id].rgb}, ${alpha})`;
}

function makeGeoJsonData() {
  return {
    type: "FeatureCollection",
    features: Object.entries(regions).map(([id, { south, west, north, east }]) => {
      return {
        type: "Feature",
        id,
        properties: {
          color: getRegionColor(id, standardAlpha),
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [west, south],
              [west, north],
              [east, north],
              [east, south],
              [west, south],
            ],
          ],
        },
      };
    }),
  };
}

export const geojsonData = makeGeoJsonData();
<!doctype html>
<html>
  <body>
    <div id="mw"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { MapWeave } from "mapweave/react/mapbox";
import { NetworkLayer, GeoJsonLayer } from "mapweave/react/layers";
import { nodesPerRegion, getRegionColor, networkData, geojsonData } from "./data";

const mapWeaveOptions = { accessToken: VITE_MAPBOX_API_KEY };

const networkLayerOptions = {
  nodes: { zoomScaling: { max: 0 } },
};

const hoveredAlpha = 0.4;
const selectedAlpha = 0.5;

function filterNetworkData(selectedRegionId) {
  if (selectedRegionId === null) {
    return networkData;
  }
  const nodesToInclude = nodesPerRegion.get(selectedRegionId);
  return Object.fromEntries(
    Object.entries(networkData).filter(([id, item]) =>
      item.type === "link"
        ? nodesToInclude.has(item.id1) && nodesToInclude.has(item.id2)
        : nodesToInclude.has(id)
    )
  );
}

// Return id if it is a valid region id, otherwise null
function getRegionId(id) {
  return nodesPerRegion.has(id) ? id : null;
}

function Demo() {
  const [selectedRegionId, setSelectedRegionId] = useState(null);
  const [hoveredRegionId, setHoveredRegionId] = useState(null);

  const overrideStyles = [];

  if (hoveredRegionId) {
    overrideStyles.push({
      ids: hoveredRegionId,
      overrideStyle: { color: getRegionColor(hoveredRegionId, hoveredAlpha) },
    });
  }

  if (selectedRegionId) {
    overrideStyles.push({
      ids: selectedRegionId,
      overrideStyle: { color: getRegionColor(selectedRegionId, selectedAlpha) },
    });
  }

  return (
    <MapWeave
      options={mapWeaveOptions}
      onClick={({ id }) => {
        setSelectedRegionId(getRegionId(id));
      }}
      onHover={({ id }) => {
        setHoveredRegionId(getRegionId(id));
      }}
    >
      <NetworkLayer data={filterNetworkData(selectedRegionId)} options={networkLayerOptions} />
      <GeoJsonLayer data={geojsonData} overrideStyles={overrideStyles} />
    </MapWeave>
  );
}

const root = createRoot(document.getElementById("mw"));
root.render(<Demo />);
const states = [
  // id, latitude, longitude, connected states
  ["AL", 32.361538, -86.279118, "FL", "GA", "LA", "MS"],
  ["AR", 34.736009, -92.331122, "LA", "MO", "MS", "OK", "TN"],
  ["AZ", 33.448457, -112.073844, "NM", "NV", "UT"],
  ["CA", 38.555605, -121.468926, "NV", "OR"],
  ["CO", 39.7391667, -104.984167, "NE", "NM", "OK", "UT", "WY"],
  ["CT", 41.767, -72.677, "MA", "NJ", "NY", "RI"],
  ["DE", 39.161921, -75.526755, "MD", "NJ", "PA", "VA"],
  ["FL", 30.4518, -84.27277, "GA", "SC"],
  ["GA", 33.76, -84.39, "SC", "TN", "WV"],
  ["IA", 41.590939, -93.620866, "KS", "MN", "MO", "NE", "WI"],
  ["ID", 43.613739, -116.237651, "MT", "NV", "OR", "UT", "WA"],
  ["IL", 39.78325, -89.650373, "IN", "MO", "WI"],
  ["IN", 39.790942, -86.147685, "KY", "MI", "OH", "TN"],
  ["KS", 39.04, -95.69, "MO", "NE", "OK"],
  ["KY", 38.197274, -84.86311, "OH", "TN", "WV"],
  ["LA", 30.45809, -91.140229, "MS", "TX"],
  ["MA", 42.2352, -71.0275, "ME", "NH", "RI"],
  ["MD", 38.972945, -76.501157, "PA", "VA"],
  ["ME", 44.323535, -69.765261, "NH", "VT"],
  ["MI", 42.7335, -84.5467, "OH", "PA", "WI"],
  ["MN", 44.95, -93.094, "ND", "NE", "WI"],
  ["MO", 38.572954, -92.189283, "OK", "TN"],
  ["MS", 32.32, -90.207, "TN"],
  ["MT", 46.595805, -112.027031, "ND", "UT", "WA", "WY"],
  ["NC", 35.771, -78.638, "SC", "VA", "WV"],
  ["ND", 48.813343, -100.779004, "SD", "WY"],
  ["NE", 40.809868, -96.675345, "SD"],
  ["NH", 43.220093, -71.549127, "NY", "VT"],
  ["NJ", 40.221741, -74.756138, "NY", "PA"],
  ["NM", 35.667231, -105.964575, "OK", "TX"],
  ["NV", 39.160949, -119.753877, "OR", "UT"],
  ["NY", 42.659829, -73.781339, "PA", "VT"],
  ["OH", 39.962245, -83.000647, "PA", "WV"],
  ["OK", 35.482309, -97.534994, "TX"],
  ["OR", 44.931109, -123.029159, "WA"],
  ["PA", 40.269789, -76.875613, "WV"],
  ["RI", 41.82355, -71.422132],
  ["SC", 34, -81.035],
  ["SD", 44.367966, -100.336378, "WY"],
  ["TN", 36.165, -86.784],
  ["TX", 30.266667, -97.75],
  ["UT", 40.7547, -111.892622, "WY"],
  ["VA", 37.54, -77.46, "WV"],
  ["VT", 44.26639, -72.57194],
  ["WA", 47.042418, -122.893077],
  ["WI", 43.074722, -89.384444],
  ["WV", 38.349497, -81.633294],
  ["WY", 41.145548, -104.802042],
];

function makeNetworkData() {
  const result = {};

  for (const [id1, latitude, longitude, ...links] of states) {
    result[id1] = {
      type: "node",
      latitude,
      longitude,
    };
    for (const id2 of links) {
      const id = `${id1}-${id2}`;
      result[id] = {
        type: "link",
        id1,
        id2,
      };
    }
  }

  return result;
}

export const networkData = makeNetworkData();

const standardAlpha = 0.3;

const regions = {
  blueRegion: { south: 29, west: -125, north: 49.6, east: -99.3, rgb: "36, 113, 163" },
  redRegion: { south: 29, west: -98.9, north: 49.6, east: -80.4, rgb: "255, 23, 100" },
  greenRegion: { south: 29, west: -80, north: 49.6, east: -68, rgb: "15, 171, 124" },
};

function isPointInRegion(latitude, longitude, { south, west, north, east }) {
  return longitude >= west && longitude <= east && latitude >= south && latitude <= north;
}

// Determine which nodes are in which regions
export const nodesPerRegion = new Map();
for (const [regionId, region] of Object.entries(regions)) {
  const nodesInThisRegion = new Set();
  for (const [nodeId, latitude, longitude] of states) {
    if (isPointInRegion(latitude, longitude, region)) {
      nodesInThisRegion.add(nodeId);
    }
  }
  nodesPerRegion.set(regionId, nodesInThisRegion);
}

export function getRegionColor(id, alpha) {
  return `rgba(${regions[id].rgb}, ${alpha})`;
}

function makeGeoJsonData() {
  return {
    type: "FeatureCollection",
    features: Object.entries(regions).map(([id, { south, west, north, east }]) => {
      return {
        type: "Feature",
        id,
        properties: {
          color: getRegionColor(id, standardAlpha),
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [west, south],
              [west, north],
              [east, north],
              [east, south],
              [west, south],
            ],
          ],
        },
      };
    }),
  };
}

export const geojsonData = makeGeoJsonData();
<!doctype html>
<html>
  <body>
    <div id="mw"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.