Mit Claude Code aus einem Grundriss eine Mapbox Indoor Map bauen

This article is translated from my Japanese original on Qiita. The translation and editing were assisted by Claude (AI-assisted).

This is a personal project, not an official Mapbox product.

How to build a custom indoor map from your own data is explained in detail in Build an indoor map with your own data in Mapbox GL JS. When you build your first indoor map yourself, though, drawing room polygons one by one while thinking about real-world coordinates can be a fairly high bar. The goal of this post is to lower exactly that first hurdle, creating the data. I'll introduce a tool, indoor-generator, that creates and fixes Mapbox indoor data (the Indoor data model) from simple natural-language instructions. If there were a handy tool that an individual can use casually, I'd expect the range of uses to grow and indoor maps to be used more.

Floor plans are a different situation from, say, reading building outlines off satellite imagery. Vector data for the inside of a building is often available from the start. Even when you only have a raster image, it is usually sharp and detailed, unlike satellite imagery, so recognizing vector shapes from it is often realistic. That makes "image to indoor map" a good fit for a tool like Claude Code. (You still have to check and fix the details, of course.)

Below, I'll walk through making an indoor map of the 5th floor of PMO Shinbashi II Building (Tokyo) from a single floor-plan image.

When you try to make an indoor map, you tend to stop around here:

On the other hand, some use cases look like this:

What's missing is a tool that makes something that works well enough, easily, and lets you deploy it right away.

How it works: Claude Code (skills in.claude/skills/ ) handles research, writing the config file and the conversation. Turning the config into GeoJSON is a fixed Python pipeline.

"Make an indoor map of PMO Shinbashi II 5F from this image" → locate the building (OSM) + footprint (OSM, or drawn from the floor plan) + web research → configs/<slug>.json ← the source of truth → Python pipeline → output/<slug>/indoor.geojson + live preview → refine by chat: "make the meeting room bigger", "undo" Enter fullscreen mode Exit fullscreen mode Setup Quick start You use the tool by talking to Claude Code inside a clone of the repository. The skills that know how to research a building and run the pipeline (.claude/skills/ and CLAUDE.md ) live in the repo, and Claude Code only loads what is in the folder you start it in (and its parents). Start it somewhere else and it knows nothing about this tool.

The commands below assume macOS / Linux (on Windows, use.venv\Scripts\... ).

git clone https://github.com/akiramur/indoor-generator.git cd indoor-generator python3 -m venv.venv &&.venv/bin/pip install -r requirements.txt cp.env.example.env # put your public token (pk.*) in MAPBOX_ACCESS_TOKEN Enter fullscreen mode Exit fullscreen mode Start Claude Code in that folder (in the desktop app or VS Code, open the cloned folder as the project): claude Enter fullscreen mode Exit fullscreen mode Type your request into the Claude Code prompt as a chat message (not a shell command): Make an indoor map of Marunouchi Building Enter fullscreen mode Exit fullscreen mode Claude Code researches the building, writes configs/<slug>.json, generates output/<slug>/indoor.geojson and starts a live preview at http://127.0.0.1:8765. Ask for fixes in the same session ("make the north side of the 2nd floor a meeting room"). Claude Code may ask permission before running commands or fetching web pages; read what it asks and approve only what you're comfortable with.

The easiest way is, as in the examples below, just writing the building's name in English or Japanese.

.venv/bin/python main.py build samples/building_config.json.venv/bin/python main.py serve marubiru-sample # http://127.0.0.1:8765 Enter fullscreen mode Exit fullscreen mode Researching and building one building takes a few minutes, including web search and fetching. main.py cost gives a rough Claude cost (converted at list prices). Let's build one: PMO Shinbashi II, 5F 1. Hand over an image and ask All I prepared was one image: the floor plan of the 5th-floor rental space. I opened Claude Code in the repo and asked:

Make an indoor map of PMO Shinbashi II 5F from the image below Enter fullscreen mode Exit fullscreen mode

The indoor-map and indoor-floor-image skills work through these steps. No one has to click to align anything.

If you did it by hand, the core commands are these (normally Claude runs them):

.venv/bin/python main.py build configs/pmo-shimbashi2.json.venv/bin/python main.py serve pmo-shimbashi2 # http://127.0.0.1:8765 Enter fullscreen mode Exit fullscreen mode 3. The result In the preview (Mapbox GL JS Standard style + the indoor block + IndoorControl ) you switch floors with the control at the bottom right. The "Floor map from the source" checkbox on the left toggles the overlay of the original floor plan (the image at the top is with the overlay on).

