Système de cartographie

Créez d’étonnantes visualisations géographiques avec des cartes interactives, coloriage des données choropleth et des révélations animées.

[Carte mondiale de la Terre naturelle] (…/images/map-world-natural-earth.png)

Aperçu général

Le système Map fournit:

• Cartes mondiales et régionales — Cartes préchargées du CDN (monde, États-Unis, Europe, etc.)
• Projections multiples — Mercateur, Terre naturelle, Orthographique (globe), Albers, et plus
• La région met en évidence — Mettre en évidence les pays, États ou provinces
• Visualisation des données — Cartes Choropleth avec échelles de couleurs
• Marques et étiquettes — Ajouter des points d’intérêt
• Qualité professionnelle — Soutien multipolygonique aux pays complexes

Chargement d’une carte

Modèles

La meilleure façon de commencer est d’utiliser un modèle de carte :

1. Ouvrir le panneau Templates
2. Trouvez la catégorie Cartes
3. Choisissez un modèle comme “Global Expansion Map” ou “US Data Visualization”

Groupe électrogène

1. Ouvrir le panneau Generator
2. Sélectionnez Map comme type de fond
3. Choisissez une carte (World, USA, Europe, etc.)
4. Configuration de la projection et du style

Types de cartes

Projections

Choisissez la bonne projection pour votre visualisation :

Terre naturelle (défaut)

Le meilleur pour les cartes du monde. Une distorsion équilibrée, semble naturelle.

[Projection de la Terre naturelle] (…/images/map-world-natural-earth.png)

Mercator

Préserve des angles, un look familier. Bon pour les cartes de navigation.

[Projection de l’opérateur] (…/images/map-mercator-projection.png)

Orthographe (Globe)

Montre la Terre comme une sphère 3D. Idéal pour des vues régionales ciblées.

[ Globe Orthographique] (…/images/map-orthographic-globe.png)

Albers États-Unis

Projection spéciale pour les cartes américaines comprenant l’Alaska et Hawaii repositionnés.

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

Autres projections

• Robinson — Projection de compromis, bonne pour les cartes du monde
• Winkel Tripel — Projection mondiale à faible distorsion
• Conic Equal Area — Bon pour les régions de latitude moyenne

Régions en surbrillance

Pays/État unique

Cliquez sur n’importe quelle région pour la sélectionner , puis utilisez le panneau Propriétés pour changer sa couleur.

Régions multiples

Utilisez le API ou des modèles pour mettre en évidence plusieurs régions :

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

Révélateurs animés

Les modèles peuvent animer les faits saillants de la région avec un calendrier décalé pour les effets de narration.

Régions en évidence

Formats d’identification régionale

Différentes cartes utilisent différents formats d’identification:

Visualisation des données (Choropleth)

Régions de couleur basées sur des valeurs de données:

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

Échelles de couleurs

Marqueurs

Ajouter des marqueurs à des coordonnées spécifiques:

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

Paramètres de qualité

Important: Utilisez la qualité professional pour les pays aux formes complexes (Russie, France, USA) afin d’assurer que toutes les parties du territoire soient correctement rendues.

Pays multipolygones

Certains pays se composent de plusieurs pièces déconnectées:

• Russie — Partie continentale + Kaliningrad + îles
• France — Région continentale + Corse + territoires d’outre-mer
• USA — Partie continentale + Alaska + Hawaii (sur les cartes du monde)
• Indonésie — Des milliers d’îles
• Fidji — Plusieurs îles

Le système Map utilise automatiquement Paper.js CompoundPath pour ces pays lorsque la qualité est définie à professional.

Interactivité

Effets de Hover

Activer la mise en surbrillance :

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

Cliquez sur Événements

Répondre aux clics régionaux :

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

Modèles de cartes

Carte de l’expansion mondiale

Montre l’expansion des entreprises dans les régions avec une mise en évidence animée basée sur la phase.

Visualisation des données américaines

Affiche les données à travers les états américains avec coloration choropleth.

Importation de carte personnalisée

Pour les cartes régionales détaillées non incluses, utilisez importCustomMap() :

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

Sources de données :

