Use the arrows to move between different areas on the map defined by the data within them. With MapWeave, you can easily fit to all layers' data, or specific items within layers using the getBounds and fitBounds methods.
import { GeoJsonLayer, NetworkLayer } from "mapweave/layers";
import { mainlandUSOutlineGeoJson, networkData } from "./data";
import { MapWeave } from "mapweave/maplibre";
const nextButton = document.getElementById("next");
const prevButton = document.getElementById("prev");
const infoboxContent = document.getElementById("infobox-content");
let currrentActionIndex = 0;
const fitTime = 1000;
const fitActions = [
{ name: "Fit All Layer Bounds", action: () => fitAllBounds({ time: fitTime }) },
{ name: "Fit Network Layer Bounds", action: fitNetworkLayerBounds },
{ name: "Fit to Network Layer Items", action: () => fitNetworkLayerBounds(["CA", "NV"]) },
];
async function runFitAction(direction) {
currrentActionIndex = (currrentActionIndex + direction + fitActions.length) % fitActions.length;
infoboxContent.textContent = fitActions[currrentActionIndex].name;
const fitAction = fitActions[currrentActionIndex].action;
// disable controls
nextButton.disabled = true;
prevButton.disabled = true;
await fitAction();
// enable controls
nextButton.disabled = false;
prevButton.disabled = false;
}
nextButton.addEventListener("click", () => runFitAction(1));
prevButton.addEventListener("click", () => runFitAction(-1));
// call MapWeave's fitBounds method to fit the map the bounds of all added, visible layers
async function fitAllBounds({ time, padding } = {}) {
await mapweave.fitBounds({ time, padding });
}
// each layer has a getBounds method that returns the bounds of the data in that layer
// this can be used to fit the map to the bounds of specific data items
// in this case, we fit the map to the bounds of the network layer's data
// by passing an array of IDs to the getBounds method.
// if no IDs are passed, it will return the bounds of all data in the layer
async function fitNetworkLayerBounds(ids) {
const bounds = networkLayer.getBounds(ids);
// we can also add padding to give more space around the bounds
// this defaults to 1/8th of the viewport size, if not specified
await mapweave.fitBounds({ bounds, time: fitTime, padding: 100 });
}
export const mapweave = new MapWeave({
container: "mw",
options: {
// If no style is specified, MapWeave uses the MapLibre demo tiles by default.
style: "https://tiles.openfreemap.org/styles/dark",
},
});
const geoJsonLayer = new GeoJsonLayer({
data: mainlandUSOutlineGeoJson,
});
const networkLayer = new NetworkLayer({ data: networkData });
mapweave.layers([geoJsonLayer, networkLayer]);
fitAllBounds(); // initial fit to all boundsexport const mainlandUSOutlineGeoJson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-122.84, 49.000000000000114],
[-120, 49.000000000000114],
[-117.03121, 49],
[-116.04818, 49],
[-113, 49],
[-110.05, 49],
[-107.05, 49],
[-104.04826, 48.99986],
[-100.65, 49.000000000000114],
[-97.2287200000048, 49.0007],
[-95.15906950917206, 49],
[-95.15609, 49.38425],
[-94.81758, 49.38905],
[-94.64, 48.84],
[-94.32914, 48.67074],
[-93.63087, 48.60926],
[-92.61, 48.45],
[-91.64, 48.14],
[-90.83, 48.27],
[-89.6, 48.010000000000105],
[-89.27291744663665, 48.01980825458281],
[-88.37811418328671, 48.302917588893706],
[-87.43979262330028, 47.94],
[-86.46199083122826, 47.553338019392],
[-85.65236324740341, 47.22021881773051],
[-84.8760798815149, 46.90008331968238],
[-84.77923824739992, 46.63710195574902],
[-84.54374874544584, 46.538684190449146],
[-84.6049, 46.4396],
[-84.3367, 46.40877],
[-84.1421195136734, 46.51222585711571],
[-84.0918512641615, 46.27541860613826],
[-83.89076534700574, 46.116926988299014],
[-83.61613094759059, 46.116926988299014],
[-83.46955074739469, 45.994686387712534],
[-83.59285071484311, 45.81689362241252],
[-82.55092464875821, 45.34751658790543],
[-82.33776312543114, 44.44],
[-82.13764238150395, 43.57108755143997],
[-82.43, 42.98],
[-82.9, 42.43],
[-83.12, 42.08],
[-83.14199968131264, 41.975681057292874],
[-83.029810146807, 41.83279572200598],
[-82.69008928092023, 41.675105088867326],
[-82.4392777167916, 41.675105088867326],
[-81.27774654816716, 42.209025987306816],
[-80.24744767934794, 42.36619985612255],
[-78.93936214874375, 42.86361135514798],
[-78.92, 42.965],
[-79.01, 43.27],
[-79.17167355011186, 43.46633942318426],
[-78.72027991404235, 43.62508942318493],
[-77.7378850979577, 43.62905558936328],
[-76.82003414580558, 43.628784288093755],
[-76.5, 44.01845889375865],
[-76.375, 44.09631],
[-75.31821, 44.81645],
[-74.867, 45.00048],
[-73.34783, 45.00738],
[-71.50506, 45.0082],
[-71.405, 45.255],
[-71.08482, 45.30524000000014],
[-70.66, 45.46],
[-70.305, 45.915],
[-69.99997, 46.69307],
[-69.237216, 47.447781],
[-68.905, 47.185],
[-68.23444, 47.35486],
[-67.79046, 47.06636],
[-67.79134, 45.70281],
[-67.13741, 45.13753],
[-66.96466, 44.809700000000134],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405000000013],
[-70.64547563341102, 43.09023834896402],
[-70.81489, 42.8653],
[-70.825, 42.335],
[-70.495, 41.805],
[-70.08, 41.78],
[-70.185, 42.145],
[-69.88497, 41.92283],
[-69.96503, 41.63717000000014],
[-70.64, 41.475],
[-71.12039, 41.49445000000014],
[-71.86, 41.32],
[-72.295, 41.27],
[-72.87643, 41.22065],
[-73.71, 40.93110235165449],
[-72.24126, 41.119480000000124],
[-71.94499999999988, 40.93],
[-73.345, 40.63],
[-73.982, 40.628],
[-73.952325, 40.75075],
[-74.25671, 40.47351],
[-73.96244, 40.42763],
[-74.17838, 39.70926],
[-74.90604, 38.93954],
[-74.98041, 39.1964],
[-75.20002, 39.248450000000105],
[-75.52805, 39.4985],
[-75.32, 38.96],
[-75.07183476478986, 38.782032230179254],
[-75.05673, 38.40412],
[-75.37747, 38.01551],
[-75.94023, 37.21689],
[-76.03127, 37.2566],
[-75.72204999999985, 37.93705000000011],
[-76.23287, 38.319215],
[-76.35, 39.15],
[-76.542725, 38.717615],
[-76.32933, 38.08326],
[-76.98999793161352, 38.23999176691336],
[-76.30162, 37.917945],
[-76.25874, 36.9664],
[-75.9718, 36.89726],
[-75.8680399999999, 36.55125],
[-75.72749, 35.55074000000013],
[-76.36318, 34.80854000000011],
[-77.397635, 34.51201],
[-78.05496, 33.92547],
[-78.55434999999989, 33.86133000000012],
[-79.06067, 33.49395],
[-79.20357, 33.15839],
[-80.301325, 32.509355],
[-80.86498, 32.0333],
[-81.33629, 31.44049],
[-81.49042, 30.7299900000001],
[-81.31371, 30.03552],
[-80.98, 29.18000000000012],
[-80.535585, 28.47213],
[-80.52999999999986, 28.04],
[-80.05653928497759, 26.88000000000011],
[-80.088015, 26.205765],
[-80.13156, 25.816775],
[-80.38103, 25.20616],
[-80.68, 25.08],
[-81.17213, 25.201260000000104],
[-81.33, 25.64],
[-81.70999999999987, 25.87],
[-82.24, 26.730000000000132],
[-82.70515, 27.49504],
[-82.85526, 27.88624],
[-82.65, 28.550000000000125],
[-82.93, 29.1],
[-83.70959, 29.93656],
[-84.1, 30.09],
[-85.10882, 29.63615],
[-85.28784, 29.68612000000013],
[-85.7731, 30.15261],
[-86.4, 30.4],
[-87.53036, 30.27433],
[-88.41782, 30.3849],
[-89.18049, 30.31598],
[-89.5938311784198, 30.159994004836847],
[-89.413735, 29.89419],
[-89.43, 29.48864],
[-89.21767, 29.29108],
[-89.40823, 29.15961],
[-89.77928, 29.307140000000118],
[-90.15463, 29.11743],
[-90.880225, 29.148535],
[-91.626785, 29.677000000000135],
[-92.49906, 29.5523],
[-93.22637, 29.78375],
[-93.84842, 29.71363],
[-94.69, 29.480000000000132],
[-95.60026, 28.73863],
[-96.59404, 28.30748],
[-97.13999999999987, 27.83],
[-97.37, 27.38],
[-97.38, 26.69],
[-97.33, 26.21],
[-97.13999999999987, 25.87],
[-97.53, 25.84],
[-98.24, 26.06],
[-99.02, 26.37],
[-99.3, 26.84],
[-99.52, 27.54],
[-100.11, 28.110000000000127],
[-100.45584, 28.69612000000012],
[-100.9576, 29.380710000000136],
[-101.6624, 29.7793],
[-102.48, 29.76],
[-103.11, 28.97],
[-103.94, 29.27],
[-104.4569699999999, 29.57196],
[-104.70575, 30.12173],
[-105.03737, 30.64402],
[-105.63159, 31.08383],
[-106.1429, 31.39995],
[-106.50758999999988, 31.75452],
[-108.24, 31.754853718166373],
[-108.24194, 31.34222],
[-109.035, 31.341940000000136],
[-111.02361, 31.33472],
[-113.30498, 32.03914],
[-114.815, 32.52528],
[-114.72139, 32.72083],
[-115.99135, 32.61239000000012],
[-117.12775999999985, 32.53534],
[-117.29593769127393, 33.04622461520387],
[-117.944, 33.621236431201396],
[-118.41060227589753, 33.74090922312445],
[-118.51989482279976, 34.02778157757575],
[-119.081, 34.078],
[-119.43884064201671, 34.34847717828427],
[-120.36778, 34.44711],
[-120.62286, 34.60855],
[-120.74433, 35.15686000000011],
[-121.71457, 36.16153],
[-122.54747, 37.551760000000115],
[-122.51201, 37.78339000000011],
[-122.95319, 38.11371],
[-123.7272, 38.95166000000012],
[-123.86517, 39.76699],
[-124.39807, 40.3132],
[-124.17886, 41.142020000000116],
[-124.2137, 41.99964000000011],
[-124.53284, 42.7659900000001],
[-124.14214, 43.70838],
[-124.020535, 44.615895],
[-123.89893, 45.52341],
[-124.079635, 46.86475],
[-124.39567, 47.72017000000011],
[-124.68721008300781, 48.18443298339855],
[-124.56610107421875, 48.37971496582037],
[-123.12, 48.04],
[-122.58736, 47.096],
[-122.34, 47.36],
[-122.5, 48.18],
[-122.84, 49.000000000000114],
],
],
[
[
[-155.40214, 20.07975],
[-155.22452, 19.99302],
[-155.06226, 19.8591],
[-154.80741, 19.50871],
[-154.83147, 19.45328],
[-155.22217, 19.23972],
[-155.54211, 19.08348],
[-155.68817, 18.91619],
[-155.93665, 19.05939],
[-155.90806, 19.33888],
[-156.07347, 19.70294],
[-156.02368, 19.81422],
[-155.85008, 19.97729],
[-155.91907, 20.17395],
[-155.86108, 20.26721],
[-155.78505, 20.2487],
[-155.40214, 20.07975],
],
],
[
[
[-155.99566, 20.76404],
[-156.07926, 20.64397],
[-156.41445, 20.57241],
[-156.58673, 20.783],
[-156.70167, 20.8643],
[-156.71055, 20.92676],
[-156.61258, 21.01249],
[-156.25711, 20.91745],
[-155.99566, 20.76404],
],
],
[
[
[-156.75824, 21.17684],
[-156.78933, 21.06873],
[-157.32521, 21.09777],
[-157.25027, 21.21958],
[-156.75824, 21.17684],
],
],
[
[
[-158.0252, 21.71696],
[-157.94161, 21.65272],
[-157.65283, 21.32217],
[-157.70703, 21.26442],
[-157.7786, 21.27729],
[-158.12667, 21.31244],
[-158.2538, 21.53919],
[-158.29265, 21.57912],
[-158.0252, 21.71696],
],
],
[
[
[-159.36569, 22.21494],
[-159.34512, 21.982],
[-159.46372, 21.88299],
[-159.80051, 22.06533],
[-159.74877, 22.1382],
[-159.5962, 22.23618],
[-159.36569, 22.21494],
],
],
[
[
[-166.46779212142462, 60.384169826897754],
[-165.67442969466364, 60.29360687930625],
[-165.57916419173358, 59.90998688418753],
[-166.19277014876727, 59.75444082298899],
[-166.84833736882197, 59.941406155020985],
[-167.45527706609008, 60.21306915957936],
[-166.46779212142462, 60.384169826897754],
],
],
[
[
[-153.22872941792113, 57.96896841087248],
[-152.56479061583514, 57.901427313866996],
[-152.1411472239064, 57.591058661522],
[-153.00631405333692, 57.11584219016593],
[-154.0050902984581, 56.734676825581076],
[-154.51640275777004, 56.99274892844669],
[-154.67099280497118, 57.46119578717253],
[-153.7627795074415, 57.81657461204373],
[-153.22872941792113, 57.96896841087248],
],
],
[
[
[-140.98598761037601, 69.71199839952635],
[-140.986, 69.712],
[-140.9925, 66.00003],
[-140.99778, 60.30639],
[-140.013, 60.27682],
[-139.039, 60],
[-138.34089, 59.56211],
[-137.4525, 58.905],
[-136.47972, 59.46389],
[-135.47583, 59.78778],
[-134.945, 59.2705600000001],
[-134.27111, 58.86111],
[-133.35556, 58.41028],
[-132.73042, 57.69289],
[-131.70781, 56.55212],
[-130.00778, 55.91583],
[-129.98, 55.285],
[-130.53611, 54.80278],
[-130.53610895273684, 54.80275447679924],
[-130.5361101894673, 54.8027534043494],
[-131.08581823797215, 55.17890615500204],
[-131.9672114671423, 55.497775580459006],
[-132.2500107428595, 56.3699962428974],
[-133.53918108435641, 57.17888743756214],
[-134.07806292029608, 58.12306753196691],
[-135.0382110322791, 58.18771474876394],
[-136.62806230995471, 58.21220937767043],
[-137.800006279686, 58.49999542910376],
[-139.867787041413, 59.53776154238915],
[-140.825273817133, 59.727517401765056],
[-142.57444353556446, 60.08444651960497],
[-143.9588809948799, 59.999180406323376],
[-145.92555681682788, 60.45860972761426],
[-147.11437394914665, 60.884656073644635],
[-148.22430620012761, 60.67298940697714],
[-148.01806555885082, 59.97832896589364],
[-148.57082251686086, 59.914172675203304],
[-149.72785783587585, 59.70565827090553],
[-150.60824337461642, 59.368211168039466],
[-151.7163927886833, 59.15582103131993],
[-151.85943315326722, 59.744984035879554],
[-151.40971900124717, 60.72580272077937],
[-150.3469414947325, 61.03358755150987],
[-150.62111080625704, 61.2844249538544],
[-151.89583919981683, 60.727197984451266],
[-152.57832984109558, 60.061657212964235],
[-154.01917212625764, 59.35027944603428],
[-153.28751135965317, 58.86472768821977],
[-154.23249243875847, 58.14637360293051],
[-155.3074914215102, 57.727794501366304],
[-156.30833472392305, 57.422774359763594],
[-156.55609737854638, 56.97998484967064],
[-158.11721655986779, 56.46360809999419],
[-158.43332129619714, 55.99415355083852],
[-159.60332739971741, 55.56668610292013],
[-160.28971961163427, 55.643580634170576],
[-161.22304765525777, 55.364734605523495],
[-162.23776607974105, 55.02418691672011],
[-163.06944658104638, 54.68973704692712],
[-164.78556922102717, 54.40417308208214],
[-164.94222632552007, 54.57222483989534],
[-163.84833960676565, 55.03943146424609],
[-162.87000139061595, 55.34804311789321],
[-161.80417497459607, 55.89498647727038],
[-160.5636047027812, 56.00805451112501],
[-160.07055986228448, 56.41805532492873],
[-158.6844429189195, 57.01667511659787],
[-158.46109737855403, 57.21692129172885],
[-157.72277035218391, 57.57000051536306],
[-157.55027442119362, 58.328326321030204],
[-157.04167497457698, 58.91888458926172],
[-158.19473120830554, 58.61580231386978],
[-158.51721798402303, 58.78778148053732],
[-159.0586061269288, 58.42418610293163],
[-159.71166704001737, 58.93139028587632],
[-159.98128882550017, 58.572549140041644],
[-160.3552711659965, 59.07112335879361],
[-161.3550034251151, 58.670837714260756],
[-161.96889360252632, 58.67166453717738],
[-162.05498653872465, 59.26692536074745],
[-161.8741707021354, 59.63362132429057],
[-162.51805904849212, 59.98972361921386],
[-163.8183414378202, 59.79805573184336],
[-164.66221757714652, 60.26748444278263],
[-165.3463877024748, 60.50749563256238],
[-165.3508318756519, 61.073895168697504],
[-166.12137915755602, 61.50001902937623],
[-165.73445187077058, 62.074996853271784],
[-164.9191786367179, 62.63307648380794],
[-164.56250790103934, 63.14637848576302],
[-163.75333248599708, 63.21944896102377],
[-163.06722449445786, 63.05945872664802],
[-162.26055538638175, 63.54193573674115],
[-161.53444983624863, 63.455816962326764],
[-160.7725066803211, 63.766108100023246],
[-160.9583351308426, 64.22279857040274],
[-161.51806840721218, 64.40278758407527],
[-160.77777767641481, 64.78860382756642],
[-161.39192623598765, 64.77723501246231],
[-162.4530500966689, 64.55944468856819],
[-162.75778601789415, 64.33860545516876],
[-163.54639421288428, 64.5591604681905],
[-164.96082984114514, 64.44694509546883],
[-166.42528825586447, 64.68667206487066],
[-166.8450042389391, 65.08889557561452],
[-168.11056006576715, 65.66999705673675],
[-166.70527116602193, 66.08831777613938],
[-164.47470964257548, 66.5766600612975],
[-163.65251176659564, 66.5766600612975],
[-163.78860165103623, 66.07720734319668],
[-161.67777442121013, 66.11611969671242],
[-162.48971452538004, 66.73556509059512],
[-163.71971696679117, 67.11639455837008],
[-164.4309913808565, 67.61633820257777],
[-165.39028683170673, 68.04277212185025],
[-166.76444068099605, 68.35887685817966],
[-166.20470740462667, 68.88303091091615],
[-164.43081051334346, 68.91553538682774],
[-163.1686136546145, 69.37111481391287],
[-162.930566169262, 69.85806183539927],
[-161.90889726463556, 70.33332998318764],
[-160.93479651593367, 70.44768992784958],
[-159.03917578838713, 70.89164215766891],
[-158.11972286683394, 70.82472117785102],
[-156.58082455139808, 71.35776357694175],
[-155.06779029032427, 71.14777639432367],
[-154.3441652089412, 70.69640859647018],
[-153.9000062733926, 70.88998851183567],
[-152.21000606993528, 70.82999217394485],
[-152.27000240782613, 70.60000621202983],
[-150.73999243874448, 70.43001658800569],
[-149.7200030181675, 70.53001048449045],
[-147.61336157935705, 70.2140349392418],
[-145.68998980022533, 70.12000967068673],
[-144.9200109590764, 69.98999176704046],
[-143.58944618042523, 70.15251414659832],
[-142.07251034871348, 69.85193817817265],
[-140.98598752156073, 69.71199839952635],
[-140.98598761037601, 69.71199839952635],
],
],
[
[
[-171.73165686753944, 63.782515367275934],
[-171.1144335602453, 63.59219106714495],
[-170.4911124339407, 63.694975490973505],
[-169.6825054596536, 63.43111562769119],
[-168.6894394603007, 63.297506212000556],
[-168.77194088445466, 63.18859813094544],
[-169.5294398672051, 62.97693146427792],
[-170.29055620021595, 63.194437567794424],
[-170.67138566799093, 63.3758218451389],
[-171.55306311753873, 63.317789211675105],
[-171.79111060289122, 63.40584585230046],
[-171.73165686753944, 63.782515367275934],
],
],
],
},
properties: {
color: "rgba(0,255,0,0.1)",
border: {
color: "rgba(0,255,0,1)",
width: 1,
},
},
},
],
};
const stateCapitals = [
["AL", 32.361538, -86.279118],
["AZ", 33.448457, -112.073844],
["AR", 34.736009, -92.331122],
["CA", 38.555605, -121.468926],
["CO", 39.7391667, -104.984167],
["CT", 41.767, -72.677],
["DE", 39.161921, -75.526755],
["FL", 30.4518, -84.27277],
["GA", 33.76, -84.39],
["ID", 43.613739, -116.237651],
["IL", 39.78325, -89.650373],
["IN", 39.790942, -86.147685],
["IA", 41.590939, -93.620866],
["KS", 39.04, -95.69],
["KY", 38.197274, -84.86311],
["LA", 30.45809, -91.140229],
["ME", 44.323535, -69.765261],
["MD", 38.972945, -76.501157],
["MA", 42.2352, -71.0275],
["MI", 42.7335, -84.5467],
["MN", 44.95, -93.094],
["MS", 32.32, -90.207],
["MO", 38.572954, -92.189283],
["MT", 46.595805, -112.027031],
["NE", 40.809868, -96.675345],
["NV", 39.160949, -119.753877],
["NH", 43.220093, -71.549127],
["NJ", 40.221741, -74.756138],
["NM", 35.667231, -105.964575],
["NY", 42.659829, -73.781339],
["NC", 35.771, -78.638],
["ND", 48.813343, -100.779004],
["OH", 39.962245, -83.000647],
["OK", 35.482309, -97.534994],
["OR", 44.931109, -123.029159],
["PA", 40.269789, -76.875613],
["RI", 41.82355, -71.422132],
["SC", 34, -81.035],
["SD", 44.367966, -100.336378],
["TN", 36.165, -86.784],
["TX", 30.266667, -97.75],
["UT", 40.7547, -111.892622],
["VT", 44.26639, -72.57194],
["VA", 37.54, -77.46],
["WA", 47.042418, -122.893077],
["WV", 38.349497, -81.633294],
["WI", 43.074722, -89.384444],
["WY", 41.145548, -104.802042],
];
const links = [
"AL-FL",
"AL-GA",
"AL-LA",
"AL-MS",
"AR-LA",
"AR-MO",
"AR-MS",
"AR-OK",
"AR-TN",
"AZ-NM",
"AZ-NV",
"AZ-UT",
"CA-NV",
"CA-OR",
"CO-NE",
"CO-NM",
"CO-OK",
"CO-UT",
"CO-WY",
"CT-MA",
"CT-NJ",
"CT-NY",
"CT-RI",
"DE-MD",
"DE-NJ",
"DE-PA",
"DE-VA",
"FL-GA",
"FL-SC",
"GA-SC",
"GA-TN",
"GA-WV",
"IA-KS",
"IA-MN",
"IA-MO",
"IA-NE",
"IA-WI",
"ID-MT",
"ID-NV",
"ID-OR",
"ID-UT",
"ID-WA",
"IL-IN",
"IL-MO",
"IL-WI",
"IN-KY",
"IN-MI",
"IN-OH",
"IN-TN",
"KS-MO",
"KS-NE",
"KS-OK",
"KY-OH",
"KY-TN",
"KY-WV",
"LA-MS",
"LA-TX",
"MA-ME",
"MA-NH",
"MA-RI",
"MD-PA",
"MD-VA",
"ME-NH",
"ME-VT",
"MI-OH",
"MI-PA",
"MI-WI",
"MN-ND",
"MN-NE",
"MN-WI",
"MO-OK",
"MO-TN",
"MS-TN",
"MT-ND",
"MT-UT",
"MT-WA",
"MT-WY",
"NC-SC",
"NC-VA",
"NC-WV",
"ND-SD",
"ND-WY",
"NE-SD",
"NH-NY",
"NH-VT",
"NJ-NY",
"NJ-PA",
"NM-OK",
"NM-TX",
"NV-OR",
"NV-UT",
"NY-PA",
"NY-VT",
"OH-PA",
"OH-WV",
"OK-TX",
"OR-WA",
"PA-WV",
"SD-WY",
"UT-WY",
"VA-WV",
];
const nodeColor = "rgba(200,200,200, 1)";
const linkColor = "rgba(200, 200, 200, 0.5)";
const size = 6;
const width = 2;
export const networkData = Object.fromEntries([
...stateCapitals.map(([id, latitude, longitude]) => [
id,
{ type: "node", latitude, longitude, color: nodeColor, size },
]),
...links.map((id) => {
const [id1, id2] = id.split("-");
return [id, { type: "link", id, id1, id2, color: linkColor, width }];
}),
]);<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/mw/css/examples.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="mw">
<div class="example__infobox fitbounds-controls">
<button id="prev">
<img src="/public/images/icons/ci/left-chevron.svg" alt="Previous" />
</button>
<button id="next">
<img src="/public/images/icons/ci/left-chevron.svg" alt="Next" />
</button>
<div class="divider"></div>
<pre id="infobox-content">Fit All Layer Bounds</pre>
</div>
</div>
<script type="module" src="./code.js"></script>
</body>
</html>#mw {
height: 100vh;
position: relative;
overflow: hidden;
}
body {
margin: 0;
}
.fitbounds-controls {
position: absolute;
margin: 5px;
display: flex;
z-index: 1;
}
.fitbounds-controls img {
filter: brightness(0) invert(1);
}
#next img {
transform: rotate(180deg);
}
.fitbounds-controls button {
background: none;
border: none;
cursor: pointer;
}
/* Dim the controls when an action is being performed */
.fitbounds-controls button:disabled {
filter: brightness(0.5) invert(1);
}
.fitbounds-controls .divider {
width: 1px;
background-color: #ccc;
align-self: stretch;
margin: 0 10px;
}
.fitbounds-controls pre {
margin: 0;
color: #fff;
}import React, { useMemo, useRef, useState, useCallback } from "react";
import { createRoot } from "react-dom/client";
import { MapWeave } from "mapweave/react/maplibre";
import { GeoJsonLayer, NetworkLayer } from "mapweave/react/layers";
import { mainlandUSOutlineGeoJson, networkData } from "./data";
const fitTime = 1000;
function DemoControls({ next, previous, pending, actions, currentActionIndex }) {
return (
<>
<div className="example__infobox fitbounds-controls">
<button id="prev" onClick={previous} disabled={pending}>
<img src="/public/images/icons/ci/left-chevron.svg" alt="Previous" />
</button>
<button id="next" onClick={next} disabled={pending}>
<img src="/public/images/icons/ci/left-chevron.svg" alt="Next" />
</button>
<div className="divider" />
<pre id="infobox-content">{actions[currentActionIndex].name}</pre>
</div>
</>
);
}
function FitBoundsDemo() {
const mapweaveRef = useRef(null);
const networkLayerRef = useRef(null);
const [currentActionIndex, setCurrentActionIndex] = useState(0);
const [pending, setPending] = useState(false);
const actions = useMemo(
() => [
// call MapWeave's fitBounds method to fit the map the bounds of all added, visible layers
{
name: "Fit All Layer Bounds",
action: async () => {
if (!mapweaveRef.current) return;
await mapweaveRef.current.fitBounds({ time: fitTime });
},
},
// each layer has a getBounds method that returns the bounds of the data in that layer
// this can be used to fit the map to the bounds of specific data items
// in this case, we fit the map to the bounds of the network layer's data
{
name: "Fit Network Layer Bounds",
action: async () => {
if (!mapweaveRef.current || !networkLayerRef.current) return;
const bounds = networkLayerRef.current.getBounds();
await mapweaveRef.current.fitBounds({ bounds, time: fitTime, padding: 100 });
},
},
// similar to above, we fit to the network layer, but this time provide item IDs
// this allows us to focus on a specific subset of the data
{
name: "Fit to Network Layer Items",
action: async () => {
if (!mapweaveRef.current || !networkLayerRef.current) return;
const bounds = networkLayerRef.current.getBounds(["CA", "NV"]);
await mapweaveRef.current.fitBounds({ bounds, time: fitTime, padding: 100 });
},
},
],
[]
);
const runFitAction = useCallback(
async (direction) => {
const nextIndex = (currentActionIndex + direction + actions.length) % actions.length;
setCurrentActionIndex(nextIndex);
setPending(true);
try {
await actions[nextIndex].action();
} finally {
setPending(false);
}
},
[actions, currentActionIndex]
);
return (
<>
<DemoControls
next={() => runFitAction(1)}
previous={() => runFitAction(-1)}
pending={pending}
actions={actions}
currentActionIndex={currentActionIndex}
runFitAction={runFitAction}
/>
{/**
* By default, MapWeave will fit the map to the bounds of all added, visible layers.
* to change this behavior, set the `fitOnFirstLoad` prop on the MapWeave component to false
*/}
<MapWeave
options={{ style: "https://tiles.openfreemap.org/styles/dark", fitOnFirstLoad: true }}
ref={mapweaveRef}
>
<GeoJsonLayer data={mainlandUSOutlineGeoJson} />
<NetworkLayer data={networkData} ref={networkLayerRef} />
</MapWeave>
</>
);
}
const root = createRoot(document.getElementById("mw"));
root.render(<FitBoundsDemo />);export const mainlandUSOutlineGeoJson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-122.84, 49.000000000000114],
[-120, 49.000000000000114],
[-117.03121, 49],
[-116.04818, 49],
[-113, 49],
[-110.05, 49],
[-107.05, 49],
[-104.04826, 48.99986],
[-100.65, 49.000000000000114],
[-97.2287200000048, 49.0007],
[-95.15906950917206, 49],
[-95.15609, 49.38425],
[-94.81758, 49.38905],
[-94.64, 48.84],
[-94.32914, 48.67074],
[-93.63087, 48.60926],
[-92.61, 48.45],
[-91.64, 48.14],
[-90.83, 48.27],
[-89.6, 48.010000000000105],
[-89.27291744663665, 48.01980825458281],
[-88.37811418328671, 48.302917588893706],
[-87.43979262330028, 47.94],
[-86.46199083122826, 47.553338019392],
[-85.65236324740341, 47.22021881773051],
[-84.8760798815149, 46.90008331968238],
[-84.77923824739992, 46.63710195574902],
[-84.54374874544584, 46.538684190449146],
[-84.6049, 46.4396],
[-84.3367, 46.40877],
[-84.1421195136734, 46.51222585711571],
[-84.0918512641615, 46.27541860613826],
[-83.89076534700574, 46.116926988299014],
[-83.61613094759059, 46.116926988299014],
[-83.46955074739469, 45.994686387712534],
[-83.59285071484311, 45.81689362241252],
[-82.55092464875821, 45.34751658790543],
[-82.33776312543114, 44.44],
[-82.13764238150395, 43.57108755143997],
[-82.43, 42.98],
[-82.9, 42.43],
[-83.12, 42.08],
[-83.14199968131264, 41.975681057292874],
[-83.029810146807, 41.83279572200598],
[-82.69008928092023, 41.675105088867326],
[-82.4392777167916, 41.675105088867326],
[-81.27774654816716, 42.209025987306816],
[-80.24744767934794, 42.36619985612255],
[-78.93936214874375, 42.86361135514798],
[-78.92, 42.965],
[-79.01, 43.27],
[-79.17167355011186, 43.46633942318426],
[-78.72027991404235, 43.62508942318493],
[-77.7378850979577, 43.62905558936328],
[-76.82003414580558, 43.628784288093755],
[-76.5, 44.01845889375865],
[-76.375, 44.09631],
[-75.31821, 44.81645],
[-74.867, 45.00048],
[-73.34783, 45.00738],
[-71.50506, 45.0082],
[-71.405, 45.255],
[-71.08482, 45.30524000000014],
[-70.66, 45.46],
[-70.305, 45.915],
[-69.99997, 46.69307],
[-69.237216, 47.447781],
[-68.905, 47.185],
[-68.23444, 47.35486],
[-67.79046, 47.06636],
[-67.79134, 45.70281],
[-67.13741, 45.13753],
[-66.96466, 44.809700000000134],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405000000013],
[-70.64547563341102, 43.09023834896402],
[-70.81489, 42.8653],
[-70.825, 42.335],
[-70.495, 41.805],
[-70.08, 41.78],
[-70.185, 42.145],
[-69.88497, 41.92283],
[-69.96503, 41.63717000000014],
[-70.64, 41.475],
[-71.12039, 41.49445000000014],
[-71.86, 41.32],
[-72.295, 41.27],
[-72.87643, 41.22065],
[-73.71, 40.93110235165449],
[-72.24126, 41.119480000000124],
[-71.94499999999988, 40.93],
[-73.345, 40.63],
[-73.982, 40.628],
[-73.952325, 40.75075],
[-74.25671, 40.47351],
[-73.96244, 40.42763],
[-74.17838, 39.70926],
[-74.90604, 38.93954],
[-74.98041, 39.1964],
[-75.20002, 39.248450000000105],
[-75.52805, 39.4985],
[-75.32, 38.96],
[-75.07183476478986, 38.782032230179254],
[-75.05673, 38.40412],
[-75.37747, 38.01551],
[-75.94023, 37.21689],
[-76.03127, 37.2566],
[-75.72204999999985, 37.93705000000011],
[-76.23287, 38.319215],
[-76.35, 39.15],
[-76.542725, 38.717615],
[-76.32933, 38.08326],
[-76.98999793161352, 38.23999176691336],
[-76.30162, 37.917945],
[-76.25874, 36.9664],
[-75.9718, 36.89726],
[-75.8680399999999, 36.55125],
[-75.72749, 35.55074000000013],
[-76.36318, 34.80854000000011],
[-77.397635, 34.51201],
[-78.05496, 33.92547],
[-78.55434999999989, 33.86133000000012],
[-79.06067, 33.49395],
[-79.20357, 33.15839],
[-80.301325, 32.509355],
[-80.86498, 32.0333],
[-81.33629, 31.44049],
[-81.49042, 30.7299900000001],
[-81.31371, 30.03552],
[-80.98, 29.18000000000012],
[-80.535585, 28.47213],
[-80.52999999999986, 28.04],
[-80.05653928497759, 26.88000000000011],
[-80.088015, 26.205765],
[-80.13156, 25.816775],
[-80.38103, 25.20616],
[-80.68, 25.08],
[-81.17213, 25.201260000000104],
[-81.33, 25.64],
[-81.70999999999987, 25.87],
[-82.24, 26.730000000000132],
[-82.70515, 27.49504],
[-82.85526, 27.88624],
[-82.65, 28.550000000000125],
[-82.93, 29.1],
[-83.70959, 29.93656],
[-84.1, 30.09],
[-85.10882, 29.63615],
[-85.28784, 29.68612000000013],
[-85.7731, 30.15261],
[-86.4, 30.4],
[-87.53036, 30.27433],
[-88.41782, 30.3849],
[-89.18049, 30.31598],
[-89.5938311784198, 30.159994004836847],
[-89.413735, 29.89419],
[-89.43, 29.48864],
[-89.21767, 29.29108],
[-89.40823, 29.15961],
[-89.77928, 29.307140000000118],
[-90.15463, 29.11743],
[-90.880225, 29.148535],
[-91.626785, 29.677000000000135],
[-92.49906, 29.5523],
[-93.22637, 29.78375],
[-93.84842, 29.71363],
[-94.69, 29.480000000000132],
[-95.60026, 28.73863],
[-96.59404, 28.30748],
[-97.13999999999987, 27.83],
[-97.37, 27.38],
[-97.38, 26.69],
[-97.33, 26.21],
[-97.13999999999987, 25.87],
[-97.53, 25.84],
[-98.24, 26.06],
[-99.02, 26.37],
[-99.3, 26.84],
[-99.52, 27.54],
[-100.11, 28.110000000000127],
[-100.45584, 28.69612000000012],
[-100.9576, 29.380710000000136],
[-101.6624, 29.7793],
[-102.48, 29.76],
[-103.11, 28.97],
[-103.94, 29.27],
[-104.4569699999999, 29.57196],
[-104.70575, 30.12173],
[-105.03737, 30.64402],
[-105.63159, 31.08383],
[-106.1429, 31.39995],
[-106.50758999999988, 31.75452],
[-108.24, 31.754853718166373],
[-108.24194, 31.34222],
[-109.035, 31.341940000000136],
[-111.02361, 31.33472],
[-113.30498, 32.03914],
[-114.815, 32.52528],
[-114.72139, 32.72083],
[-115.99135, 32.61239000000012],
[-117.12775999999985, 32.53534],
[-117.29593769127393, 33.04622461520387],
[-117.944, 33.621236431201396],
[-118.41060227589753, 33.74090922312445],
[-118.51989482279976, 34.02778157757575],
[-119.081, 34.078],
[-119.43884064201671, 34.34847717828427],
[-120.36778, 34.44711],
[-120.62286, 34.60855],
[-120.74433, 35.15686000000011],
[-121.71457, 36.16153],
[-122.54747, 37.551760000000115],
[-122.51201, 37.78339000000011],
[-122.95319, 38.11371],
[-123.7272, 38.95166000000012],
[-123.86517, 39.76699],
[-124.39807, 40.3132],
[-124.17886, 41.142020000000116],
[-124.2137, 41.99964000000011],
[-124.53284, 42.7659900000001],
[-124.14214, 43.70838],
[-124.020535, 44.615895],
[-123.89893, 45.52341],
[-124.079635, 46.86475],
[-124.39567, 47.72017000000011],
[-124.68721008300781, 48.18443298339855],
[-124.56610107421875, 48.37971496582037],
[-123.12, 48.04],
[-122.58736, 47.096],
[-122.34, 47.36],
[-122.5, 48.18],
[-122.84, 49.000000000000114],
],
],
[
[
[-155.40214, 20.07975],
[-155.22452, 19.99302],
[-155.06226, 19.8591],
[-154.80741, 19.50871],
[-154.83147, 19.45328],
[-155.22217, 19.23972],
[-155.54211, 19.08348],
[-155.68817, 18.91619],
[-155.93665, 19.05939],
[-155.90806, 19.33888],
[-156.07347, 19.70294],
[-156.02368, 19.81422],
[-155.85008, 19.97729],
[-155.91907, 20.17395],
[-155.86108, 20.26721],
[-155.78505, 20.2487],
[-155.40214, 20.07975],
],
],
[
[
[-155.99566, 20.76404],
[-156.07926, 20.64397],
[-156.41445, 20.57241],
[-156.58673, 20.783],
[-156.70167, 20.8643],
[-156.71055, 20.92676],
[-156.61258, 21.01249],
[-156.25711, 20.91745],
[-155.99566, 20.76404],
],
],
[
[
[-156.75824, 21.17684],
[-156.78933, 21.06873],
[-157.32521, 21.09777],
[-157.25027, 21.21958],
[-156.75824, 21.17684],
],
],
[
[
[-158.0252, 21.71696],
[-157.94161, 21.65272],
[-157.65283, 21.32217],
[-157.70703, 21.26442],
[-157.7786, 21.27729],
[-158.12667, 21.31244],
[-158.2538, 21.53919],
[-158.29265, 21.57912],
[-158.0252, 21.71696],
],
],
[
[
[-159.36569, 22.21494],
[-159.34512, 21.982],
[-159.46372, 21.88299],
[-159.80051, 22.06533],
[-159.74877, 22.1382],
[-159.5962, 22.23618],
[-159.36569, 22.21494],
],
],
[
[
[-166.46779212142462, 60.384169826897754],
[-165.67442969466364, 60.29360687930625],
[-165.57916419173358, 59.90998688418753],
[-166.19277014876727, 59.75444082298899],
[-166.84833736882197, 59.941406155020985],
[-167.45527706609008, 60.21306915957936],
[-166.46779212142462, 60.384169826897754],
],
],
[
[
[-153.22872941792113, 57.96896841087248],
[-152.56479061583514, 57.901427313866996],
[-152.1411472239064, 57.591058661522],
[-153.00631405333692, 57.11584219016593],
[-154.0050902984581, 56.734676825581076],
[-154.51640275777004, 56.99274892844669],
[-154.67099280497118, 57.46119578717253],
[-153.7627795074415, 57.81657461204373],
[-153.22872941792113, 57.96896841087248],
],
],
[
[
[-140.98598761037601, 69.71199839952635],
[-140.986, 69.712],
[-140.9925, 66.00003],
[-140.99778, 60.30639],
[-140.013, 60.27682],
[-139.039, 60],
[-138.34089, 59.56211],
[-137.4525, 58.905],
[-136.47972, 59.46389],
[-135.47583, 59.78778],
[-134.945, 59.2705600000001],
[-134.27111, 58.86111],
[-133.35556, 58.41028],
[-132.73042, 57.69289],
[-131.70781, 56.55212],
[-130.00778, 55.91583],
[-129.98, 55.285],
[-130.53611, 54.80278],
[-130.53610895273684, 54.80275447679924],
[-130.5361101894673, 54.8027534043494],
[-131.08581823797215, 55.17890615500204],
[-131.9672114671423, 55.497775580459006],
[-132.2500107428595, 56.3699962428974],
[-133.53918108435641, 57.17888743756214],
[-134.07806292029608, 58.12306753196691],
[-135.0382110322791, 58.18771474876394],
[-136.62806230995471, 58.21220937767043],
[-137.800006279686, 58.49999542910376],
[-139.867787041413, 59.53776154238915],
[-140.825273817133, 59.727517401765056],
[-142.57444353556446, 60.08444651960497],
[-143.9588809948799, 59.999180406323376],
[-145.92555681682788, 60.45860972761426],
[-147.11437394914665, 60.884656073644635],
[-148.22430620012761, 60.67298940697714],
[-148.01806555885082, 59.97832896589364],
[-148.57082251686086, 59.914172675203304],
[-149.72785783587585, 59.70565827090553],
[-150.60824337461642, 59.368211168039466],
[-151.7163927886833, 59.15582103131993],
[-151.85943315326722, 59.744984035879554],
[-151.40971900124717, 60.72580272077937],
[-150.3469414947325, 61.03358755150987],
[-150.62111080625704, 61.2844249538544],
[-151.89583919981683, 60.727197984451266],
[-152.57832984109558, 60.061657212964235],
[-154.01917212625764, 59.35027944603428],
[-153.28751135965317, 58.86472768821977],
[-154.23249243875847, 58.14637360293051],
[-155.3074914215102, 57.727794501366304],
[-156.30833472392305, 57.422774359763594],
[-156.55609737854638, 56.97998484967064],
[-158.11721655986779, 56.46360809999419],
[-158.43332129619714, 55.99415355083852],
[-159.60332739971741, 55.56668610292013],
[-160.28971961163427, 55.643580634170576],
[-161.22304765525777, 55.364734605523495],
[-162.23776607974105, 55.02418691672011],
[-163.06944658104638, 54.68973704692712],
[-164.78556922102717, 54.40417308208214],
[-164.94222632552007, 54.57222483989534],
[-163.84833960676565, 55.03943146424609],
[-162.87000139061595, 55.34804311789321],
[-161.80417497459607, 55.89498647727038],
[-160.5636047027812, 56.00805451112501],
[-160.07055986228448, 56.41805532492873],
[-158.6844429189195, 57.01667511659787],
[-158.46109737855403, 57.21692129172885],
[-157.72277035218391, 57.57000051536306],
[-157.55027442119362, 58.328326321030204],
[-157.04167497457698, 58.91888458926172],
[-158.19473120830554, 58.61580231386978],
[-158.51721798402303, 58.78778148053732],
[-159.0586061269288, 58.42418610293163],
[-159.71166704001737, 58.93139028587632],
[-159.98128882550017, 58.572549140041644],
[-160.3552711659965, 59.07112335879361],
[-161.3550034251151, 58.670837714260756],
[-161.96889360252632, 58.67166453717738],
[-162.05498653872465, 59.26692536074745],
[-161.8741707021354, 59.63362132429057],
[-162.51805904849212, 59.98972361921386],
[-163.8183414378202, 59.79805573184336],
[-164.66221757714652, 60.26748444278263],
[-165.3463877024748, 60.50749563256238],
[-165.3508318756519, 61.073895168697504],
[-166.12137915755602, 61.50001902937623],
[-165.73445187077058, 62.074996853271784],
[-164.9191786367179, 62.63307648380794],
[-164.56250790103934, 63.14637848576302],
[-163.75333248599708, 63.21944896102377],
[-163.06722449445786, 63.05945872664802],
[-162.26055538638175, 63.54193573674115],
[-161.53444983624863, 63.455816962326764],
[-160.7725066803211, 63.766108100023246],
[-160.9583351308426, 64.22279857040274],
[-161.51806840721218, 64.40278758407527],
[-160.77777767641481, 64.78860382756642],
[-161.39192623598765, 64.77723501246231],
[-162.4530500966689, 64.55944468856819],
[-162.75778601789415, 64.33860545516876],
[-163.54639421288428, 64.5591604681905],
[-164.96082984114514, 64.44694509546883],
[-166.42528825586447, 64.68667206487066],
[-166.8450042389391, 65.08889557561452],
[-168.11056006576715, 65.66999705673675],
[-166.70527116602193, 66.08831777613938],
[-164.47470964257548, 66.5766600612975],
[-163.65251176659564, 66.5766600612975],
[-163.78860165103623, 66.07720734319668],
[-161.67777442121013, 66.11611969671242],
[-162.48971452538004, 66.73556509059512],
[-163.71971696679117, 67.11639455837008],
[-164.4309913808565, 67.61633820257777],
[-165.39028683170673, 68.04277212185025],
[-166.76444068099605, 68.35887685817966],
[-166.20470740462667, 68.88303091091615],
[-164.43081051334346, 68.91553538682774],
[-163.1686136546145, 69.37111481391287],
[-162.930566169262, 69.85806183539927],
[-161.90889726463556, 70.33332998318764],
[-160.93479651593367, 70.44768992784958],
[-159.03917578838713, 70.89164215766891],
[-158.11972286683394, 70.82472117785102],
[-156.58082455139808, 71.35776357694175],
[-155.06779029032427, 71.14777639432367],
[-154.3441652089412, 70.69640859647018],
[-153.9000062733926, 70.88998851183567],
[-152.21000606993528, 70.82999217394485],
[-152.27000240782613, 70.60000621202983],
[-150.73999243874448, 70.43001658800569],
[-149.7200030181675, 70.53001048449045],
[-147.61336157935705, 70.2140349392418],
[-145.68998980022533, 70.12000967068673],
[-144.9200109590764, 69.98999176704046],
[-143.58944618042523, 70.15251414659832],
[-142.07251034871348, 69.85193817817265],
[-140.98598752156073, 69.71199839952635],
[-140.98598761037601, 69.71199839952635],
],
],
[
[
[-171.73165686753944, 63.782515367275934],
[-171.1144335602453, 63.59219106714495],
[-170.4911124339407, 63.694975490973505],
[-169.6825054596536, 63.43111562769119],
[-168.6894394603007, 63.297506212000556],
[-168.77194088445466, 63.18859813094544],
[-169.5294398672051, 62.97693146427792],
[-170.29055620021595, 63.194437567794424],
[-170.67138566799093, 63.3758218451389],
[-171.55306311753873, 63.317789211675105],
[-171.79111060289122, 63.40584585230046],
[-171.73165686753944, 63.782515367275934],
],
],
],
},
properties: {
color: "rgba(0,255,0,0.1)",
border: {
color: "rgba(0,255,0,1)",
width: 1,
},
},
},
],
};
const stateCapitals = [
["AL", 32.361538, -86.279118],
["AZ", 33.448457, -112.073844],
["AR", 34.736009, -92.331122],
["CA", 38.555605, -121.468926],
["CO", 39.7391667, -104.984167],
["CT", 41.767, -72.677],
["DE", 39.161921, -75.526755],
["FL", 30.4518, -84.27277],
["GA", 33.76, -84.39],
["ID", 43.613739, -116.237651],
["IL", 39.78325, -89.650373],
["IN", 39.790942, -86.147685],
["IA", 41.590939, -93.620866],
["KS", 39.04, -95.69],
["KY", 38.197274, -84.86311],
["LA", 30.45809, -91.140229],
["ME", 44.323535, -69.765261],
["MD", 38.972945, -76.501157],
["MA", 42.2352, -71.0275],
["MI", 42.7335, -84.5467],
["MN", 44.95, -93.094],
["MS", 32.32, -90.207],
["MO", 38.572954, -92.189283],
["MT", 46.595805, -112.027031],
["NE", 40.809868, -96.675345],
["NV", 39.160949, -119.753877],
["NH", 43.220093, -71.549127],
["NJ", 40.221741, -74.756138],
["NM", 35.667231, -105.964575],
["NY", 42.659829, -73.781339],
["NC", 35.771, -78.638],
["ND", 48.813343, -100.779004],
["OH", 39.962245, -83.000647],
["OK", 35.482309, -97.534994],
["OR", 44.931109, -123.029159],
["PA", 40.269789, -76.875613],
["RI", 41.82355, -71.422132],
["SC", 34, -81.035],
["SD", 44.367966, -100.336378],
["TN", 36.165, -86.784],
["TX", 30.266667, -97.75],
["UT", 40.7547, -111.892622],
["VT", 44.26639, -72.57194],
["VA", 37.54, -77.46],
["WA", 47.042418, -122.893077],
["WV", 38.349497, -81.633294],
["WI", 43.074722, -89.384444],
["WY", 41.145548, -104.802042],
];
const links = [
"AL-FL",
"AL-GA",
"AL-LA",
"AL-MS",
"AR-LA",
"AR-MO",
"AR-MS",
"AR-OK",
"AR-TN",
"AZ-NM",
"AZ-NV",
"AZ-UT",
"CA-NV",
"CA-OR",
"CO-NE",
"CO-NM",
"CO-OK",
"CO-UT",
"CO-WY",
"CT-MA",
"CT-NJ",
"CT-NY",
"CT-RI",
"DE-MD",
"DE-NJ",
"DE-PA",
"DE-VA",
"FL-GA",
"FL-SC",
"GA-SC",
"GA-TN",
"GA-WV",
"IA-KS",
"IA-MN",
"IA-MO",
"IA-NE",
"IA-WI",
"ID-MT",
"ID-NV",
"ID-OR",
"ID-UT",
"ID-WA",
"IL-IN",
"IL-MO",
"IL-WI",
"IN-KY",
"IN-MI",
"IN-OH",
"IN-TN",
"KS-MO",
"KS-NE",
"KS-OK",
"KY-OH",
"KY-TN",
"KY-WV",
"LA-MS",
"LA-TX",
"MA-ME",
"MA-NH",
"MA-RI",
"MD-PA",
"MD-VA",
"ME-NH",
"ME-VT",
"MI-OH",
"MI-PA",
"MI-WI",
"MN-ND",
"MN-NE",
"MN-WI",
"MO-OK",
"MO-TN",
"MS-TN",
"MT-ND",
"MT-UT",
"MT-WA",
"MT-WY",
"NC-SC",
"NC-VA",
"NC-WV",
"ND-SD",
"ND-WY",
"NE-SD",
"NH-NY",
"NH-VT",
"NJ-NY",
"NJ-PA",
"NM-OK",
"NM-TX",
"NV-OR",
"NV-UT",
"NY-PA",
"NY-VT",
"OH-PA",
"OH-WV",
"OK-TX",
"OR-WA",
"PA-WV",
"SD-WY",
"UT-WY",
"VA-WV",
];
const nodeColor = "rgba(200,200,200, 1)";
const linkColor = "rgba(200, 200, 200, 0.5)";
const size = 6;
const width = 2;
export const networkData = Object.fromEntries([
...stateCapitals.map(([id, latitude, longitude]) => [
id,
{ type: "node", latitude, longitude, color: nodeColor, size },
]),
...links.map((id) => {
const [id1, id2] = id.split("-");
return [id, { type: "link", id, id1, id2, color: linkColor, width }];
}),
]);<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/mw/css/examples.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="mw"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>#mw {
height: 100vh;
position: relative;
overflow: hidden;
}
body {
margin: 0;
}
.fitbounds-controls {
position: absolute;
margin: 5px;
display: flex;
z-index: 1;
}
.fitbounds-controls img {
filter: brightness(0) invert(1);
}
#next img {
transform: rotate(180deg);
}
.fitbounds-controls button {
background: none;
border: none;
cursor: pointer;
}
/* Dim the controls when an action is being performed */
.fitbounds-controls button:disabled {
filter: brightness(0.5) invert(1);
}
.fitbounds-controls .divider {
width: 1px;
background-color: #ccc;
align-self: stretch;
margin: 0 10px;
}
.fitbounds-controls pre {
margin: 0;
color: #fff;
}