Kartensystem

Erstellen Sie atemberaubende geografische Visualisierungen mit interaktiven Karten, Choropleth-Datenfärbung und animierten Enthüllungen.

Übersicht

Das Kartensystem bietet:

• Welt- und Regionalkarten - Vorinstallierte Karten von CDN (Welt, USA, Europa usw.)
• Mehrere Projektionen - Mercator, Natural Earth, Orthographic (Globe), Albers und mehr
• Region Highlighting - Länder, Staaten oder Provinzen hervorheben
• Datenvisualisierung — Choropleth-Karten mit Farbskalen
• Marken & Labels - Hinzufügen von Points of Interest
• Professionelle Qualität — Multi-Polygon-Unterstützung für komplexe Länder

Laden einer Karte

Aus Templates

Der einfachste Weg, um zu beginnen, ist die Verwendung einer Kartenvorlage:

1. Öffnen Sie das Templates Panel
2. Finden Sie die Kategorie Maps
3. Wählen Sie eine Vorlage wie “Global Expansion Map” oder “US Data Visualization”

Vom Generator Panel

1. Öffnen Sie das Generator Panel
2. Wählen Sie Map als Hintergrundtyp
3. Wählen Sie eine Karte (Welt, USA, Europa, etc.)
4. Konfiguration von Projektion und Styling

Kartentypen

Projektionen

Wählen Sie die richtige Projektion für Ihre Visualisierung:

Natürliche Erde (Standard)

Am besten für Weltkarten. Ausgewogene Verzerrung, sieht natürlich aus.

Mercer

Bewahrt Winkel, vertrautes Aussehen. Gut für Navigationskarten.

Orthografisch (Globe)

Zeigt die Erde als 3D-Sphäre. Ideal für fokussierte Regionalansichten.

Albers USA

Spezielle Projektion für US-Karten, die Alaska und Hawaii neu positioniert.

Sonstige Projektionen

• Robinson - Kompromissprojektion, gut für Weltkarten
• Winkel Tripel — Weltprojektion mit geringer Verzerrung
• Conic Equal Area - Gut für mittlere Breitenregionen

Hervorhebung der Regionen

Einzelstaat/-staat

Klicken Sie auf eine beliebige Region, um sie auszuwählen Verwenden Sie dann das Properties-Panel, um seine Farbe zu ändern.

Mehrere Regionen

Verwenden Sie API oder Templates, um mehrere Regionen hervorzuheben:

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

Animierte Enthüllungen

Vorlagen können regionale Highlights mit gestaffeltem Timing für Storytelling-Effekte animieren.

Formate der Regionskennung

Verschiedene Karten verwenden unterschiedliche ID-Formate:

Datenvisualisierung (Choropleth)

Farbbereiche basierend auf Datenwerten:

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

Farbskalen

Marker

Fügen Sie Punktmarkierungen an bestimmten Koordinaten hinzu:

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

Qualitätseinstellungen

Wichtig: Verwenden Sie professional-Qualität für Länder mit komplexen Formen (Russland, Frankreich, USA), um sicherzustellen, dass alle Gebietsteile korrekt dargestellt werden.

Multipolygon-Länder

Einige Länder bestehen aus mehreren getrennten Teilen:

• Russland — Festland + Kaliningrad + Inseln
• Frankreich — Festland + Korsika + überseeische Gebiete
• USA — Festland + Alaska + Hawaii (in Weltkarten)
• Indonesien — Tausende von Inseln
• Fiji – Mehrere Inseln

Das Kartensystem verwendet automatisch Paper.js CompoundPath für diese Länder, wenn die Qualität auf professional eingestellt ist.

Interaktivität

Schwebeeffekte

Aktivieren Sie Hover Highlighting:

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

Click Events

Reagieren Sie auf Regionalklicks:

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

Kartenvorlagen

Globale Expansionskarte

Zeigt Geschäftsexpansion über Regionen hinweg mit animiertem phasenbasiertem Highlighting.

US-Datenvisualisierung

Zeigt Daten über US-Bundesstaaten mit choropleth Färbung.

Custom Map Import

Für detaillierte regionale Karten, die nicht enthalten sind, verwenden Sie importCustomMap():

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

Datenquellen:

• Natural Earth — Public Domain Kartendaten
• GADM — Detaillierte Verwaltungsgrenzen
• Mapshaper — GeoJSON-Dateien vereinfachen

