Kaartsysteem

Maak prachtige geografische visualisaties met interactieve kaarten, choropleth data kleuring, en geanimeerde onthult.

World Map Natural Earth

Overzicht

Het kaartsysteem bevat:

• World & Regional Maps
• Multiple Projections Mercator, Natural Earth, Orthographic (globe), Albers, en meer
• Region Highlighting
• Data Visualisatie
• Markers & Labels
• Professional Quality Meervoudige steun voor complexe landen

Een kaart laden

Van sjablonen

De gemakkelijkste manier om te beginnen is het gebruik van een kaart template:

1. Open het Sjablonen paneel
2. Vind de Maps categorie
3. Kies een sjabloon zoals “Global Expansion Map” of “US Data Visualisatie”

Van Generatorpaneel

1. Open het Generator-paneel
2. Selecteer Kaart als achtergrondtype
3. Kies een kaart (Wereld, VS, Europa, enz.)
4. Projectie en styling configureren

Kaarttypes

Prognoses

Kies de juiste projectie voor uw visualisatie:

Natuurlijke aarde (Standaard)

Beste voor wereldkaarten. Gebalanceerde vervorming, ziet er natuurlijk uit.

Mercator

Behoud hoeken, vertrouwde blik. Goed voor navigatiekaarten.

Orthografische (Globe)

Toont de aarde als een 3D-bol. Geweldig voor gerichte regionale uitzichten.

Albers USA

Speciale projectie voor Amerikaanse kaarten die Alaska en Hawaï herpositioneerde.

! USA Albers

Overige prognoses

• Robinson Compromisprojectie, goed voor wereldkaarten
• Winkel Tripel Lage vervorming wereldprojectie
• Conic Equal Area

Oplichtende regio’s

Eén land/staat

Klik op een regio om het te selecteren , gebruik dan het Eigenschappen paneel om zijn kleur te veranderen.

Meerdere regio’s

Gebruik de API of sjablonen om meerdere regio’s te markeren:

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

Geanimeerde onthullingen

Templates kunnen regio hoogtepunten animeren met gespreide timing voor storytelling effecten.

Regio ID-formaten

Verschillende kaarten gebruiken verschillende ID-formaten:

Visualisatie van gegevens (Choropleth)

Kleurgebieden op basis van gegevenswaarden:

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

Kleurschalen

Markers

Puntmarkeringen toevoegen op specifieke coördinaten:

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

Kwaliteitsinstellingen

Belangrijk: Gebruik professional kwaliteit voor landen met complexe vormen (Rusland, Frankrijk, Verenigde Staten) om ervoor te zorgen dat alle grondgebied delen correct renderen.

Multi-Polygon-landen

Sommige landen bestaan uit meerdere losgekoppelde onderdelen:

• Russië** Mainland + Kaliningrad + eilanden
• Frankrijk
• USA
• Indonesië Duizenden eilanden
• Fiji Meerdere eilanden

Het kaartsysteem gebruikt automatisch Paper.js CompoundPath voor deze landen wanneer de kwaliteit professional wordt ingesteld.

Interactiviteit

Effecten op zweven

Zweefmarkering inschakelen:

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

Klik op evenementen

Reageer op regioklikken:

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

Kaartsjablonen

Globale uitbreidingskaart

Toont bedrijfsuitbreiding in regio’s met geanimeerde fase-gebaseerde highlighting.

US Data Visualisatie

Toont gegevens in Amerikaanse staten met choropleth-kleuring.

Aangepaste kaartimport

Voor gedetailleerde regionale kaarten die niet zijn opgenomen, gebruik importCustomMap():

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

Gegevensbronnen:

• Natural Earth
• GADM
• Mapshaper

Tips

