Kartsystem

Opprett fantastiske geografiske visualiseringer med interaktive kart, koroplet datafarger og animerte avslører.

World Map Natural Earth

Oversikt

Kartsystemet gir:

• World & Regional Maps — forhåndslastede kart fra CDN (verden, USA, Europa, etc.)
• Multiple projektioner — Mercator, Naturlig Jord, Ortografisk (globe), Albers, og mer
• Regionshøydepunkt — Høydepunkter land, stater eller provinser
• Data Visualisering — Koroplet kart med fargeskalaer
• Markers og etiketter — Legg til severdigheter
• Profesjonell kvalitet — Flerpolygonstøtte for komplekse land

Laster inn et kart

Fra maler

Den enkleste måten å komme i gang på er å bruke en kartmal:

1. Åpne Temales-panelet
2. Finn Maps kategorien
3. Velg en mal som “Global Expansion Map” eller “US Data Visualisering”

Fra Generator Panel

1. Åpne Generator-panelet
2. Velg Kart som bakgrunnstype
3. Velg et kart (World, USA, Europa osv.)
4. Konfigurer projeksjon og styling

Karttyper

Prosjekter

Velg riktig projeksjon for visualiseringen:

Naturlig jord (standard)

Best for verdenskart. Balansert distorsjon, ser naturlig ut.

Naturlig jordprojeksjon

Mercator

Bevarer vinkler, kjent utseende. Bra for kart i navigeringsstil.

Ortografisk (Globe)

Viser jorden som en 3D-sfære. Flott for fokusert utsikt.

Orthografisk Globe

Albers USA

Spesialprojeksjon for amerikanske kart som inkluderer Alaska og Hawaii representert.

Andre prosjekter

• Robinson — Kompromise projeksjon, godt for verdenskart
• Winkel Tripel — Lav distorsjon verden projeksjon
• Konisk likeområde — Bra for midtbreddeområder

Høydepunkter

Enkeltland/stat

Klikk på hvilken som helst region for å velge den , bruk deretter Properties-panelet til å endre fargen.

Flere regioner

Bruk API eller maler til å markere flere regioner:

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

Animerte åpenbaringer

Maler kan animere regionen høydepunkter med stagnert timing for historiefortelling effekter.

Region ID-formater

Ulike kart bruker forskjellige ID-formater:

Data Visualization (Chropleth)

Fargeregioner basert på dataverdier:

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

Fargeskalaer

Markers

Legg til punktmarkører ved bestemte koordinater:

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

Kvalitetsinnstillinger

Viktig: Bruk professional kvalitet for land med komplekse former (Russland, Frankrike, USA) for å sikre alle territorium deler gjøre riktig.

Flerpolygonland

Noen land består av flere frakoblede deler:

• Russland — Mainland + Kaliningrad + øyer
• France — Mainland + Korsika + utenlandske territorier
• USA — Mainland + Alaska + Hawaii (på verdenskart)
• Indonesia — Tusenvis av øyer
• Fiji — Flere øyer

Kartsystemet bruker automatisk Paper.js CompositePath for disse landene når kvaliteten er satt til professional.

Interaktivitet

Hovereffekter

Aktiver swover-merking:

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

Klikk på hendelser

Svar på regionale klikk:

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

Kartmaler

Global Expansion Kart

Viser forretningsutvidelse i hele regionene med animert fasebasert utheving.

US Data Visualisering

Viser data på tvers av USA-stater med koroplet farge.

Custom Map Import

For detaljerte regionale kart som ikke er inkludert, bruk importCustomMap():

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

Datakilder:

• Naturlig jord — Offentlige domenekartdata
• GADM — detaljerte administrative grenser
• Mapshaper - Forenkle GeoJSON-filer

Tips

1. Bruk verdenHighRes for profesjonell eksport med flerpolygon land
2. Natural Earth projeksjon fungerer best for de fleste verdenskart
3. Albers USA er spesielt designet for amerikanske kart
4. Ortografiske skaper dramatiske verdensutsikter for presentasjoner
5. Yrkeskvalitet hindrer korrupsjon i komplekse land

Tastatursnarveier

Kart Region Animasjon

Animere kartområder med tidslinjeintegrerte fargeendringer. Perfekt for å vise dataendringer over tid, globale ekspansjonssekvenser eller skape engasjerende datavisualiseringer.

Basic Region animasjon

Animer spesifikke regioner med nøkkelrammebaserte fargeoverganger:

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

Opprett en bølge av farge i alle regioner basert på geografisk posisjon:

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

Tidslinjeintegrasjon

Animerte regioner integreres med Timeline UI:

• Animerte regioner vises i tidslinjepanelet
• Scrub gjennom tiden for å forhåndsvise fargeendringer
• Spill/pause-animasjoner med tidslinjekontrollene
• Eksporter animasjoner til video eller GIF

Stopper animasjoner

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

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

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

Få animerte regioner

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

CSV Eksporter & import

Eksportere og importere regiondata, inkludert farger, høydepunktsstatus og utvalgstilstand for datadrevet visualisering.

Eksport av 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

Importere regiondata

Importer CSV-data for å oppdatere regionstilstander:

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

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

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

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

Arbeidsflyt: Reknearkbasert kart Redigering

1. Last inn et kart og fremhev noen regioner
2. Eksporter til CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Rediger i Excel/Google-ark (endre farger, sett uthevet=1)
4. Importer tilbake: app.importMapRegionDataCSV(updatedCsv)

Denne arbeidsflyten er ideell for:

• Ikke-tekniske brukere som redigerer kartdata
• Bulk oppdateringer til mange regioner
• Integrasjon av datarørledninger
• Versjonskontrollerte kartkonfigurasjoner

GeoJSON Eksporter & import

Eksporter kart som GeoJSON for å redigere i eksterne verktøy som QGIS eller Mapshaper, og importer deretter igjen med endringene.

Eksporter endret kart

Eksporter kartet med gjeldende farger og stiler:

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

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

Eksporter opprinnelig kilde

Last ned den nøyaktige GeoJSON som ble brukt til å laste kartet (uendrede grenser):

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

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

Importer brukerdefinerte kart

Importer dine redigerte GeoJSON eller eksterne kartdata:

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

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

Full arbeidsflyt: Rediger → Reimport → Animer

1. Last og eksport det opprinnelige kartet:

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

2. Edit grenser i eksterne verktøy:

   • QGIS - Fullverdig GIS redaktør
   • Mapshaper - Online forenkling og redigering
   • geojson.io - Rask online redaktør

3. Re-import ditt redigerte kart:

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

4. Animate ditt egendefinerte kart:

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

Kartkildeinformasjon

Få informasjon om det innlastede kartet:

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

Eksterne ressurser

Kartdatakilder

Konvertere og redigere verktøy

Formater konverteringsarbeidsflyt

Shapefile → GeoJSON (ved hjelp av Mapshaper):

1. Gå til mapshaper.org
2. Dra og slippe .shp-filen (sammen med .dbf og .prj-filer)
3. Klikk Forenkle for å redusere filstørrelsen (bruk 10-20% for nettet)
4. Klikk Eksporter → Velg GeoJSON
5. Importer i PinePaper med app.importCustomMap()

TopoJSON → GeoJSON:

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

Filstørrelsestips

API referanse

For programmatisk kartkontroll, se Kart System API Dokumentasjon.