地図システム

インタラクティブな地図で素晴らしい地理的視覚化を作成します。, choropleth データの着色, アニメーションの明らかに.

プロフィール

地図システムが提供する:

• 世界と地域マップ — CDN (世界、米国、ヨーロッパなど) からの事前ロードマップ
• 複数の投影 — Mercator, Natural Earth, Orthographic (globe), Albers など
• Region Highlighting — ハイライト国、州、または州
• データ可視化 — 色のスケールで地図を選ぶ
• マーカーとラベル — 関心のポイントを追加
• プロフェッショナルな品質 — 複雑な国のマルチポリゴン対応

サイトマップ

テンプレートから

始める最も簡単な方法は、マップテンプレートを使用します

1. テンプレートパネルを開く
2. マップカテゴリを検索
3. 「グローバル展開マップ」や「USデータ可視化」などのテンプレートを選択

発電機のパネルから

1. Generatorパネルを開く
2. 背景タイプとしてマップを選択
3. 地図(世界、米国、ヨーロッパなど)
4. 投影とスタイリングの設定

地図の種類

プロジェクト

視覚化に適した投影を選択:

ナチュラルアース(デフォルト)

世界地図のベスト。 バランスの取れた歪み、自然に見える.

マーケター

角度、馴染みのある外観を保存します。 ナビゲーションスタイルマップに適しています.

オルソグラフィック(グローブ)

地球を3Dの球として表示します。 集中した地域ビューに最適です.

Albers 米国

アラスカとハワイのリポジショニングを含む米国の地図のための特別な投影.

その他のプロジェクト

• Robinson — 世界の地図のためによい妥協の投影
• Winkel Tripel — 低歪み世界投影
• コニック・エコール・エリア — ミッドレイト・リージョンに最適

ハイライト地域

単一国/州

任意の地域をクリックして選択する プロパティパネルを使用して色を変更します.

複数の地域

複数の領域を強調するためにAPIまたはテンプレートを使用します

// Highlight North American countries
app.mapSystem.highlightRegions(
  ['United States of America', 'Canada', 'Mexico'],
  { fillColor: '#22c55e', strokeColor: '#16a34a' }
);

アニメーションリバイアル

テンプレートは、ストーリーテリング効果の驚くべきタイミングで領域ハイライトをアニメーションすることができます.

地域IDフォーマット

異なるマップでは、異なるIDフォーマットを使用します

データ可視化(選択)

データ値に基づいて色領域:

app.mapSystem.applyDataColors({
  'California': 39538223,
  'Texas': 29145505,
  'Florida': 21538187
}, {
  colorScale: 'blues',
  showLegend: true,
  legendTitle: 'Population'
});

カラースケール

マーカー

特定の座標でポイントマーカーを追加します

app.mapSystem.addMarker({
  lat: 37.7749,
  lon: -122.4194,
  label: 'San Francisco',
  color: '#ef4444',
  pulse: true  // Animated pulse effect
});

品質設定

重要: 複雑な形状(ロシア、フランス、米国)の国でprofessional品質を使用して、すべての領土部分が正しくレンダリングされるようにします.

マルチポリゴン国

一部の国は、複数の切断された部品で構成されています

• ロシア—本土+カリンガルド+島
• フランス—本土+コルシカ+海外領事
• USA — 本土+アラスカ+ハワイ(世界地図)
• インドネシア — 数千の島
• Fiji — 複数の島

地図システムは、品質がprofessionalに設定されている場合、これらの国のためにPaper.jsコンパウンドPathを自動的に使用します.

インターアクティブ

フーバー効果

ホバー強調を有効にする:

app.mapSystem.loadMap('world', {
  enableHover: true,
  hoverFill: '#93c5fd'
});

イベント情報

地域クリックへの対応:

app.mapSystem.on('regionClick', (event) => {
  console.log('Clicked:', event.regionId);
  // Show info panel, highlight related regions, etc.
});

地図テンプレート