What I've shown so far is the tool's preview for checking your work (it includes editing). Separately, I made a demo that displays the finished indoor maps with plain Mapbox GL JS only: a single page that doesn't use the tool's preview server and just loads the generated GeoJSON (one file per facility). Treat it as a minimal example of putting your own indoor map on a web page. (It doesn't include the floor-plan images; it only draws the generated rooms and facility icons.)

In the demo you can rotate and tilt the map, or hide the floors with the top button of IndoorControl to go back to the plain 3D building.

The demo's source is readable with your browser's view-source. It is only the page ( index.html ) and JSON files in data/ (the list of facilities, the icon definitions, and one GeoJSON per facility).

Note that map.style.indoorManager, which the demo uses to show and hide the 3D building as you change floors, is an experimental API with no published specification. If you copy it, watch out for future changes.

The rooms it got: men's and women's toilets, anteroom, elevator, emergency elevator, elevator hall, PS / DS / EPS, two stairs, a round meeting room, a meeting room, two booths, the office area and a lounge. Names and uses ( category ) come from the text in the image.

In terms of workflow, it reached the preview about 5 minutes after I typed the request once. The Claude cost estimate was about $0.9 (not a bill; converted at list prices).

These 5F numbers (the room count, the traced share, the time and the cost) were measured on an earlier version of the tool, so a run on the current version may give different figures.

It isn't perfect from the start. Claude itself reports these points along with the result:

To fix things, ask in chat by name ("make the men's toilet larger"), or click a room in the preview and ask "this room should be…". By hand, Edit floor in the preview lets you move vertices, add, delete and merge rooms. For an image that's slightly off, use the "Floor map" mode: drag and scale it, then "Save this floor only". To go back one step, say "undo". Note that undo restores only the config file; room shapes you edited by hand in the preview don't come back (backups are in configs/.history/plans/ ), so before saving, use the edit mode's own Undo.

main.py report shows how well each room is backed by data.

.venv/bin/python main.py report configs/pmo-shimbashi2.json Enter fullscreen mode Exit fullscreen mode For this 5F, "traced from the image" was 49.2% of the area and "derived" was 50.8% ("listed" and "estimated" were 0%).

Because it separates traced, listed (name only), estimated and derived, you can see what to trust and what is a guess. For a multi-floor building, floors without a plan show up as "estimated", which tells you where to look next.

For PMO Shinbashi II I handed over the plan myself. If you don't have one, Claude looks for it on the web. As an example, here is the first prompt I typed for Mitsui Outlet Park Tama Minamiosawa (an outlet mall in western Tokyo):

Make an indoor map of Mitsui Outlet Park Tama Minamiosawa Enter fullscreen mode Exit fullscreen mode No image, no URL, no floor count. But the screenshots below are not the result of that one sentence. They are the state after many rounds of fixes following the first build. I'll describe how it went later.

Quoting from the research notes ( output/<slug>/research.md ) and the sources in the config, here's what actually happened:

Since the official site only had images, it went through the same "overlay the image → trace it" flow as the 5F. The difference is that even finding the images is automatic. For alignment, OSM had no named landmarks there, so it used corners of the parking blocks as control points, with an error of about 1–2 m. (The 1F in this example was fitted with an affine transform from control points, which was the method at the time, so the image is slightly deformed. The current tool only uses similarity transforms and never bends the image.)

With store names, positions, shapes and use categories (retail / dining / service…) filled in, the preview also shows a list of stores on the right.

The result of the first prompt was rough, with many store shapes off from the original drawing. From there I fixed it like this (from the session log):

So what you get from the first sentence is only a starting point. I fixed things by conversation, one "this store looks wrong" or "this is missing" at a time, until it reached the state in the screenshot.

The research notes still list what is unknown:

The tool gets you to "works well enough" automatically, but checking and fixing details is a human job. You can do that either by chatting with Claude or by hand in the preview (Edit floor). And since the source is an official site's drawing, the copyright notes below apply as they are (images are not committed, only the URL is kept; check the rights before publishing).

Yes. The preview in this post loads the generated indoor.geojson directly as a Mapbox GL JS GeoJSON source. No upload or deploy is needed; you only need a public token.

If you make a few event venues and check them locally, that's all you need. You only need MTS when you want to hand it to many people or host it.

To upload, main.py publish combines all built buildings into one tileset. It's a dry run unless you pass --upload, and the default target is a development tileset ( indoor-dev ). The secret token ( sk.* ) is read from.env and never embedded in HTML.

Prices change, so check the official pages for current rates and free tiers:

A rough estimate against the free tiers on the official page as of 2026-10-21 (Processing: 10,000 MB and 20 CU per month; Hosting: 750 days per month; GL JS map loads: 50,000 per month). It's only a guide; check the official rates and your own usage for the real bill.

Conversely, uploading again and again, or publishing a map that many people view, can exceed the free tier.

The tool estimates Claude's cost per build from Claude Code's session logs ( main.py cost; not a bill, converted at list prices). For PMO Shinbashi II:

The first row is the cost until the map first came out from one request (not including later fixes or interacting with the preview). The second row includes making 1F, 2F, 3F, 7F, 8F and so on, plus the fix conversation, so it's an order of magnitude more. The more you fix, the more you use.

Be careful here. Floor maps on official sites and floor plans in leasing materials are generally copyrighted. This tool handles it like this:

Whether the rights to the original drawing allow you to post images or to publish and distribute the map you made is for you to check. The tool can't solve that. The safest way, as in this post, is to build from your own (or your own facility's) plans.

But reading isn't perfect. Misread store names and shifted shapes happen, so checking and fixing is always required.

Until now it has been hard to tell where and how to start an indoor map, so the first step was a high bar. With this tool you get a first map from a floor-plan image and a chat request, then fix it by conversation, which I think lowers the bar quite a bit.

For maps of ever-changing supermarket store guides, one-off, throwaway guides for trade shows, school festivals and food festivals, or private indoor maps like a company floor plan, why not try making an indoor map of a place near you?

The demo above also contains other facilities made with this tool. You switch facilities with the dropdown at the top left (the selected one goes into?b= in the URL). Here they are as screenshots.

These are unofficial and for reference only, and the shapes include estimates based on official drawings and the like (the demo screen shows the same notice).

Tokyo International Forum, Hall C (a seating prototype)

Zoom in and you can see every seat, with its seat and row numbers.

Fukuoka Airport Domestic Terminal Building