# apple/mapkit-loader architecture

> Architecture diagram of the GitHub repository apple/mapkit-loader, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/apple/mapkit-loader
- Repository: https://github.com/apple/mapkit-loader

## Overview

MapKit Loader is a small TypeScript library that loads Apple MapKit JS in the browser and returns its typed namespace. The main workflow is: an application calls `load()`, the loader inserts or reuses a script, and the browser fetches MapKit JS before the loader returns the available `mapkit` object. For server-rendered pages, callers can instead generate script attributes or an HTML string that starts loading earlier. The graph is based on the README and sampled `src/index.ts`; it does not assume additional runtime modules.

Main entry points: [`src/index.ts`](https://github.com/apple/mapkit-loader/blob/main/src/index.ts) (Loader API)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_app(("Application"))
node_loader["Loader API<br/>[index.ts]"]
node_browser["Browser DOM"]
node_apple["MapKit CDN"]
node_mapkit["MapKit JS"]
node_attrs["Script attributes<br/>[index.ts]"]
node_html["Script HTML<br/>[index.ts]"]

node_app -->|"calls load"| node_loader
node_loader -->|"inserts script"| node_browser
node_browser -->|"requests script"| node_apple
node_apple -->|"provides runtime"| node_mapkit
node_browser -->|"signals load"| node_loader
node_loader -->|"returns namespace"| node_mapkit
node_app -->|"requests attributes"| node_attrs
node_attrs -->|"returns attributes"| node_app
node_app -->|"requests markup"| node_html
node_html -->|"generates attributes"| node_attrs
node_html -->|"returns script"| node_app

click node_loader "https://github.com/apple/mapkit-loader/blob/main/src/index.ts"
click node_attrs "https://github.com/apple/mapkit-loader/blob/main/src/index.ts"
click node_html "https://github.com/apple/mapkit-loader/blob/main/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_apple,node_mapkit toneIndigo
class node_loader toneMint
class node_browser toneBlue
class node_attrs,node_html toneTeal
```

## Components

### Other components

- **Application**
- [Loader API](https://github.com/apple/mapkit-loader/blob/main/src/index.ts): `src/index.ts`
- **Browser DOM**
- **MapKit CDN**
- **MapKit JS**
- [Script attributes](https://github.com/apple/mapkit-loader/blob/main/src/index.ts): `src/index.ts`
- [Script HTML](https://github.com/apple/mapkit-loader/blob/main/src/index.ts): `src/index.ts`

## Connections

- Application → Loader API: calls load
- Loader API → Browser DOM: inserts script
- Browser DOM → MapKit CDN: requests script
- MapKit CDN → MapKit JS: provides runtime
- Browser DOM → Loader API: signals load
- Loader API → MapKit JS: returns namespace
- Application → Script attributes: requests attributes
- Script attributes → Application: returns attributes
- Application → Script HTML: requests markup
- Script HTML → Script attributes: generates attributes
- Script HTML → Application: returns script