グローバル展開マップ

アニメーションフェーズベースのハイライトで、地域全体の事業拡大を表示します.

米国データ可視化

米国全州のデータを整形カラーで表示します.

カスタムマップのインポート

含まれていない詳細な地域マップについては、importCustomMap()を使用してください

// Load from GeoJSON
await app.mapSystem.importCustomMap(geoJsonData, {
  projection: 'mercator',
  idProperty: 'name'
});

データソース:

• 自然地球 — パブリックドメインマップデータ
• GADM — 詳細な管理境界
• Mapshaper — GeoJSON ファイルの簡素化

ニュース

1. 複数のポリゴンの国の専門の輸出のためのworldHighResを使用して下さい
2. Natural Earthの映写はほとんどの世界の地図のために最もよく働きます
3. Albers USAは米国地図のために特別に設計されています
4. オルソグラフィは、プレゼンテーションのための劇的な地球の景色を作成
5. 専門の質は複雑な国の形の破損を防ぎます

キーボードショートカット

地図 地域 アニメーション

タイムライン統合カラー変更で地図領域を合理化。 時間の経過とともにデータ変更、グローバル展開のシーケンス、または魅力的なデータ視覚化を作成するためのパーフェクト.

基本的な地域アニメーション

キーフレームベースのカラートランジションで特定の領域をアニメーション化:

// Load a world map first
await app.loadMap('world', {
  projection: 'naturalEarth',
  fillColor: '#e2e8f0'
});

// Animate specific regions
app.animateMapRegions({
  duration: 5,
  loop: true,
  regions: {
    'USA': [
      { time: 0, fillColor: '#ef4444' },      // Red at start
      { time: 2.5, fillColor: '#22c55e' },    // Green at midpoint
      { time: 5, fillColor: '#ef4444' }       // Red at end (loops)
    ],
    'France': [
      { time: 0, fillColor: '#3b82f6' },      // Blue at start
      { time: 5, fillColor: '#fbbf24' }       // Yellow at end
    ]
  }
});

波のアニメーション

地理的な位置に基づいて、すべての地域の色の波を作成します

app.animateMapWave({
  duration: 10,
  loop: true,
  colors: ['#ef4444', '#fbbf24', '#22c55e', '#3b82f6'],
  waveDirection: 'horizontal'  // 'horizontal', 'vertical', 'radial'
});

タイムラインの統合

アニメーション領域はTimeline UIと統合します

• タイムラインパネルにアニメーションされた領域が現れます
• 色変化をプレビューする時間を通してスクラブ
• タイムラインコントロールでアニメーションを再生/一時停止
• ビデオまたはGIFにアニメーションをエクスポートする

アニメーションの停止

// Stop all region animations
app.stopMapAnimations();

// Stop specific regions
app.stopMapAnimations({ regions: ['USA', 'Canada'] });

// Stop but preserve current colors
app.stopMapAnimations({ resetColors: false });

アニメーション地域の取得

const animated = app.getAnimatedMapRegions();
// Returns: [{ regionId, keyframes, duration, loop }, ...]

CSVの輸出及び輸入

データ主導の視覚化のための色、ハイライトの状態および選択の状態を含む地域データを輸出し、輸入して下さい.

地域データのエクスポート

// Export all regions with current state
const csv = app.exportMapRegionDataCSV();

// Export with custom options
const csv = app.exportMapRegionDataCSV({
  includeHighlighted: true,  // Include highlight status column
  includeSelected: true,     // Include selection status column
  includeColors: true        // Include fill/stroke colors
});

// Download directly as CSV file
app.downloadMapRegionDataCSV('my-map-data.csv');

CSVのフォーマット:

regionId,name,highlighted,selected,fillColor,strokeColor
USA,United States of America,1,0,#22c55e,#16a34a
CAN,Canada,0,0,#e5e7eb,#9ca3af
FRA,France,1,1,#3b82f6,#2563eb

地域データのインポート