Tipps

1. Verwenden Sie worldHighRes für professionelle Exporte mit Multi-Polygon-Ländern
2. Natural Earth Projection funktioniert am besten für die meisten Weltkarten
3. Albers USA wurde speziell für US-Karten entwickelt
4. Orthografisch erstellt dramatische Globusansichten für Präsentationen
5. Professionelle Qualität verhindert Formkorruption in komplexen Ländern

Tastenkürzel

Kartenregion Animation

Animieren Sie Kartenregionen mit zeitlinienintegrierten Farbänderungen. Perfekt, um Datenänderungen im Laufe der Zeit, globale Erweiterungssequenzen oder die Erstellung ansprechender Datenvisualisierungen anzuzeigen.

Animation von Basisregionen

Animieren Sie bestimmte Regionen mit Keyframe-basierten Farbübergängen:

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

Wellenanimation

Erstellen Sie eine Farbwelle in allen Regionen basierend auf der geografischen Position:

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

Timeline-Integration

Animierte Regionen integrieren sich in die Timeline-Benutzeroberfläche:

• Animierte Regionen werden im Timeline-Panel angezeigt
• Scrub durch die Zeit zur Vorschau Farbänderungen
• Play/Pause-Animationen mit den Timeline-Steuerelementen
• Exportieren von Animationen in Video oder GIF

Animationen stoppen

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

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

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

Animierte Regionen erhalten

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

CSV Export & Import

Exportieren und Importieren von Regionsdaten einschließlich Farben, Hervorhebungsstatus und Auswahlstatus für datengesteuerte Visualisierungen.

Daten der exportierenden Region

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

Daten der einführenden Region

Importieren Sie CSV-Daten, um Regionszustände zu aktualisieren:

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

Programmatische Auswahl

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

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

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

Workflow: Tabellenkalkulationsbasierte Kartenbearbeitung

1. Laden Sie eine Karte und markieren Sie einige Regionen
2. Export nach CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Bearbeiten in Excel/Google Sheets (Farben ändern, set highlight=1)
4. Import zurück: app.importMapRegionDataCSV(updatedCsv)

Dieser Workflow ist ideal für:

• Nichttechnische Benutzer, die Kartendaten bearbeiten
• Bulk Updates für viele Regionen
• Integration der Datenpipeline
• Versionsgesteuerte Kartenkonfigurationen

GeoJSON Export & Import

Exportieren Sie Karten als GeoJSON zum Bearbeiten in externen Tools wie QGIS oder Mapshaper und importieren Sie sie dann mit Ihren Änderungen erneut.

Export Modified Map

Exportieren Sie die Karte mit aktuellen Farben und Stilen:

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

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

Ursprüngliche Ausfuhrquelle

Laden Sie genau das GeoJSON herunter, das zum Laden der Karte verwendet wurde (unmodifizierte Grenzen):

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

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

Import Custom Maps

Importieren Sie Ihre bearbeiteten GeoJSON- oder externen Kartendaten:

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

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

Full Workflow: Bearbeiten → Reimportieren → Animate

1. Laden und Exportieren der Originalkarte:

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

2. Grenzen bearbeiten in externen Tools:

   • QGIS - Voll funktionsfähiger GIS-Editor
   • Mapshaper - Online-Vereinfachung und Bearbeitung
   • geojson.io - Quick Online Editor

3. **Reimportieren Sie Ihre bearbeitete Karte:

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

4. **Animieren Sie Ihre benutzerdefinierte Karte:

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

Kartenquelle Infos

Erhalten Sie Informationen über die aktuell geladene Karte:

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

Externe Ressourcen

Kartendatenquellen

Conversion & Editing Tools

Format Conversion Workflow

Shapefile → GeoJSON (mit Mapshaper):

1. Gehen Sie zu mapshaper.org
2. Drag and Drop Ihrer .shp-Datei (zusammen mit .dbf- und .prj-Dateien)
3. Klicken Sie auf Vereinfachen, um die Dateigröße zu reduzieren (verwenden Sie 10-20% für das Web)
4. Klicken Sie Export → wählen GeoJSON
5. Import in PinePaper mit app.importCustomMap()

TopoJSON → GeoJSON:

TopoJSON-Dateien werden beim Import in PinePaper automatisch konvertiert.

File Size Tipps

API Referenznummer

Für programmatische Kartensteuerung siehe Kartensystem API Dokumentation.