Map System

Etkileşimli haritalarla çarpıcı coğrafi görselleştirmeler oluşturun, ikonik veri rengi ve animasyonu ortaya çıkarır.

Dünya Haritası Doğal Dünya

Genel Bakış

Map System sağlar:

• World & Regional Maps – CDN (world, USA, Europe, vs.) tarafından yüklenen haritalar
• **Multiple Projections – Mercator, Natural Earth, Orthografik (globe), Albers ve daha fazlası
• Yüksek ışıklandırma - Yüksek ışık ülkeleri, devletler veya şehirler
• Data Visualization - Renk ölçekleri ile Choropleth haritaları
• Markers & Etiketler - İlgi noktaları ekleyin
• Professional Quality - Karmaşık ülkeler için Multi-poligon desteği

Bir Harita Yükleniyor

Şablonlardan

Başlamak için en kolay yol harita şablonu kullanıyor:

1. Templates Panel
2. Maps kategorisini bul
3. “Küresel Genişleme Haritası” veya “US Data Visualization” gibi bir şablon seçin

Jeneratör Panel

1. Generator Panel
2. Select Map Arka tip olarak
3. Bir harita seçin (Dünya, ABD, Avrupa, vb.)
4. Tasarım ve stil

Harita türleri

Projections

Görselleştirmeniz için doğru projeksiyonu seçin:

Doğal Dünya (Default)

Dünya haritaları için en iyisi. Dengeleme, doğal görünüyor.

Doğal Dünya Projesi

Mercator

Kapılar, tanıdık bakış. navigasyon tarzı haritalar için iyi.

Mercator Projection

Orthografik (Globe)

Dünya’yı 3D alan olarak gösterir. Oda görüşleri için büyük.

Orthografik Globe

Albers USA

Alaska ve Hawaii’yi içeren ABD haritaları için özel projeksiyon.

USA Albers

Diğer Projeions

• Robinson – Tahmini, dünya haritaları için iyi
• Winkel Tripel - Low diagram dünya projeksiyonu
• Conic Equal Area - Orta-datitude bölgeleri için iyi

Yüksek Aydınlatma Bölgeleri

Tek Ülke / Devlet

Onu seçmek için herhangi bir bölgeye tıklayın Sonra, Özellikler Panelini rengini değiştirmek için kullanın.

Çoklu Bölgeler

Birden çok bölgeyi vurgulamak için API veya şablonları kullanın:

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

Animasyon Açıklar

Şablonlar, hikaye anlatımının etkileri için sabit zamanlama ile ilgili bir bölge çizebilir.

Highlighted regions

Bölge ID Formats

Farklı haritalar farklı kimlik biçimleri kullanır:

Data Visualization (Choropleth)

Veri değerlerine dayanan renkli bölgeler:

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

Renk Ölçeği

Markers

Belirli koordinatlarda nokta işaretleyicileri ekleyin:

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

Kalite Ayarları

İmportant: professional kalitesini karmaşık şekilleri olan ülkeler için kullanın (Rusya, Fransa, ABD) tüm bölgeleri doğru hale getirmek için.

Çok-Polygon Ülkeler

Bazı ülkeler birden çok parçadan oluşuyordu:

• Rusya – Mainland + Kaliningrad + ada
• Fransa - Mainland + Corsica + yurtdışı bölgeleri
• USA - Mainland + Alaska + Hawaii (dünya haritaları)
• Indonesia - Binlerce ada
• Fiji - Birden çok ada

Map System otomatik olarak Paper.js bileşiklerini bu ülkeler için professional’ye ayarlandığında kullanır.

Interaktivite

Hover Effects

Enable hover vurgulamak:

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

Click Events

Bölge tıklamalarına yanıt verin:

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

Map Templates

Global genişleme Map Map Map Map Map

Sahneye dayalı vurgulanan bölgelerde iş genişlemesini gösterin.

ABD Data Visualization

Amerika Birleşik Devletleri’ndeki verileri canlı renklerle gösterir.

Özel Map Import

Dahil olmayan ayrıntılı bölgesel haritalar için importCustomMap():

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

Data Sources:

• Doğal Dünya – Public domain harita verileri
• GADM - Detaylı yönetim sınırları
• Mapshaper – GeoJSON dosyalarını basitleştiriyor

