Kartsystem

Skapa fantastiska geografiska visualiseringar med interaktiva kartor, choropleth data färgning och animerade avslöjar.

[World Map Natural Earth] (…/images/map-world-natural-earth.png)

Översikt

Kartsystemet ger:

• World & Regional Maps – Förinstallerade kartor från CDN (värld, USA, Europa etc.)
• Multipelprognoser – Mercator, Natural Earth, Orthographic (globe), Albers och mer
• Region Highlighting* - Marknadsländer, stater eller provinser
• Data Visualization - Choropleth kartor med färgskalor
• Markers & Labels – Lägg till intressepunkter
• Professionell kvalitet – Multipolygonstöd för komplexa länder

Ladda en karta

Från mallar

Det enklaste sättet att komma igång är att använda en karta mall:

1. Öppna panelen Templates*
2. Hitta kategorin Maps**
3. Välj en mall som “Global Expansion Map” eller “US Data Visualization”

Från Generator Panel

1. Öppna panelen Generator*
2. Välj Map som bakgrundstyp
3. Välj en karta (Värld, USA, Europa etc.)
4. Konfigurera projektion och styling

Karttyper

Projektioner

Välj rätt projektion för din visualisering:

Naturlig jord (standard)

Bäst för världskartor. Balanserad förvrängning, ser naturligt ut.

[Natural Earth Projection] (…/images/map-world-natural-earth.png)

Mercator

Bevara vinklar, bekant utseende. Bra för navigationsstilkartor.

Mercator Projection

Ortografiska (Globe)

Visar jorden som en 3D-sfär. Perfekt för fokuserade utsikt över regionen.

Orthographic Globe

Albers USA

Särskild projektion för amerikanska kartor som inkluderar Alaska och Hawaii.

USA Albers

Andra projektioner

• Robinson – kompromissprojektion, bra för världskartor
• Winkel Tripel - Låg förvrängning världsprojektion
• Conic Equal Area - Bra för medelstora regioner

Belysningsregioner

Enskilt land/stat

Klicka på någon region för att välja den Använd sedan panelen Properties för att ändra dess färg.

Flera regioner

Använd API eller mallar för att markera flera regioner:

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

Animerade avslöjanden

Mallar kan animera regionens höjdpunkter med staggered timing för berättande effekter.

Highlighted Regions

Region ID Format

Olika kartor använder olika ID-format:

Data Visualisering (Choropleth)

Färgregioner baserade på datavärden:

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

Färgskalor

Markörer

Lägg till poängmarkörer vid specifika koordinater:

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

Kvalitetsinställningar

Viktigt:** Använd professional kvalitet för länder med komplexa former (Ryssland, Frankrike, USA) för att säkerställa att alla territoriella delar görs korrekt.

Multi-Polygon länder

Vissa länder består av flera bortkopplade delar:

• *Ryssland – Fastland + Kaliningrad + öar
• Frankrike – Fastland + Korsika + utomeuropeiska territorier
• *USA – Fastland + Alaska + Hawaii (i världskartor)
• Indonesien ** - Tusentals öar
• Fiji* - Flera öar

Kartsystemet använder automatiskt Paper.js CompoundPath för dessa länder när kvaliteten är inställd på professional.

Interaktivitet

Hover-effekter

Aktivera hover highlighting:

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

Klicka på Events

Svara på regionklick:

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

Karta mallar

Global expansion karta

Visar affärsexpansion över regioner med animerad fasbaserad höjdpunktering.

US Data Visualization

Visar data över amerikanska stater med choropleth-färgning.

Anpassad karta Import

För detaljerade regionala kartor som inte ingår, använd importCustomMap():

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

Datakällor:

• [Natural Earth] (https://naturalearthdata.com) - Public domain map data
• GADM - Detaljerade administrativa gränser
• Mapshaper - Förenkla GeoJSON-filer

Tips

1. Use worldHighRes för professionell export med flerpolygonländer
2. Natural Earth projektion fungerar bäst för de flesta världskartor
3. Albers USA* är speciellt utformad för amerikanska kartor
4. Ortografisk* skapar dramatiska världsbilder för presentationer
5. Professionell kvalitet förhindrar korruption i komplexa länder

Keyboard Shortcuts

Karta Region Animation

Animera kartregioner med tidslinjeintegrerade färgförändringar. Perfekt för att visa dataförändringar över tiden, globala expansionssekvenser eller skapa engagerande datavisualiseringar.

Grundläggande Region Animation

Animera specifika regioner med nyckelrambaserade färgövergångar:

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

Våg Animation

Skapa en våg av färg i alla regioner baserat på geografisk position:

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

Timeline Integration

Animerade regioner integreras med Timeline UI:

• Animerade regioner visas i tidslinjen panel
• Scrub genom tid för att förhandsgranska färgförändringar
• Spela/pausa animationer med tidslinjens kontroller
• Exportera animationer till video eller GIF

Timeline med Map Animations

Stoppa animationer

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

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

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

Få animerade regioner

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

CSV Export & Import

Exportera och importera regiondata inklusive färger, markera status och valstatus för datadrivna visualiseringar.

Exportera Regiondata

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

Importera Regiondata

Importera CSV-data för att uppdatera regionstaterna:

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

Programmatisk urval

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

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

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

Arbetsflöde: Spreadsheet-Based Map Editing

1. Ladda en karta och markera vissa regioner
2. Export till CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Redigera i Excel/Google Sheets (förändringsfärger, ställ in markerad = 1)
4. Importera tillbaka: app.importMapRegionDataCSV(updatedCsv)

Detta arbetsflöde är idealiskt för:

• Icke-tekniska användare redigerar kartdata
• Bulkuppdateringar till många regioner
• Data pipeline integration
• Version-kontrollerade kartkonfigurationer

GeoJSON Export & Import

Exportera kartor som GeoJSON för redigering i externa verktyg som QGIS eller Mapshaper, sedan återimportera med dina ändringar.

Export modifierad karta

Exportera kartan med aktuella färger och stilar:

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

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

Export originalkälla

Ladda ner den exakta GeoJSON som användes för att ladda kartan (oändliga gränser):

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

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

Importera anpassade kartor

Importera dina redigerade GeoJSON- eller externa kartdata:

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

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

Fullt arbetsflöde: redigera

1. Ladda och export den ursprungliga kartan:

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

2. Redigera gränser i externa verktyg:

   • QGIS - Fullfjädrad GIS-redaktör
   • Mapshaper - Online förenkling och redigering
   • geojson.io - Snabb online redaktör

3. Re-import din redigerade karta:

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

4. ** Animera* din anpassade karta:

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

Kartakälla Info

Få information om den nu laddade kartan:

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

Externa resurser

Karta datakällor

Konvertering och redigering verktyg

Format Conversion Workflow

Shapefile GeoJSON (med Mapshaper):

1. Gå till mapshaper.org
2. Dra och släpp din .shp-fil (tillsammans med .dbf och .prj-filer)
3. Klicka Förenkla för att minska filstorleken (använd 10-20% för webben)
4. Klicka på Export*******************************************************************************************************************************************************************************************************************************************************
5. Importera till PinePaper med app.importCustomMap()

TopoJSON → GeoJSON:

TopoJSON-filer konverteras automatiskt när de importeras till PinePaper.

Filstorlek Tips

API referens

För programmatisk kartkontroll, se [Map System API Documentation] (/api/features/maps).