japan-map-selector
Advanced tools
Interactive Japan map component for selecting prefectures and municipalities
Interactive Japan map component for selecting prefectures and municipalities. Built with TypeScript and supports React, Svelte, and vanilla JavaScript.
To run the demo locally:
# Start a local server
python3 -m http.server 8000
# or
npx http-server -p 8000
# Open http://localhost:8000/demo.html
npm install japan-map-selector
import { JapanMapSelector } from 'japan-map-selector';
// セレクターを作成
const selector = new JapanMapSelector({
width: 800,
height: 600,
onPrefectureSelect: (prefecture) => {
console.log('Selected prefecture:', prefecture.name);
},
onMunicipalitySelect: (municipality) => {
console.log('Selected municipality:', municipality.name);
}
});
// データを読み込んで初期化
// CDN経由でデータを読み込む場合（推奨）
const baseUrl = 'https://unpkg.com/japan-map-selector@latest/src/data/simplified';
await selector.initialize(
`${baseUrl}/prefectures-medium.geojson`,
`${baseUrl}/municipalities-medium.geojson`
);
// SVGコンテンツを取得して表示
const svgElement = document.getElementById('map-svg');
selector.on('stateChanged', (state) => {
svgElement.innerHTML = state.svgContent;
});
完全な実装例は examples/vanilla-js/ を参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Japan Map Selector - CDN Example</title>
</head>
<body>
<svg id="map-svg" width="800" height="600"></svg>
<script type="module">
// CDNから読み込み
import { JapanMapSelector } from 'https://unpkg.com/japan-map-selector@latest/dist/index.es.js';
const selector = new JapanMapSelector({
width: 800,
height: 600
});
// CDN経由でデータを読み込み
const baseUrl = 'https://unpkg.com/japan-map-selector@latest/src/data/simplified';
await selector.initialize(
`${baseUrl}/prefectures-medium.geojson`,
`${baseUrl}/municipalities-medium.geojson`
);
// 状態変更を監視して描画
const svg = document.getElementById('map-svg');
selector.on('stateChanged', (state) => {
svg.innerHTML = state.svgContent;
});
</script>
</body>
</html>
import { JapanMapSelectorReact } from 'japan-map-selector';
function MapComponent() {
const handlePrefectureSelect = (prefecture) => {
console.log('Selected:', prefecture.name);
};
return (
<JapanMapSelectorReact
width={800}
height={600}
theme="default"
onPrefectureSelected={handlePrefectureSelect}
prefectureDataUrl="/data/prefectures.geojson"
municipalityDataUrl="/data/municipalities.geojson"
/>
);
}
<script>
import { JapanMapSelectorSvelte } from 'japan-map-selector';
function handlePrefectureSelect(event) {
console.log('Selected:', event.detail.name);
}
</script>
<JapanMapSelectorSvelte
width={800}
height={600}
theme="default"
on:prefectureSelected={handlePrefectureSelect}
prefectureDataUrl="/data/prefectures-medium.geojson"
municipalityDataUrl="/data/municipalities-medium.geojson"
/>
This package includes map data derived from the National Land Numerical Information (国土数値情報) provided by the Ministry of Land, Infrastructure, Transport and Tourism of Japan.
The package includes medium precision data by default:
The default medium precision data is automatically included. You can use relative paths:
// Using default data (medium precision)
await map.initialize(
'./node_modules/japan-map-selector/src/data/simplified/prefectures-medium.geojson',
'./node_modules/japan-map-selector/src/data/simplified/municipalities-medium.geojson'
);
Or with a bundler that resolves node_modules:
import prefectureData from 'japan-map-selector/src/data/simplified/prefectures-medium.geojson';
import municipalityData from 'japan-map-selector/src/data/simplified/municipalities-medium.geojson';
await map.initialize(prefectureData, municipalityData);
For other precision levels, install additional packages:
| Package | Install Command | Total Size | Use Case |
|---|---|---|---|
| Original (Highest) | npm install japan-map-selector-data-original | ~10.7MB | Detailed analysis |
| High | npm install japan-map-selector-data-high | ~4.1MB | Better quality |
| Low | npm install japan-map-selector-data-low | ~1.3MB | Mobile apps |
| Ultra Low | npm install japan-map-selector-data-ultra-low | ~696KB | Previews |
Note: These optional packages are not yet published. For now, only medium precision data is available.
For faster initial load times, use low precision data:
// Use low precision data (60% smaller, loads 2-3x faster)
await map.initialize(
'https://unpkg.com/japan-map-selector@latest/src/data/simplified/prefectures-low.geojson',
'https://unpkg.com/japan-map-selector@latest/src/data/simplified/municipalities-low.geojson'
);
Benefits:
Load municipality data only when a prefecture is selected:
const selector = new JapanMapSelector({
width: 800,
height: 600,
enableDynamicLoading: true, // Enable dynamic loading
dynamicDataBaseUrl: 'https://unpkg.com/japan-map-selector@latest/src/data',
onMunicipalityLoadStart: (prefecture) => {
console.log(`Loading ${prefecture.name} municipalities...`);
},
onMunicipalityLoadEnd: (prefecture) => {
console.log(`Loaded ${prefecture.name} municipalities`);
}
});
// Initialize with prefecture data only
await selector.initialize(
'https://unpkg.com/japan-map-selector@latest/src/data/simplified/prefectures-low.geojson',
'' // Municipality URL can be empty with dynamic loading
);
Benefits:
interface JapanMapSelectorProps {
width?: number; // Map width (default: 800)
height?: number; // Map height (default: 600)
theme?: string | ColorTheme; // Theme name or custom theme object
simplificationLevel?: number; // 0.1 (detailed) to 1.0 (simplified)
showTokyoIslands?: boolean; // Show/hide Tokyo remote islands
enableZoom?: boolean; // Enable zoom functionality
enablePan?: boolean; // Enable pan functionality
}
prefectureSelected - Fired when a prefecture is selectedmunicipalitySelected - Fired when a municipality is selectedselectionCleared - Fired when selection is clearedsetTheme(theme) - Change the color themesetSimplificationLevel(level) - Adjust map detail levelsetDeformMode(mode) - Set deformation mode ('none', 'grid', 'hexagon')reset() - Reset to initial viewselectPrefecture(code) - Programmatically select a prefecturezoomIn() / zoomOut() - Zoom controlsBuilt-in themes:
default - Clean, minimalist designdark - Dark modecolorful - Vibrant colorsCustom theme example:
const customTheme = {
background: '#f0f0f0',
prefectureFill: '#ffffff',
prefectureStroke: '#333333',
prefectureHoverFill: '#ffff00',
municipalityFill: '#e0e0e0',
municipalityStroke: '#666666',
strokeWidth: 0.5
};
selector.setTheme(customTheme);
See the examples/ directory for complete examples:
# Install dependencies
npm install
# Start development server
npm run dev
# Build the library
npm run build
# Run type checking
npm run type-check
# View documentation
npm run docs:dev
MIT License - see LICENSE file for details.
This library uses map data from:
日本の都道府県・市区町村を選択できるインタラクティブな地図コンポーネント。TypeScriptで構築され、React、Svelte、vanilla JavaScriptをサポート。
npm install japan-map-selector
本パッケージには、国土交通省国土数値情報ダウンロードサービスから提供されている行政区域データを加工したものが含まれています。
MIT License
地図データの提供元：
FAQs
Interactive Japan map component for selecting prefectures and municipalities
The npm package japan-map-selector receives a total of 70 weekly downloads. As such, japan-map-selector popularity was classified as not popular.
We found that japan-map-selector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.