Sistem Peta

Buat visualisasi geografis yang menakjubkan dengan peta interaktif, pewarnaan data choroplets, dan animasi mengungkapkan.

! (…/images/map-world-natural-earth.png)

Tinjau

Sistem Peta menyediakan:

• • • World & Regional Maps * * - Pre-loaded map dari CDN (dunia, USA, Eropa, dll)
• • • Multiple Projection * * - Mercator, Natural Earth, Ortografi (globe), Albers, dan banyak lagi
• • • Penyorotan Daerah * * - Menandai negara, negara, atau provinsi
• • • Visualisasi Data * * - Peta Choropled dengan skala warna
• • • Markers & Label * * - Tambahkan poin bunga
• • • Kualitas Profesional * * - Dukungan multi- poligon untuk negara-negara kompleks

Memuat Peta

Dari Templat

Cara termudah untuk memulai adalah dengan menggunakan template peta:

1. Buka panel * * Templat * *
2. Temukan kategori * * Maps * *
3. Pilih template seperti “Peta Ekspansi Global” atau “Visualisasi Data AS”

Dari Panel Generator

1. Buka panel * * Generator * *
2. Pilih * * Peta * * sebagai tipe latar belakang
3. Pilih peta (Dunia, Amerika Serikat, Eropa, dll)
4. Atur proyeksi dan gaya

Tipe Peta

Proyeksi

Pilih proyeksi yang tepat untuk visualisasi Anda:

Alam Bumi (Baku)

Terbaik untuk peta dunia. Distorsi seimbang, terlihat alami.

Mercator

Menjaga sudut, terlihat akrab. Bagus untuk peta navigasi.

Ortografi (Globe)

Menunjukkan Bumi sebagai bola 3D. Great untuk fokus daerah tampilan.

Albers USA

Proyeksi khusus untuk peta AS termasuk Alaska dan Hawaii direposisi.

Proyeksi Lain

• • • Robinson * * - Proyeksi kompromi, baik untuk peta dunia
• • • Winkel Tripel *
• • • Conic Equal Area * * - Baik untuk daerah tengah-lintang

Region Penyorotan

Negara / Negara Tunggal

Klik pada wilayah manapun untuk memilihnya, lalu gunakan panel Properti untuk mengubah warnanya.

Beberapa Regions

Gunakan API atau templat untuk menyoroti beberapa daerah:

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

Animated Reveals

Templat dapat menghidupkan daerah highlights dengan waktu terhuyung untuk efek bercerita.

! (…/images/map-world-highlighted.png)

Format ID Daerah

Peta berbeda menggunakan format ID yang berbeda:

Visualisasi data (Choroplets)

Daerah warna berbasis nilai data:

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

Skala Warna

Penanda

Tambahkan penanda titik pada koordinat spesifik:

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

Pengaturan Kualitas

• • Penting: * * Gunakan kualitas professional untuk negara-negara dengan bentuk kompleks (Rusia, Perancis, Amerika Serikat) untuk memastikan semua bagian wilayah merender dengan benar.

Negara Multi- Polygon

Beberapa negara terdiri dari beberapa bagian yang terputus:

• • • Rusia * * - Daratan + Kaliningrad + pulau
• • • Perancis * * - Mainland + Corsica + wilayah luar negeri
• • • USA * * - Mainland + Alaska + Hawaii (dalam peta dunia)
• • • Indonesia * * - Ribuan pulau
• • • Fiji * * - Beberapa pulau

Sistem Peta secara otomatis memakai CompoundPath Paper.js bagi negara-negara ini ketika kualitas diatur ke professional.

Interaktivitas

Efek Hover

Aktifkan penandaan hover:

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

Klik Kejadian

Respon ke daerah klik:

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

Templat Peta

Peta Ekspansi Global

Menunjukkan ekspansi bisnis di seluruh daerah dengan fase animasi-berbasis penandaan.

Visualisasi Data AS

Tampilkan data di seluruh AS dengan mewarnai choroplets.

Impor Peta Gubahan

Untuk peta regional rinci tidak termasuk, gunakan importCustomMap():

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

Sumber Data:

• [Alam Bumi] (https://naturalearthdata.com) - Data peta domain publik
• Font color = “# 404040” GADM: (https://gadm.org) - Detaled batas administratif
• [Mapshaper] (https://mapshaper.org) - Berkas GeoJSON Sederhana

Tips

1. • • Gunakan World Hightower * * Untuk ekspor profesional dengan banyak negara-negara poligon
2. • • Proyeksi alam Bumi * * bekerja terbaik untuk peta dunia
3. • • Albers USA * * dirancang khusus untuk peta AS
4. • • Ortografi * * menciptakan pandangan dunia dramatis untuk presentasi
5. • • Kualitas Profesional * * Mencegah bentuk korupsi di negara-negara kompleks

Pintas Papan Ketik

Animasi Daerah Peta

Daerah peta animasi dengan perubahan warna terpadu waktu. Sempurna untuk menampilkan perubahan data dari waktu ke waktu, rangkaian ekspansi global, atau menciptakan visualisasi data yang menarik.

Animasi Daerah Dasar

Animasi daerah tertentu dengan keyframe- berbasis transisi warna:

// 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
    ]
  }
});

Animasi Gelombang

Buat gelombang warna di seluruh daerah berdasarkan posisi geografis:

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

Integrasi Timeline

Daerah animasi terintegrasi dengan UI Timeline:

• Daerah animasi muncul di panel Timeline
• Scrub melalui waktu untuk pratinjau perubahan warna
• Putar / pause animasi dengan kendali timeline
• Ekspor animasi ke video atau GIF

! (…/images/timeline-with-keyframes.png)

Menghentikan Animasi

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

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

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

Mendapatkan Regions Animasi

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

Ekspor CSV & Impor

Ekspor dan impor data wilayah termasuk warna, status sorot, dan keadaan pemilihan untuk visualisasi data-didorong.

Mengekspor Data Daerah

// 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');

Format 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

Mengimpor Data Daerah

Impor data CSV ke keadaan daerah update:

// 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
});

Pemilihan Programtik

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

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

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

Menurut Penyuntingan Peta

1. Muat suatu peta dan sorot beberapa daerah
2. Ekspor ke CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Edit in Excel / Google Sheets (mengubah warna, set disorot = 1)
4. Impor kembali: app.importMapRegionDataCSV(updatedCsv)

Aliran kerja ini ideal untuk:

• Pengguna tak-teknis menyunting data peta
• Pemutakhiran buk ke banyak daerah
• Integrasi pipa data
• Konfigurasi peta terkontrol

Ekspor GeoJSON & Impor

Ekspor peta sebagai GeoJSON untuk penyuntingan dalam perangkat eksternal seperti QGIS atau Mapshper, lalu import ulang dengan modifikasi Anda.

Ekspor Peta Yang Diubah

Ekspor peta dengan warna dan gaya saat ini:

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

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

Ekspor Sumber Asli

Unduh GeoJSON yang tepat yang dipakai untuk memuat peta (batasan yang tidak diubah):

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

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

Impor Peta Kustom

Impor data peta eksternal dan GeoJSON yang diedit:

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

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

Full Workflow: Edit --help Re-import Az Animate

1. • • Muat dan ekspor * * peta asli:

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

2. • • Sunting batas * * dalam alat eksternal:
   • [QGIS] (https://qgis.org) - Penyunting GIS-penuh-fitur
   • [Mapshoper] (https://mapshaper.org) - Penyederhanaan online dan penyuntingan
   • [geojson.io] (https://geojson.io) - Editor online Cepat
3. • • Re-import * * peta diedit:

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

4. • • Animate * * peta gubahan Anda:

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

Info Sumber Peta

Dapatkan informasi tentang peta yang saat ini dimuat:

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

Sumber Daya Eksternal

Sumber Data Peta

Konversi & Sunting Perkakas

Format Conversion Workflow

Shapefile £GeoJSON (menggunakan Mapshoper):

1. Pergi ke [mapshaper.org] (https://mapshaper.org)
2. Seret dan jatuhkan berkas .shp Anda (bersama dengan berkas .dbf dan .prj)
3. Klik * * Simplify * * untuk mengurangi ukuran berkas (gunakan 10-20% untuk web)
4. Klik * * Ekspor * * Option * * GeoJSON * *
5. Impor ke PinePaper dengan app.importCustomMap()

TopoJSON GeoJSON:

Berkas TopoJSON secara otomatis dikonversi ketika diimpor ke PinePaper.

Ukuran Tips Berkas

Referensi API

Untuk kontrol peta programmatic, lihat [Sistem Peta API Dokumentasi] (/api/features/maps).