Mapbox 連携 (不動産インテリジェンス)

✅ Status: Frontend implementation COMPLETE (December 10, 2025)

Map component: src/components/ui/real-estate-map-component.tsx

Page: src/pages/real-estate-intelligence-page.tsx

Route: /real-estate-map

概要

The Real Estate Intelligence page (/real-estate-map) requires Mapbox GL JS integration to display:

Interactive map with GeoJSON overlays
Transaction price heatmaps
Land price points
Hazard zones (flood, tsunami, landslide, etc.)
Nearby amenities (schools, hospitals, emergency shelters)

技術メモ: 🔧 Backend Implementation Required

技術メモ: 1. Mapbox Token Management

Environment Variable:

MAPBOX_TOKEN=pk.eyJ1IjoieW91ci11c2VybmFtZSIsImEiOiJjbHh4eHh4eHgifQ.xxxxxxxxxx

Backend Endpoint Option (Recommended for security):

// GET /api/config/mapbox-token
// Returns a short-lived or restricted access token
{
  "token": "pk.eyJ1...",
  "expiresAt": "2025-12-11T00:00:00Z",
  "restrictions": ["styles:read", "tilesets:read"]
}

Why Backend Proxy:

Prevents token exposure in frontend bundle
Allows usage tracking and rate limiting
Enables token rotation without frontend deployment

技術メモ: 2. Prefecture Coordinates Endpoint

For centering the map on selected prefectures:

// GET /api/compliance/real-estate/prefectures/:code/coordinates
// Response:
{
  "code": "13",
  "name": "東京都",
  "center": {
    "lng": 139.6917,
    "lat": 35.6895
  },
  "bounds": {
    "sw": { "lng": 138.94, "lat": 35.16 },
    "ne": { "lng": 139.92, "lat": 35.90 }
  },
  "defaultZoom": 10
}

技術メモ: 3. GeoJSON Data Endpoints

The frontend expects GeoJSON responses from these endpoints:

技術メモ: 3.1 Transaction Points (Already Implemented)

GET /api/compliance/real-estate/transaction-points
Query: z, x, y, from, to, priceClassification, landType
Response: GeoJSON FeatureCollection

技術メモ: 3.2 Land Price Points (Already Implemented)

GET /api/compliance/real-estate/land-prices
Query: year, z, x, y
Response: GeoJSON FeatureCollection

技術メモ: 3.3 GIS Layers (Already Implemented)

GET /api/compliance/real-estate/gis/:apiCode
Query: z, x, y
Response: GeoJSON FeatureCollection or Binary Vector Tiles

技術メモ: 4. XYZ Tile Coordinate Helper

For frontend to calculate tile coordinates from lat/lng:

// GET /api/compliance/real-estate/coordinates-to-tiles
// Query: lng=139.69&lat=35.68&zoom=13
// Response:
{
  "z": 13,
  "x": 7312,
  "y": 3008,
  "bounds": {
    "sw": { "lng": 139.68, "lat": 35.67 },
    "ne": { "lng": 139.72, "lat": 35.71 }
  }
}

Or provide client-side utility:

// Formula for XYZ tiles from lat/lng
function latLngToTile(lat: number, lng: number, zoom: number) {
  const n = Math.pow(2, zoom)
  const x = Math.floor(((lng + 180) / 360) * n)
  const latRad = (lat * Math.PI) / 180
  const y = Math.floor(
    ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n
  )
  return { z: zoom, x, y }
}

技術メモ: 🗺️ GIS Layer API Codes Reference

Layer	API Code	Description	Zoom
Flood Risk	XKT026	洪水浸水想定区域	11-15
Tsunami Risk	XKT028	津波浸水想定	11-15
Landslide Risk	XKT029	土砂災害警戒区域	11-15
Schools	XKT006	学校	13-15
Hospitals	XKT010	医療機関	13-15
Emergency Shelters	XGT001	指定緊急避難場所	13-15
Use Zones	XKT002	用途地域	11-15
Fire Prevention	XKT014	防火・準防火地域	11-15

