Learning Timeline
Key Insights
Manual API Token Requirement
AI can write the code for Mapbox integration, but it CANNOT generate a valid API Token for you. You must register for a Mapbox account and manually insert your own token into the code.
Data Accuracy Limitations (Legend)
While the 3D building visualization is successfully generated, the color 'legend' (such as parks vs. buildings) may not function accurately automatically because the AI only uses placeholder logic for those categories.
Prompts
3D Geospatial Visualization Prompt
Target:
Kimi K2 / LLM
Create a 3D visualization of Tokyo's top neighborhoods. Sidebar lists all these different neighborhoods, etc. highlight building extrusions and add a day and night toggle.
Step by Step
Generating & Launching the Tokyo 3D Map
- Enter the provided prompt into the AI chat interface (Kimi K2).
- Ensure the 'web search' feature is disabled before sending the prompt to force the AI to use its internal knowledge.
- Wait for the 'Thinking' process to complete and the code to be fully generated.
- Click the **Copy** button on the code block to copy the entire script.
- Open a text editor (such as VS Code or Notepad) and create a new file.
- Paste the copied code and save the file with a `.html` extension (e.g., `tokyo_map.html`).
- Open the HTML file using a web browser.
- If the map screen is blank, right-click on the page, select **Inspect**, and go to the **Console** tab.
- Check for any errors related to a 'missing Mapbox token'.
- Find the line in the HTML code containing `mapboxgl.accessToken`.
- Replace the placeholder token with your valid **Mapbox API Token** (requires a Mapbox account).
- **Save** the HTML file and refresh the page in your browser.
- Test the map by clicking the 'Night Mode' toggle button at the bottom to view the night visualization.
- Right-click and drag the mouse to rotate the 3D building view.