1. Use worldHighRes voor professionele export met multi-polygon landen
2. Natuurlijke aardprojectie werkt het beste voor de meeste wereldkaarten
3. Albers USA is speciaal ontworpen voor Amerikaanse kaarten
4. Orthografische creëert dramatische wereldbeelden voor presentaties
5. Professionele kwaliteit voorkomt vorm corruptie in complexe landen

Sneltoetsen

Kaart regioanimatie

Kaartgebieden animeren met tijdlijn-geïntegreerde kleurveranderingen. Perfect voor het tonen van gegevensveranderingen in de tijd, globale uitbreidingssequenties, of het creëren van aantrekkelijke data visualisaties.

Animatie in de basisregio

Animeer specifieke regio’s met op sleutelframe gebaseerde kleurovergangen:

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

Golfanimatie

Maak een golf van kleur over alle regio’s op basis van geografische positie:

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

Tijdlijnintegratie

Geanimeerde regio’s integreren met de Tijdlijn UI:

• Geanimeerde regio’s verschijnen in het tijdlijnpaneel
• Schrob door de tijd om kleurwijzigingen te bekijken
• Afspelen/pauzeren animaties met de tijdlijn controles
• Animaties exporteren naar video of GIF

Animaties stoppen

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

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

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

Geanimeerde regio’s

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

CSV exporteren & importeren

Exporteer en importeer regiogegevens met inbegrip van kleuren, markeer status, en selectie staat voor data-gedreven visualisaties.

Gegevens over exportgebieden

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

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

Invoer van regiogegevens

CSV-gegevens importeren om regio bij te werken staat:

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

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

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

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

Workflow: Spreadsheet-gebaseerde kaart bewerken

1. Een kaart laden en enkele regio’s markeren
2. Exporteren naar CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Bewerken in Excel/Google Sheets (kleuren wijzigen, gemarkeerd=1 instellen)
4. Terug importeren: app.importMapRegionDataCSV(updatedCsv)

Deze workflow is ideaal voor:

• Niet-technische gebruikers bewerken kaartgegevens
• Bulk updates voor veel regio’s
• Integratie van gegevenspijpleidingen
• Versiegestuurde kaartconfiguraties

GeoJSON exporteren & importeren

Kaarten exporteren als GeoJSON voor het bewerken in externe tools zoals QGIS of Mapshaper, dan opnieuw importeren met uw wijzigingen.

Gewijzigde kaart exporteren

Exporteer de kaart met huidige kleuren en stijlen:

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

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

Oorspronkelijke bron exporteren

Download de exacte GeoJSON die werd gebruikt om de kaart te laden (ongewijzigde grenzen):

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

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

Aangepaste kaarten importeren

Importeer uw bewerkte GeoJSON of externe kaartgegevens:

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

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

Volledige workflow: Bewerken → Herimporteren → Animate

1. Load en export de originele kaart:

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

2. Bewerk grenzen in externe tools:

   • QGIS - Volledige GIS-editor
   • Mapshaper - Online vereenvoudiging en bewerking
   • geojson.io - Snelle online editor

3. Re-import uw bewerkte kaart:

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

4. Animate uw aangepaste kaart:

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

Bron-informatie in kaart brengen

Meer informatie over de huidige geladen kaart:

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

Externe middelen

Gegevensbronnen

Conversie- en bewerkingsinstrumenten

Formaat Conversie Werkstroom

Vormbestand → GeoJSON (met behulp van Mapshaper):

1. Ga naar mapshaper.org
2. Sleep en laat uw .shp-bestand vallen (samen met .dbf en .prj-bestanden)
3. Klik op Vereenvoudig om de bestandsgrootte te verkleinen (gebruik 10-20% voor web)
4. Klik op Export → kies GeoJSON
5. Importeer in PinePaper met app.importCustomMap()

TopoJSON → GeoJSON:

TopoJSON-bestanden worden automatisch omgezet bij import in PinePaper.

Tips voor bestandsgrootte

API-referentie

Zie [Map System API Documentation](/api/features/maps] voor programmamatische kaartbesturing.