技術メモ: 📦 Frontend Package Requirements

When Mapbox is ready, install these packages:

npm install react-map-gl mapbox-gl
npm install -D @types/mapbox-gl

Frontend integration code (in separate component):

import Map, { Source, Layer, Marker, NavigationControl } from "react-map-gl"
import "mapbox-gl/dist/mapbox-gl.css"

// Replace MapPlaceholder with actual Map component
;<Map
  mapboxAccessToken={token}
  initialViewState={{
    longitude: 139.6917,
    latitude: 35.6895,
    zoom: 10,
  }}
  className="w-full h-full"
  mapStyle="mapbox://styles/mapbox/light-v11"
>
  {/* GeoJSON Layers */}
  <Source id="transactions" type="geojson" data={transactionGeoJson}>
    <Layer
      id="transactions-heat"
      type="heatmap"
      paint={{
        "heatmap-weight": [
          "interpolate",
          ["linear"],
          ["get", "price"],
          0,
          0,
          100000000,
          1,
        ],
        "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 15, 3],
        "heatmap-color": [
          "interpolate",
          ["linear"],
          ["heatmap-density"],
          0,
          "rgba(33,102,172,0)",
          0.2,
          "rgb(103,169,207)",
          0.4,
          "rgb(209,229,240)",
          0.6,
          "rgb(253,219,199)",
          0.8,
          "rgb(239,138,98)",
          1,
          "rgb(178,24,43)",
        ],
        "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 15, 20],
      }}
    />
  </Source>

  {/* Hazard Layers */}
  <Source id="flood-zones" type="geojson" data={floodGeoJson}>
    <Layer
      id="flood-fill"
      type="fill"
      paint={{
        "fill-color": "#0ea5e9",
        "fill-opacity": 0.3,
      }}
    />
  </Source>

  <NavigationControl position="bottom-right" />
</Map>

技術メモ: ⚡ Performance Recommendations

Tile-based loading: Load GeoJSON data per visible tile, not entire prefecture
Debounced fetching: Wait for map movement to settle before fetching
Cache GIS data: GIS data updates infrequently (monthly/quarterly)
Vector tiles: For large datasets, use Mapbox Vector Tiles (MVT) format

技術メモ: 🔐 Security Considerations

Token restrictions: Limit Mapbox token to specific URLs
Backend proxy: Consider proxying all Mapbox requests through backend
Rate limiting: Implement rate limits on GeoJSON endpoints
CORS: Ensure proper CORS headers for frontend requests

技術メモ: 📍 Current Implementation Status

Feature	Frontend	Backend	Status
Prefecture selection	✅	✅	Working
Municipality selection	✅	✅	Working
Transaction data	✅	✅	Working
Price statistics	✅	✅	Working
Map config API	✅	✅	Working
Prefecture coordinates API	✅	✅	Working
Coordinates to tiles API	✅	✅	Working
Map placeholder	✅	-	Working (shows setup status)
Mapbox integration	🔲	✅	Needs `react-map-gl` package
GeoJSON layers	🔲	✅	Needs map component
Heatmap visualization	🔲	-	Needs map component

技術メモ: Next Steps

Install frontend packages: npm install react-map-gl mapbox-gl
Replace MapPlaceholder component with actual Map component from react-map-gl
Add GeoJSON layers for hazard zones, transactions, etc.

技術メモ: Getting Started

Obtain Mapbox token: https://account.mapbox.com/access-tokens/
Add to backend .env: MAPBOX_TOKEN=pk.your_token
Create token endpoint or expose via frontend env
Install frontend packages: npm install react-map-gl mapbox-gl
Replace MapPlaceholder with actual Map component

Attribution Required:

MLIT: "出典：国土交通省「不動産情報ライブラリ」"

ツールを試す簿記を学ぶなぜ作ったか料金ドキュメント利用規約固定資産管理 API リファレンス (OpenAPI)

読み込み中