{
  "id": 10421247,
  "title": "Building an interactive marina slip map in React with plain SVG",
  "url": "https://urgent.news/2026/09/28/building-an-interactive-marina-slip-map-in-react-with-plain-svg",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-28T10:20:51.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/catamaransails/building-an-interactive-marina-slip-map-in-react-with-plain-svg-1ia9"
  },
  "original_language": "en",
  "account": "Building an interactive marina slip map in React with plain SVG involves creating a three-pier marina with fifty clickable slips. The centerpiece of the dashboard is the slip map, which showcases what's in each slip and who is arriving today. The source material outlines the step-by-step process of constructing this interactive map using plain SVG and React state.\n\nFirst, the marina is modeled as data, with each pier defined by its name, x-coordinate, and the number of slips per side. The SlipState enum has three possible values: occupied, arriving, or vacant. The Slip interface describes a slip with its unique ID, slip state, x and y coordinates, and boat name (if applicable).\n\nNext, the data is transformed into geometric shapes. A set of constants define the visual appearance of slips and piers. A nested loop iterates through each pier, side, and slip, generating an array of Slip objects with their respective IDs, slip states, positions (x, y), and dimensions (width, height).\n\nTo ensure the slip map scales seamlessly within any container width, the layout is based on pure mathematical calculations within a fixed viewBox. The viewBox is set to 0 0 320 170, and the SVG container has a className of block w-full. The pier and slip rectangles are rendered using the viewBox coordinates and slip data, applying fill colors based on the slip state and adding slight opacity for a subtle effect.",
  "summary": "Most dashboard templates give you a revenue chart and a user table. When I built a dashboard for marinas and boat charter companies, the thing a dockmaster actually needs is different: what's in that slip, and who's arriving today? So the centerpiece became a slip map: three piers, fifty slips, each one clickable. Here's the live demo if you want to poke at it first. It turned out to be a nice…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}