Kortsystem

Opret fantastiske geografiske visualiseringer med interaktive kort, koreplet data farve, og animeret afslører.

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

Oversigt

Kortsystemet indeholder:

• • • World & Regional Maps * * - forudindlæste kort fra CDN (verden, USA, Europa osv.)
• • • Flere projections * * - Mercator, Natural Earth, Orthographic (globe), Albers, og mere
• • • Region Fremhævning * * - Fremhævning lande, stater eller provinser
• • • Data Visualisering * * - Korolte kort med farveskalaer
• • • markører og etiketter * * - Tilføj punkter af interesse
• • • Professionel kvalitet * * - Multipolygon støtte til komplekse lande

Indlæser et kort

Fra skabeloner

Den nemmeste måde at komme i gang er at bruge en kortskabelon:

1. Åbn panelet * * Skabeloner * *
2. Find kategorien * * Kort * *
3. Vælg en skabelon som “Global Expansion Map” eller “US Data Visualisering”

Fra generatorpanel

1. Åbn panelet * * Generator * *
2. Vælg * * Kort * * som baggrundstype
3. Vælg et kort (verden, USA, Europa osv.)
4. Indstil projektion og styling

Korttyper

Fremskrivninger

Vælg den rigtige projektion for din visualisering:

Naturlig jord (standard)

Bedste for verdenskort. Balanceret forvrængning, ser naturlig ud.

! [Naturlig Jord Projection] (…/images/map-world-natural-earth.png)

Mercator

Bevarer vinkler, kender udseende. Godt for Navigation- stil kort.

! [Mercator Projection] (…/images/map-mercator-projection.png)

Orthografisk (Globe)

Viser Jorden som en 3D-kugle. Godt for fokus region synspunkter.

Albers USA

Speciel projektion for amerikanske kort, der omfatter Alaska og Hawaii omplaceret.

! [USA Albers] (…/images/map-usa-albers.png)

Andre fremskrivninger

• • • Robinson * * - Kompromise projektion, godt for verdenskort
• • • Winkel Tripel * * - Lav forvrængning verden projektion
• • • Conic Equal Area * * - God til midterbreddegrad regioner

Fremhævning af regioner

Enkeltland / stat

Klik på enhver region for at vælge det, derefter bruge Egenskaber panel til at ændre sin farve.

Flere regioner

Brug API eller skabeloner til at fremhæve flere regioner:

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

Animeret materiale

Skabeloner kan animere region højdepunkter med forskudt timing for historiefortælling effekter.

! [fremhævet regioner] (…/images/map-world-highlighted.png)

Regions ID-formater

Forskellige kort bruger forskellige ID-formater:

Datavisualisering (Koroldt)

Farveregioner baseret på dataværdier:

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

Farveskalaer

Mærkning

Tilføj punktmarkører ved specifikke koordinater:

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

Kvalitetsindstillinger

• • Vigtigt: * * Brug professional kvalitet til lande med komplekse former (Rusland, Frankrig, USA) for at sikre alle territorier dele gøre korrekt.

Multipolygon-lande

Nogle lande består af flere frakoblede dele:

• • • Rusland * * - Mainland + Kaliningrad + øer
• • • Frankrig * * - Mainland + Korsika + oversøiske territorier
• • • USA * * - Mainland + Alaska + Hawaii (i verdenskort)
• • • Indonesien * * - Tusindvis af øer
• • • Fiji * * - Flere øer

Kortsystemet bruger automatisk Paper.js CompoundPath til disse lande, når kvaliteten er indstillet til professional.

Interaktivitet

Hover-effekter

Aktivér flyverfremhævning:

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

Klik på begivenheder

Svar på regionale klik:

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

Kortskabeloner

Globalt udvidelseskort

Viser forretningsekspansion på tværs af regioner med animeret fasebaseret fremhævelse.

US Data Visualisering

Viser data på tværs af USA 's stater med koretit farve.

Importér brugerdefinerede kort

For detaljerede regionale kort ikke inkluderet, brug importCustomMap():

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

Datakilder:

• [Natural Earth] (https://naturalearthdata.com) - Offentlig domæne kortdata
• [GADM] (https://gadm.org) - Detaljerede administrative grænser
• [Mapshaper] (https://mapshaper.org) - Forenkle GeoJSON filer

Tips

1. • • Brug World HighRes * * for professionel eksport med multi-polygon lande
2. • • Naturlig Jord projektion * * virker bedst for de fleste verdenskort
3. • • Albers USA * * er specielt designet til amerikanske kort
4. • • Orthographic * * skaber dramatisk globus udsigt til præsentationer
5. • • Professionel kvalitet * * forhindrer form korruption i komplekse lande

Tastaturgenveje

Kort region Animation

Animér kortområder med tidslinje-integrerede farveændringer. Perfekt til at vise dataændringer over tid, globale ekspansion sekvenser, eller skabe engagerende data visualiseringer.

Basic Region Animation

Animér specifikke regioner med nøgleramme-baserede farveovergange:

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

Bølgeanimation

Opret en farvebølge på tværs af alle regioner baseret på geografisk position:

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

Integration af tidslinje

Animerede regioner integreres med tidslinjen UI:

• Animerede regioner vises i tidslinjen panel
• Scrub gennem tid til at få vist farveændringer
• Spil / pause animationer med tidslinjen kontrol
• Eksportér animationer til video eller GIF

! [Tidslinje med kort animationer] (…/images/timeline-with-keyframes.png)

Stop 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å animerede regioner

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

CSV Eksportér & import

Eksport og import region data, herunder farver, fremhæve status, og udvælgelse tilstand for datadrevet visualiseringer.

Eksporterende regionale 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

Import af regionale data

Importér CSV data for at opdatere region hedder:

// 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 udvælgelse

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

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

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

Arbejdsgang: Spreadsheet- baseret kortredigering

1. Indlæs et kort og fremhæv nogle regioner
2. Eksport til CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Redigér i Excel / Google ark (ændre farver, sæt markeret = 1)
4. Importér tilbage: app.importMapRegionDataCSV(updatedCsv)

Denne arbejdsgang er ideel til:

• Ikke-tekniske brugere redigerer kortdata
• Bulk opdateringer til mange regioner
• Integration af dataledninger
• Versionsstyrede kortkonfigurationer

GeoJSON Eksportér & import

Eksportér kort som GeoJSON til redigering i eksterne værktøjer som QGIS eller Mapshaper, derefter re- import med dine ændringer.

Eksportér ændret kort

Eksportér kortet med aktuelle farver og stilarter:

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

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

Eksportér oprindelig kilde

Download nøjagtigt den GeoJSON der blev brugt til at indlæse kortet (uændrede grænser):

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

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

Importér brugerdefinerede kort

Importér dine redigerede GeoJSON eller eksterne kortdata:

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

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

Fuld arbejdsgang: Re- import → Animate

1. • • Indlæs og eksport * * det oprindelige kort:

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

2. • • Redigér grænser * * i eksterne værktøjer:
   • [QGIS] (https://qgis.org) - Full- featured GIS editor
   • [Mapshaper] (https://mapshaper.org) - Online forenkling og redigering
   • [geojson.io] (https://geojson.io) - Hurtig online editor
3. • • Genimport * * dit redigerede kort:

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

4. • • Animér * * dit brugerdefinerede kort:

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

Kortkilde-info

Få oplysninger om kortet som for øjeblikket er indlæst:

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

Eksterne ressourcer

Kortdatakilder

Konvertering og redigeringsværktøjer

Format Konvertering Workflow

Shapefile → GeoJSON (bruger Mapshaper):

1. Gå til [mapformer.org] (https://mapshaper.org)
2. Træk og slip din .shp fil (sammen med .dbf og .prj filer)
3. Klik på * * Forenkling * * for at reducere filstørrelsen (brug 10- 20% for web)
4. Klik på * * Eksportér * → vælg * * GeoJSON * *
5. Import til PinePaper med app.importCustomMap()

TopoJSON → GeoJSON:

TopoJSON filer konverteres automatisk, når de importeres til PinePaper.

Fil Størrelsestips

API Reference

For programmatisk kortstyring, se [Kortsystem API Dokumentation] (/api/features/maps).