İpuçları

1. Use worldHighRes for professional export with multi-poligon countries
2. Doğal Dünya projeksiyonu çoğu dünya haritaları için en iyi şekilde çalışır
3. Albers ABD özellikle ABD haritaları için tasarlanmıştır
4. Orthografik sunumlar için dramatik dünya görüşlerini yaratır
5. Professional quality karmaşık ülkelerde şekil yolsuzluklarını engeller

Finger Shortcuts

Harita Bölge Animation

Animate harita bölgeleri zamanlayıcı renkli değişikliklerle. Zaman içinde veri değişikliklerini göstermek için mükemmel, küresel genişleme dizileri veya ilgi çekici veri görselleştirmeleri oluşturmak.

Temel Bölge Animasyonu

Anahtar tabanlı renk geçişleri ile belirli bölgeleri anlayın:

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

Wave Animation

Coğrafi pozisyona dayanan tüm bölgelerde bir renk dalgası oluşturun:

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

Zaman

Hareketli bölgeler Timeline UI ile bütünleşiyor:

• Hareketli bölgeler Timeline panelinde görünüyor
• Renkli değişiklikleri önizlemek için zaman içinde Scrub
• Play/pause animasyonları zaman kontrolleri ile
• Video veya GIF için ihracat animasyonları

Map Animations ile Zaman Çizelgesi

Animasyonları Durdurmak

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

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

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

Hareketli Bölgeler Olmak

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

CSV Export & Import

Renkler, vurgu durumu ve veri odaklı görselleştirmeler için ihracat ve ithalat bölgesi verileri.

Bölge Data

// 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 Format:

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

Bölge Data

Bölge eyaletlerini güncellemek için CSV verileri:

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

Programmatic Selection

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

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

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

İş Akışı: Sayısal Map Editing

1. Bir harita yüklemek ve bazı bölgeleri vurgulamak
2. CSV’a ihracat: app.downloadMapRegionDataCSV('regions.csv')
3. Excel / Google Dokümanları’nda Düzenleme (Değişen renkler, vurgulandı=1)
4. Import back: app.importMapRegionDataCSV(updatedCsv)

Bu iş akışı için idealdir:

• Teknik olmayan kullanıcılar düzenleme harita verileri
• Birçok bölgeye toplu güncelleştirmeler
• Data pipeline entegrasyonu
• Version- kontrollü harita konfigürasyonları

GeoJSON Export & Import

QGIS veya Mapshaper gibi dış araçlarda düzenleme için GeoJSON olarak ihracat haritaları, sonra değişikliklerinizle yeniden bağlantı kurun.

Export Modified Map

Mevcut renkler ve stilleri ile haritayı açın:

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

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

Export Original Source

Haritayı yüklemek için kullanılan tam GeoJSON’i indirin (modize edilmiş sınırları):

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

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

İthalat Özel Haritalar

Düzenlenen GeoJSON veya dış harita verilerinizi kullanın:

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

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

Full Workflow: Edit → Re-import

1. Load ve ihracat orijinal harita:

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

2. Edit sınırları dış araçlarda:

   • QGIS - Full-featured GIS editörü
   • Mapshaper - Online basitleştirme ve düzenleme
   • geojson.io - Hızlı online editör

3. Re-import sizin editör haritanız:

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

4. Animate Özel haritanız:

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

Map Source Info

Şu anda yüklenen harita hakkında bilgi alın:

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

Dış Kaynaklar

Map Data Sources

Dönüşüm & Düzenleme Araçları

Biçim Dönüşümü İş Akışı

Formfile → GeoJSON (tek Mapshaper):

1. Go to mapshaper.org
2. Drag ve .shp dosyasınınızı bırakın (.dbf ve .prj dosyaları ile birlikte)
3. Click Simplify dosya boyutunu azaltmak için ( web için% 10-20)
4. Click Export → seçim GeoJSON
5. app.importCustomMap()0Q ile PinePaper’i ithal edin

TopoJSON → GeoJSON:

TopoJSON dosyaları otomatik olarak PinePaper’e ithal edildiğinde dönüştürülür.

Dosya Boyut İpuçları

API Referans

Programmatik harita kontrolü için Map Sistemi API Dokümantasyon.