<!-- ============================================================
IRO — INTERACTIVE UNITED STATES MAP
Squarespace Code Block
============================================================ -->
<div id="iro-states-map">
<style>
#iro-states-map {
--iro-blue: #2774AE;
--iro-blue-dark: #145A8D;
--iro-blue-light: #DCEAF5;
--iro-blue-pale: #F3F8FC;
--iro-yellow: #FFD100;
--iro-text: #173F5F;
--iro-gray: #AFC4D4;
--iro-white: #FFFFFF;
font-family: inherit;
color: var(--iro-text);
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
#iro-states-map *,
#iro-states-map *::before,
#iro-states-map *::after {
box-sizing: border-box;
}
/* ---------- HEADER ---------- */
#iro-states-map .iro-map-header {
text-align: center;
margin-bottom: 35px;
}
#iro-states-map .iro-eyebrow {
color: var(--iro-blue);
font-size: 18px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
#iro-states-map h2 {
margin: 0;
color: var(--iro-blue-dark);
font-size: clamp(32px, 5vw, 64px);
line-height: 2.25;
font-weight: 750;
}
#iro-states-map .iro-subtitle {
max-width: 680px;
margin: 16px auto 0;
color: #52718A;
font-size: 18px;
line-height: 1.6;
}
/* ---------- MAP AREA ---------- */
#iro-states-map .iro-map-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 35px;
align-items: center;
}
#iro-states-map .iro-map-container {
position: relative;
background: linear-gradient(
145deg,
#F8FBFD 0%,
#FFFFFF 100%
);
border-radius: 24px;
padding: 25px;
border: 1px solid #D9E8F2;
box-shadow: 0 10px 35px rgba(39, 116, 174, 0.08);
}
#iro-states-map svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* ---------- STATE COLORS ---------- */
#iro-states-map .state {
fill: var(--iro-blue-light);
stroke: #FFFFFF;
stroke-width: 1.4;
stroke-linejoin: round;
cursor: pointer;
transition:
fill 0.18s ease,
stroke 0.18s ease,
filter 0.18s ease;
}
#iro-states-map .state:hover,
#iro-states-map .state:focus {
fill: var(--iro-yellow);
stroke: #D2A900;
outline: none;
filter: drop-shadow(0 3px 4px rgba(0,0,0,.12));
}
#iro-states-map .state.adopted {
fill: var(--iro-blue);
}
#iro-states-map .state.adopted:hover,
#iro-states-map .state.adopted:focus,
#iro-states-map .state.selected {
fill: var(--iro-yellow);
stroke: #D2A900;
filter: drop-shadow(0 4px 5px rgba(0,0,0,.16));
}
/* ---------- INFO PANEL ---------- */
#iro-states-map .iro-info-panel {
background: var(--iro-white);
border: 1px solid #D9E8F2;
border-radius: 20px;
padding: 28px;
box-shadow: 0 10px 35px rgba(39, 116, 174, 0.08);
min-height: 245px;
}
#iro-states-map .iro-info-kicker {
color: var(--iro-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 9px;
}
#iro-states-map .iro-info-name {
font-size: 29px;
font-weight: 750;
color: var(--iro-blue);
line-height: 1.15;
margin-bottom: 8px;
}
#iro-states-map .iro-info-year {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--iro-yellow);
color: #234A64;
padding: 7px 13px;
border-radius: 999px;
font-size: 13px;
font-weight: 750;
margin-bottom: 18px;
}
#iro-states-map .iro-info-description {
font-size: 15px;
line-height: 1.6;
color: #557287;
margin: 0;
}
/* ---------- SUMMARY ---------- */
#iro-states-map .iro-summary {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
flex-wrap: wrap;
}
#iro-states-map .iro-stat {
min-width: 155px;
text-align: center;
background: var(--iro-blue);
color: white;
padding: 18px 25px;
border-radius: 16px;
}
#iro-states-map .iro-stat-number {
display: block;
font-size: 32px;
line-height: 1;
font-weight: 800;
margin-bottom: 6px;
}
#iro-states-map .iro-stat-label {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: .9;
}
/* ---------- LEGEND ---------- */
#iro-states-map .iro-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin: 25px 0 5px;
flex-wrap: wrap;
color: #52718A;
font-size: 13px;
}
#iro-states-map .iro-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
#iro-states-map .iro-legend-swatch {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.08);
}
#iro-states-map .iro-legend-swatch.adopted {
background: var(--iro-blue);
}
#iro-states-map .iro-legend-swatch.available {
background: var(--iro-blue-light);
}
#iro-states-map .iro-legend-swatch.selected {
background: var(--iro-yellow);
}
/* ---------- STATE CATALOG ---------- */
#iro-states-map .iro-catalog {
margin-top: 60px;
}
#iro-states-map .iro-catalog-title {
text-align: center;
color: var(--iro-blue);
font-size: 30px;
margin: 0 0 25px;
font-weight: 750;
}
#iro-states-map .iro-state-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
#iro-states-map .iro-state-button {
appearance: none;
border: 1px solid #D9E8F2;
background: white;
color: var(--iro-text);
border-radius: 12px;
padding: 14px 12px;
text-align: left;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
font: inherit;
}
#iro-states-map .iro-state-button:hover,
#iro-states-map .iro-state-button:focus {
border-color: var(--iro-blue);
background: var(--iro-blue-pale);
transform: translateY(-2px);
outline: none;
}
#iro-states-map .iro-state-button.adopted {
border-color: var(--iro-blue);
}
#iro-states-map .iro-state-button-name {
display: block;
font-weight: 700;
font-size: 15px;
}
#iro-states-map .iro-state-button-status {
display: block;
margin-top: 4px;
font-size: 12px;
color: #718A9B;
}
#iro-states-map .iro-state-button.adopted
.iro-state-button-status {
color: var(--iro-blue);
font-weight: 700;
}
/* ---------- MOBILE ---------- */
@media (max-width: 850px) {
#iro-states-map .iro-map-layout {
grid-template-columns: 1fr;
}
#iro-states-map .iro-info-panel {
min-height: auto;
}
#iro-states-map .iro-state-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
#iro-states-map .iro-map-container {
padding: 10px;
border-radius: 16px;
}
#iro-states-map .iro-subtitle {
font-size: 16px;
}
#iro-states-map .iro-state-list {
grid-template-columns: repeat(2, 1fr);
}
#iro-states-map .iro-summary {
gap: 8px;
}
#iro-states-map .iro-stat {
flex: 1;
min-width: 120px;
padding: 15px 10px;
}
#iro-states-map .iro-stat-number {
font-size: 27px;
}
}
</style>
<!-- ==========================================================
PAGE INTRO
========================================================== -->
<div class="iro-map-header">
<div class="iro-eyebrow">Immunization Record One</div>
<h2>States Leading the Way</h2>
<p class="iro-subtitle">
A growing network of states is adopting IRO to make
immunization records more portable, secure, and accessible.
</p>
</div>
<!-- ==========================================================
MAP + INFORMATION PANEL
========================================================== -->
<div class="iro-map-layout">
<div class="iro-map-container">
<div id="iro-map-svg"></div>
<div class="iro-legend">
<div class="iro-legend-item">
<span class="iro-legend-swatch adopted"></span>
IRO adopted
</div>
<div class="iro-legend-item">
<span class="iro-legend-swatch available"></span>
Not yet adopted
</div>
<div class="iro-legend-item">
<span class="iro-legend-swatch selected"></span>
Selected
</div>
</div>
</div>
<div class="iro-info-panel" aria-live="polite">
<div class="iro-info-kicker">
Select a state
</div>
<div class="iro-info-name" id="iro-info-name">
United States
</div>
<div class="iro-info-year" id="iro-info-year">
IRO State Network
</div>
<p class="iro-info-description" id="iro-info-description">
Click any state on the map to learn about its IRO
adoption status.
</p>
</div>
</div>
<!-- ==========================================================
SUMMARY
========================================================== -->
<div class="iro-summary">
<div class="iro-stat">
<span class="iro-stat-number" id="iro-adopted-count">0</span>
<span class="iro-stat-label">States adopted</span>
</div>
<div class="iro-stat">
<span class="iro-stat-number">50</span>
<span class="iro-stat-label">States</span>
</div>
</div>
<!-- ==========================================================
STATE CATALOG
========================================================== -->
<div class="iro-catalog">
<h3 class="iro-catalog-title">
Recently Adopted States
</h3>
<div
class="iro-state-list"
id="iro-state-list">
</div>
</div>
<!-- ==========================================================
JAVASCRIPT
========================================================== -->
<script>
(function () {
/*
* ==========================================================
* IRO STATE DATA
*
* THIS IS THE ONLY SECTION YOU NEED TO EDIT
*
* Add a state using:
*
* CA: {
* year: "2026",
* description: "Your description here."
* }
*
* Leave states out of this object if they have not adopted IRO.
* ==========================================================
*/
const IRO_ADOPTED_STATES = {
CA: {
year: "2026",
description:
"California was the first state to adopt IRO as part of its statewide immunization record modernization initiative."
},
OR: {
year: "2027",
description:
"Following the success of IRO implementation in California, Oregon has adopted IRO to improve portability and accessibility of children's immunization records."
}
};
/*
* ==========================================================
* STATE NAMES
* ==========================================================
*/
const STATE_NAMES = {
AL:"Alabama",
AK:"Alaska",
AZ:"Arizona",
AR:"Arkansas",
CA:"California",
CO:"Colorado",
CT:"Connecticut",
DE:"Delaware",
FL:"Florida",
GA:"Georgia",
HI:"Hawaii",
ID:"Idaho",
IL:"Illinois",
IN:"Indiana",
IA:"Iowa",
KS:"Kansas",
KY:"Kentucky",
LA:"Louisiana",
ME:"Maine",
MD:"Maryland",
MA:"Massachusetts",
MI:"Michigan",
MN:"Minnesota",
MS:"Mississippi",
MO:"Missouri",
MT:"Montana",
NE:"Nebraska",
NV:"Nevada",
NH:"New Hampshire",
NJ:"New Jersey",
NM:"New Mexico",
NY:"New York",
NC:"North Carolina",
ND:"North Dakota",
OH:"Ohio",
OK:"Oklahoma",
OR:"Oregon",
PA:"Pennsylvania",
RI:"Rhode Island",
SC:"South Carolina",
SD:"South Dakota",
TN:"Tennessee",
TX:"Texas",
UT:"Utah",
VT:"Vermont",
VA:"Virginia",
WA:"Washington",
WV:"West Virginia",
WI:"Wisconsin",
WY:"Wyoming"
};
/*
* ==========================================================
* LOAD THE SVG MAP
*
* The map package contains individual SVG paths for each
* state. It is loaded only once and then controlled locally
* by the code below.
* ==========================================================
*/
const MAP_URL =
"https://cdn.jsdelivr.net/npm/@svg-maps/usa@2.0.0/index.js";
const mapContainer =
document.getElementById("iro-map-svg");
const stateList =
document.getElementById("iro-state-list");
const adoptedCount =
document.getElementById("iro-adopted-count");
const infoName =
document.getElementById("iro-info-name");
const infoYear =
document.getElementById("iro-info-year");
const infoDescription =
document.getElementById("iro-info-description");
/*
* ==========================================================
* INFORMATION PANEL
* ==========================================================
*/
function showState(abbreviation) {
const name =
STATE_NAMES[abbreviation] || abbreviation;
const adoption =
IRO_ADOPTED_STATES[abbreviation];
infoName.textContent = name;
if (adoption) {
infoYear.textContent =
"IRO adopted " + adoption.year;
infoDescription.textContent =
adoption.description ||
"This state is part of the growing IRO network.";
} else {
infoYear.textContent =
"Coming soon";
infoDescription.textContent =
"IRO is building a growing nationwide network " +
"of secure, portable immunization records.";
}
document
.querySelectorAll("#iro-states-map .state")
.forEach(function (state) {
state.classList.remove("selected");
});
const selected =
document.querySelector(
'#iro-states-map .state[data-state="' +
abbreviation +
'"]'
);
if (selected) {
selected.classList.add("selected");
}
}
/*
* ==========================================================
* CREATE CATALOG
* ==========================================================
*/
function buildCatalog() {
stateList.innerHTML = "";
Object.keys(STATE_NAMES)
.sort(function (a, b) {
return STATE_NAMES[a]
.localeCompare(STATE_NAMES[b]);
})
.forEach(function (abbr) {
const button =
document.createElement("button");
const adopted =
IRO_ADOPTED_STATES[abbr];
button.className =
"iro-state-button" +
(adopted ? " adopted" : "");
button.type = "button";
button.setAttribute(
"aria-label",
STATE_NAMES[abbr]
);
button.innerHTML = `
<span class="iro-state-button-name">
${STATE_NAMES[abbr]}
</span>
<span class="iro-state-button-status">
${
adopted
? "IRO adopted " + adopted.year
: "Not yet adopted"
}
</span>
`;
button.addEventListener(
"click",
function () {
showState(abbr);
const mapState =
document.querySelector(
'#iro-states-map .state[data-state="' +
abbr +
'"]'
);
if (mapState) {
mapState.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
}
);
stateList.appendChild(button);
});
}
/*
* ==========================================================
* LOAD MAP DATA
* ==========================================================
*/
function loadMap() {
const script =
document.createElement("script");
script.src = MAP_URL;
script.onload = function () {
/*
* Some versions of the package expose the map
* through the global object while others are
* intended for module bundlers.
*
* If the CDN package does not expose the map
* globally, the fallback message below appears.
*/
if (
typeof window.USA_MAP !== "undefined"
) {
renderMap(window.USA_MAP);
return;
}
/*
* Fallback:
* Use a lightweight external SVG map loader.
*/
loadSVGMap();
};
script.onerror = function () {
loadSVGMap();
};
document.head.appendChild(script);
}
/*
* ==========================================================
* SVG FALLBACK
*
* This uses the public SVG map directly if the package
* cannot be initialized by Squarespace.
* ==========================================================
*/
function loadSVGMap() {
const svgURL =
"https://www.simplemaps.com/static/svg/us/us.svg";
fetch(svgURL)
.then(function (response) {
if (!response.ok) {
throw new Error("Map could not be loaded.");
}
return response.text();
})
.then(function (svgText) {
mapContainer.innerHTML =
svgText;
const svg =
mapContainer.querySelector("svg");
if (!svg) {
throw new Error("Invalid SVG.");
}
svg.removeAttribute("width");
svg.removeAttribute("height");
svg.style.width = "100%";
svg.style.height = "auto";
/*
* SimpleMaps identifies states with their
* postal abbreviations.
*/
const paths =
svg.querySelectorAll(
"[id], [data-id]"
);
paths.forEach(function (element) {
const rawID =
element.getAttribute("id") ||
element.getAttribute("data-id");
const abbr =
rawID &&
rawID.toUpperCase();
if (!STATE_NAMES[abbr]) {
return;
}
element.classList.add("state");
element.setAttribute(
"data-state",
abbr
);
if (IRO_ADOPTED_STATES[abbr]) {
element.classList.add("adopted");
}
element.setAttribute(
"tabindex",
"0"
);
element.setAttribute(
"role",
"button"
);
element.addEventListener(
"click",
function () {
showState(abbr);
}
);
element.addEventListener(
"keydown",
function (event) {
if (
event.key === "Enter" ||
event.key === " "
) {
event.preventDefault();
showState(abbr);
}
}
);
});
})
.catch(function () {
mapContainer.innerHTML = `
<div style="
padding:50px 25px;
text-align:center;
color:#52718A;
font-size:15px;
line-height:1.6;
">
The interactive map could not be loaded.
Please refresh the page or contact IRO.
</div>
`;
});
}
/*
* ==========================================================
* INITIALIZE
* ==========================================================
*/
adoptedCount.textContent =
Object.keys(IRO_ADOPTED_STATES).length;
buildCatalog();
loadMap();
})();
</script>
</div>
