KrackedMaps · interactive map of Malaysia

A self-contained, themeable SVG map of Malaysia — 16 admin-1 regions (13 states + Kuala Lumpur, Putrajaya, Labuan) and 159 admin-2 daerah — with zero runtime dependencies. Use it as a live component, a CLI, an MCP server for Claude, an embeddable iframe, or raw SVG / GeoJSON.

Customize & export: https://maps.krackeddevs.com · Live demo: https://maps.krackeddevs.com/demo.html

Two aligned layers from one shared projection: click a state to drill in (carve its districts + info panel); hover a district for its name; press Esc to step back out. East Malaysia is slid west to close the South China Sea gap for a compact frame.

Three ways in

npm i krackedmaps          # library + CLI + MCP server, one package

1. Library (browser / SSR)

import { createMalaysiaMap } from "krackedmaps";
import "krackedmaps/css";

const map = createMalaysiaMap("#map", { theme: "blueprint" });
map.on("select", (slug) => console.log("selected", slug));

// server-side string builders (no DOM)
import { renderSVG, project } from "krackedmaps";
const svg = renderSVG({ theme: "blueprint", withDistricts: true });
project(101.7117, 3.1578); // -> { x, y } in the SVG viewBox

2. CLI — grab assets from the terminal

npx krackedmaps svg --theme blueprint --districts > malaysia.svg
npx krackedmaps geojson --districts > daerah.geojson
npx krackedmaps react --theme batik > MalaysiaMap.jsx
npx krackedmaps project 101.7117 3.1578     # -> {"x":…,"y":…}
npx krackedmaps states                       # list states
npx krackedmaps --help

| command | output | |---|---| | svg [--theme] [--districts] [--out] | themed, self-contained SVG | | geojson [--districts] [--out] | GeoJSON (original lng/lat) | | json [--out] | projected paths + projection params | | react [--theme] [--out] | a <MalaysiaMap> component | | embed [--theme] [--districts] [--labels] [--static] | iframe snippet | | project <lng> <lat> | project real coords → SVG {x,y} | | states · districts [--state <slug>] · themes | listings |

3. MCP server — use it inside Claude

Exposes tools (krackedmaps_svg, krackedmaps_geojson, krackedmaps_project, krackedmaps_states, krackedmaps_districts, krackedmaps_react, krackedmaps_embed, krackedmaps_paths) so any Claude conversation can pull the map + data.

Claude Code:

claude mcp add krackedmaps -- npx -y krackedmaps mcp

Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "krackedmaps": { "command": "npx", "args": ["-y", "krackedmaps", "mcp"] }
  }
}

Then ask Claude things like "give me the Malaysia map as a blueprint SVG with districts" or "what SVG coordinate is KLCC?".

createMalaysiaMap(container, options)

container is an HTMLElement or selector. Returns an instance — make as many as you like; destroy() tears each one down cleanly.

| option | default | description | |---|---|---| | theme | "blueprint" | preset (mono, flat-dark, light, blueprint, batik) or {cssVar: value} | | panel / tooltip | true | built-in info panel / hover tooltip | | showDistricts | true | district drill-down layer | | interactive | true | pointer / click / keyboard handlers | | zoom | true | zoom-to-state on select (false keeps the full map framed) | | keyboard | true | Escape steps back out (scoped, never global) | | labels | false | start with state labels shown | | initialState | null | slug to select after build | | meta / colors / renderPanel | — | per-state info / choropleth ramp / custom panel |

map.select("penang"); map.focus("sabah"); map.drillInto("sarawak");
map.addPin({ lng: 101.7117, lat: 3.1578, label: "KLCC" });
map.setData({ penang: 1.8, sabah: 3.4 });   // choropleth by slug
map.setTheme("batik"); map.toggleLabels(true);
map.on("select" | "hover" | "drill", cb); map.off(name, cb);
map.destroy();
map.STATES; map.DISTRICTS; map.project(lng, lat);

Theming

Everything is CSS variables on the .mmap container — pass a theme, call setTheme(...), or override in your own CSS. Key vars: --sea, --land, --land-hover, --land-active, --stroke, --district, --carve, --district-hi, --label, --pin, --accent.

Data only (no engine)

import { STATES, DISTRICTS, project } from "krackedmaps/data";

Pre-generated files also live in exports/ (served at /exports/): themed SVGs, normalized GeoJSON, projected-paths JSON. See exports/README.md.

Develop

npm run dev      # python3 -m http.server 4173 — open http://localhost:4173
npm run build    # bundle dist/ for npm (esbuild) + copy GeoJSON
npm run bake     # re-run data/bake.py + data/export.py after changing source data

| file | role | |------|------| | src/engine.js | createMalaysiaMap — render + interaction engine | | src/render.js | pure SVG / snippet builders (shared by browser, CLI, MCP) | | src/data.js / src/themes.js | baked geometry re-export / theme presets | | bin/cli.js / bin/mcp.js | the CLI and the MCP server | | data/states.js | baked paths + project() (auto-generated — don't hand-edit) | | index.html / playground.js | the customize & export page (landing) | | demo.html / demo.js | the live demo (dogfoods the engine) |

Provenance: states from codeforamerica/click_that_hood; districts (ADM2) + Labuan from geoBoundaries gbOpen (MYS). Check each source's license before commercial redistribution. MIT licensed.