地域の状態を更新するためにCSVデータを輸入して下さい:

// Import from CSV text
app.importMapRegionDataCSV(csvText, {
  applyColors: true,      // Apply fill/stroke colors from CSV
  applyHighlight: true,   // Update highlight status
  applySelection: true    // Update selection status
});

プログラマティックセレクション

// Select regions programmatically
app.selectMapRegions(['USA', 'Canada', 'Mexico']);

// Deselect regions
app.deselectMapRegions(['Mexico']);

// Get highlighted regions
const highlighted = app.getHighlightedMapRegions();
// Returns: ['USA', 'France', ...]

ワークフロー: スプレッドシートベースのマップ編集

1. 地図をロードし、いくつかの地域をハイライト
2. CSVへの輸出:app.downloadMapRegionDataCSV('regions.csv')
3. Excel/Google スプレッドシートで編集(色変更、強調表示=1)
4. インポートバック: app.importMapRegionDataCSV(updatedCsv)

このワークフローは以下に理想的です

• 非技術的なユーザー編集マップデータ
• 多くの地域のバルク更新
• データパイプラインの統合
• バージョン制御のマップ構成

GeoJSONの輸出及び輸入

QGISやMapshaperなどの外部ツールで編集するためのGeoJSONとしてマップをエクスポートし、変更をインポートします.

輸出変更マップ

現在の色とスタイルでマップをエクスポート:

// Export as GeoJSON (includes current colors/styles)
const geoJson = app.exportMapGeoJSON();

// Download directly
app.downloadMapGeoJSON('my-styled-map.geojson');

輸出元の源

地図をロードするために使用されていた正確なGeoJSONをダウンロードしてください(変更されていない境界):

// Get original source data
const original = app.getOriginalMapGeoJSON();

// Download for external editing
app.downloadOriginalMapGeoJSON('world-source.geojson');

インポートカスタムマップ

あなたの編集されたGeoJSONか外的な地図データを輸入して下さい:

// Import from URL
await app.importCustomMap('https://example.com/my-map.geojson');

// Import from object
await app.importCustomMap(editedGeoJson, {
  projection: 'naturalEarth'
});

フルワークフロー: 編集 → インポート → アニメーション

1. ロードとエクスポートオリジナルのマップ:

   await app.loadMap('world');
   app.downloadOriginalMapGeoJSON('world-source.geojson');
   

2. 外部ツールで境界を編集する:

   • QGIS - フル機能GISエディタ
   • Mapshaper - オンラインの簡素化と編集
   • geojson.io - クイックオンラインエディタ

3. 再インポート 編集されたマップ:

   await app.importCustomMap(editedGeoJson, { projection: 'naturalEarth' });
   

4. Animateカスタムマップ:

   app.animateMapRegions({
     duration: 5,
     regions: { 'MyRegion': [{ time: 0, fillColor: '#ef4444' }, ...] }
   });
   

地図 ソース情報

現在ロードされたマップに関する情報を入手:

const info = app.getMapSourceInfo();
// {
//   source: 'world',
//   projection: 'naturalEarth',
//   quality: 'standard',
//   regionCount: 177,
//   hasOriginalGeoJSON: true,
//   isCustomImport: false
// }

外部リソース

地図データソース

変換&編集ツール

フォーマット変換ワークフロー

Shapefile → GeoJSON (Mapshaperを使用して):

1. mapshaper.orgに移動
2. .shpファイルをドラッグ&ドロップ(.dbfと.prjファイルと一緒に)
3. [Simplify] をクリックしてファイルサイズを削減します(Web 用の 10-20% を使用します)
4. クリックしますエクスポート → 選択しますGeoJSON
5. app.importCustomMap()のPinePaperに輸入して下さい

TopoJSON → GeoJSON:

TopoJSONファイルは自動的にPinePaperにインポートしたときに変換されます.

ファイル サイズのヒント

API 参照

プログラマティックマップの制御については、 マップシステムAPIドキュメントを参照してください.