Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@krackedmaps Create a blueprint SVG of Malaysia with districts."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Themeable SVG maps with zero runtime dependencies. Malaysia's 16 regions and 159 districts from one shared projection, plus a rotating globe and country maps. Use it as a component, a CLI, an MCP server, or plain SVG and GeoJSON.
Customize & export · Demo · Docs · Playground
npm i krackedmapsimport { createMalaysiaMap } from "krackedmaps";
import "krackedmaps/css";
const map = createMalaysiaMap("#map", { theme: "blueprint" });
map.on("select", (slug) => console.log("selected", slug));
map.setData({ penang: 1.8, sabah: 3.4 }); // choropleth by slug
map.addPin({ lng: 101.7117, lat: 3.1578, label: "KLCC" });Click a state to drill into its districts, hover a district for its name, Esc steps
back out. Make as many instances as you like; destroy() tears each one down.
Server-side, with no DOM:
import { renderSVG, project } from "krackedmaps";
const svg = renderSVG({ theme: "batik", withDistricts: true }); // a string
project(101.7117, 3.1578); // → { x, y }Data only: import { STATES, DISTRICTS, PROJECTION } from "krackedmaps/data".
Related MCP server: Magic Lane MCP Server
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 # KLCC → {"x":…,"y":…}
npx krackedmaps globe react --theme blueprint > Globe.jsx
npx krackedmaps --helpclaude mcp add krackedmaps -- npx -y krackedmaps mcpThen ask: "give me the Malaysia map as a blueprint SVG with districts", or "add a rotating globe hero to this app". The MCP server exposes the SVG, GeoJSON, projection, React and embed builders as tools.
import { createGlobe, WORLD_COUNTRIES } from "krackedmaps/globe";
import "krackedmaps/globe.css";
const globe = createGlobe("#globe", { countries: WORLD_COUNTRIES, theme: "blueprint" });Country maps beyond Malaysia are served by the hosted site
(npx krackedmaps country japan embed); see "What is open" below.
option | default | description |
|
|
|
|
| built-in info panel / hover tooltip |
|
| district drill-down layer |
|
| pointer, click and Esc handlers (scoped, never global) |
|
| zoom to a state on select |
|
| start with state labels shown |
|
| slug to select after build |
| per-state info, choropleth ramp, custom panel |
Methods: select · focus · drillInto · addPin · setData · setTheme ·
toggleLabels · on / off (select, hover, drill) · destroy.
Malaysia boundaries are geoBoundaries gbOpen (CC BY): ADM1 for the 16 regions, ADM2
for the 159 districts. World outlines are Natural Earth (public domain). Keep one
attribution line when you redistribute exports; the exporter writes it into the SVG's
<metadata>. Details and citation: DATA-LICENSES.md.
This package is the engine and the Malaysia data, MIT. maps.krackeddevs.com adds the Poster Studio and the per-country atlas tiers, some of whose sources carry stricter licences; those live in a separate repo and are served, not redistributed.
Data corrections with a source, new themes, and API improvements: see CONTRIBUTING.md.
MIT © KrackedDevs
This server cannot be deployed
Generate styled PNG/SVG map images of any location with 11 customizable color themes.
Ask in plain English, get a rendered, shareable map from live public data. 24 geospatial tools.
Create choropleth, category and pin maps of countries, states, counties and ZIP codes as images.
AI access to Mapbox docs, API references, style specs, and guides. No token required.
