Mapa Sistema

Crear impresionantes visualizaciones geográficas con mapas interactivos, coloración de datos de choropleth y revelaciones animadas.

Sinopsis

El sistema de mapas proporciona:

• Mapas Regionales del Mundo — Mapas precargados de CDN (mundo, EE.UU., Europa, etc.)
• Proyecciones Múltiples — Mercator, Natural Earth, Orthographic (globe), Albers, and more
• Realización de la región — Países de alto nivel, estados o provincias
• Visualización de datos — Mapas de Choropleth con escalas de color
• Marcadores y etiquetas - Añadir puntos de interés
• Calidad profesional - Apoyo multipolígono a los países complejos

Cargando un mapa

De las Plantillas

La forma más fácil de empezar es usar una plantilla de mapa:

1. Abrir el panel Templates
2. Encontrar la categoría Maps
3. Elija una plantilla como “Mapa de expansión global” o “US Data Visualization”

Del Grupo Generador

1. Abrir el panel Generador
2. Seleccione Mapa como tipo de fondo
3. Elige un mapa (World, USA, Europe, etc.)
4. Configure proyección y estilo

Tipos de mapa

Proyecciones

Elija la proyección correcta para su visualización:

Natural Earth (Default)

Mejor para los mapas del mundo. La distorsión equilibrada, parece natural.

Mercator

Conserva ángulos, aspecto familiar. Bien para mapas de estilo de navegación.

Ortográfico (Globe)

Muestra la Tierra como una esfera 3D. Ideal para puntos de vista centrados en la región.

Ortográfico Globe

Albers USA

Proyección especial para los mapas de Estados Unidos que incluye Alaska y Hawai reposicionado.

USA Albers

Otras proyecciones

• Robinson — Proyección de combinación, buena para los mapas mundiales
• Winkel Tripel — Proyección mundial de baja distorsión
• Área de igualdad de condiciones: buena para las regiones de latitud media

Regiones destacadas

País/Estado único

Haga clic en cualquier región para seleccionarla , luego utilice el panel Propiedades para cambiar su color.

Múltiples regiones

Utilice el API o plantillas para destacar múltiples regiones:

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

Revelaciones animadas

Las plantillas pueden animar puntos destacados de la región con un tiempo asombroso para efectos narrativos.

Reglas Altas

Formatos de identificación de la región

Los diferentes mapas utilizan diferentes formatos de identificación:

Visualización de datos (Choropleth)

Regiones de color basadas en valores de datos:

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

Escalas de color

Marcadores

Añadir marcadores de punto en coordenadas específicas:

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

Ajustes de calidad

Importante: Utilice la calidad professional para países con formas complejas (Rusia, Francia, EE.UU.) para asegurar que todas las partes del territorio se hagan correctamente.

Países multipolígonos

Algunos países consisten en múltiples partes desconectadas:

• Rusia - Mainland + Kaliningrad + islas
• Francia — Mainland + Córcega + territorios de ultramar
• USA — Mainland + Alaska + Hawaii (en mapas mundiales)
• Indonesia — Miles de islas
• Fiji - Múltiples islas

El sistema de mapa utiliza automáticamente Paper.js CompoundPath para estos países cuando la calidad se establece en professional.

Interactividad

Efectos Hover

Permite resaltar la manguera:

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

Click Eventos

Responder a los clics de la región:

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

Plantillas de mapa

Mapa de Expansión Global

Muestra expansión de negocios en regiones con resaltado en fases animadas.

Visualización de datos estadounidenses

Muestra datos en Estados Unidos con coloración de choropleth.

Importación de mapas personalizados

Para mapas regionales detallados no incluidos, utilice importCustomMap():

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

Fuentes de datos:

• Natural Earth — Datos del mapa de dominio público
• GADM — Límites administrativos detallados
• Mapshaper — Simplifique archivos GeoJSON

Consejos

1. Use worldHighRes para las exportaciones profesionales con países multipolígonos
2. Proyección natural de la Tierra funciona mejor para la mayoría de los mapas del mundo
3. Albers USA está diseñado específicamente para los mapas de Estados Unidos
4. Ortográfico crea vistas espectaculares del globo para presentaciones
5. La calidad profesional previene la corrupción en los países complejos

Atajos de teclado

Mapa Región Animación

Regiones del mapa de Animate con cambios de color integrados en el tiempo. Perfecto para mostrar cambios de datos a lo largo del tiempo, secuencias de expansión global o crear visualizaciones de datos atractivas.

Animación de la región básica

Animar regiones específicas con transiciones de color basadas en claves:

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

Wave Animation

Crear una ola de color en todas las regiones basadas en la posición geográfica:

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

Timeline Integration

Regiones animadas se integran con la IU Timeline:

• Las regiones animadas aparecen en el panel Timeline
• Escrub a través del tiempo para prever los cambios de color
• Animaciones de reproducción/pausa con los controles de cronología
• Exportar animaciones a vídeo o GIF

Parar las animaciones

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

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

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

Obtener regiones animadas

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

CSV Exportar " Importar

Exportar e importar datos de la región incluyendo colores, estado destacado y estado de selección para visualizaciones basadas en datos.

Datos de la región exportadora

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

Formato 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

Importar datos de la región

Importar datos CSV para actualizar estados de la región:

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

Selección programática

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

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

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

Flujo de trabajo: edición de mapa basado en hojas de cálculo

1. Cargar un mapa y destacar algunas regiones
2. Exportar a CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Editar en hojas Excel/Google (cambiar colores, set highlighted=1)
4. Importar de nuevo: app.importMapRegionDataCSV(updatedCsv)

Este flujo de trabajo es ideal para:

• Usuarios no técnicos editar datos del mapa
• Actualizaciones a granel en muchas regiones
• Integración del oleoducto de datos
• Configuraciones de mapa controladas por versiones

GeoJSON Exportar " Importar

Exportar mapas como GeoJSON para editar en herramientas externas como QGIS o Mapshaper, luego volver a importar con sus modificaciones.

Mapa modificado de las exportaciones

Exportar el mapa con los colores y estilos actuales:

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

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

Exportación Fuente original

Descargar el GeoJSON exacto que se utilizó para cargar el mapa (limitaciones no modificadas):

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

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

Importar mapas personalizados

Importe su GeoJSON editado o datos de mapa externo:

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

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

Full Workflow: Edit → Reimport → Animate

1. Carga y exportación el mapa original:

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

2. Editar límites en herramientas externas:

   • QGIS - Editor GIS de funciones completas
   • Mapshaper - simplificación y edición en línea
   • geojson.io - Quick online editor

3. Reimportar su mapa editado:

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

4. Animate tu mapa personalizado:

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

Map Source Info

Obtenga información sobre el mapa actualmente cargado:

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

Recursos externos

Mapa Fuentes de datos

Herramientas de edición de Conversión

Volumen de trabajo de conversión

Shapefile → GeoJSON (utilizando Mapshaper):

1. Vaya a mapshaper.org
2. Arrastre y suelte su archivo .shp (junto con los archivos .dbf y .prj)
3. Haga clic en Simplificar para reducir el tamaño del archivo (utilizar 10-20% para la web)
4. Haga clic en Exportar → elegir **
5. Importar en PinePaper con app.importCustomMap()

TopoJSON → GeoJSON:

Los archivos TopoJSON se convierten automáticamente cuando se importan en PinePaper.

Consejos de tamaño del archivo

Referencia API

Para el control de mapas programáticos, vea la Mapa Sistema API Documentación.