• [Terre naturelle] (https://naturalearthdata.com) — Données cartographiques de domaine public
• GADM — Limites administratives détaillées
• Mapshaper — Simplifier les fichiers GeoJSON

Conseils

1. Utiliser WorldHighRes pour les exportations professionnelles avec des pays multipolygones
2. La projection naturelle de la Terre fonctionne mieux pour la plupart des cartes du monde
3. Albers USA est spécialement conçu pour les cartes américaines
4. Orthographique crée des vues du globe dramatiques pour les présentations
5. La qualité professionnelle prévient la corruption dans les pays complexes

Raccourcis clavier

Carte Région Animation

Les régions de cartes animées avec des changements de couleurs intégrés dans la chronologie. Parfait pour montrer les changements de données au fil du temps, les séquences d’expansion globale ou créer des visualisations de données engageantes.

Animation régionale de base

Animer des régions spécifiques avec des transitions de couleurs basées sur l’image clé:

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

Animation des vagues

Créer une vague de couleur dans toutes les régions en fonction de la position géographique :

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

Intégration des délais

Les régions animées s’intègrent à l’assurance-chômage chronologique :

• Les régions animées apparaissent dans le tableau de bord
• Scrub dans le temps pour prévisualiser les changements de couleur
• Jouer/pause des animations avec les commandes de timeline
• Exporter des animations vers vidéo ou GIF

Horloge avec les animations de cartes

Arrêter les animations

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

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

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

Obtenir des régions animées

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

CSV Exportation et importation

Données de région d’exportation et d’importation, y compris les couleurs, l’état de mise en évidence et l’état de sélection pour les visualisations axées sur les données.

Données régionales exportatrices

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

Format CSV :

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

Importation de données régionales

Importer les données CSV pour mettre à jour la région :

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

Sélection programmatique

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

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

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

Flux de travail: Édition de cartes par feuille de calcul

1. Charger une carte et mettre en évidence certaines régions
2. Exportation vers CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Modifier dans Excel/Google Sheets (changer les couleurs, set surligné=1)
4. Importer en arrière : app.importMapRegionDataCSV(updatedCsv)

Ce workflow est idéal pour :

• Les utilisateurs non techniques éditent les données cartographiques
• Mises à jour en vrac de nombreuses régions
• Intégration des pipelines de données
• Configurations de cartes contrôlées par version

GeoJSON Exportation et importation

Exportez les cartes comme GeoJSON pour l’édition d’outils externes comme QGIS ou Mapshaper, puis réimportez avec vos modifications.

Carte modifiée de l’exportation

Exporter la carte avec les couleurs et les styles actuels:

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

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

Source originale d’exportation

Télécharger le GeoJSON exact utilisé pour charger la carte (limites non modifiées) :

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

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

Importer des cartes personnalisées

Importez vos données de cartes GeoJSON ou externes modifiées :

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

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

Full Workflow: Modifier → Réimporter → Animer

1. Charger et exporter la carte originale:

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

2. Modifier les limites dans les outils externes :

   • QGIS - Éditeur de SIG complet
   • Mapshaper - Simplification et édition en ligne
   • geojson.io - Éditeur en ligne rapide

3. Re-import votre carte modifiée:

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

4. Animate votre carte personnalisée:

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

Carte Source Info

Obtenez des informations sur la carte actuellement chargée:

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

Ressources extérieures

Sources des données cartographiques

Outils de conversion et de modification

Flux de travail de conversion du format

Shapefile → GeoJSON (en utilisant Mapshaper) :

1. Aller à mapshaper.org
2. Faites glisser et déposez votre fichier .shp (avec les fichiers .dbf et .prj)
3. Cliquez sur Simplify pour réduire la taille du fichier (utiliser 10-20% pour le web)
4. Cliquez sur Export → choisissez GeoJSON
5. Importer dans PinePaper avec app.importCustomMap()

TopoJSON → GeoJSON :

Les fichiers TopoJSON sont automatiquement convertis lorsqu’ils sont importés dans PinePaper.

Conseils sur la taille du fichier

Référence API

Pour le contrôle de la carte programmatique, voir Map System API Documentation.