Sistema de Mapa

Crie visualizações geográficas impressionantes com mapas interativos, coloração de dados coropleth e revelações animadas.

[Mapa Mundial Terra Natural] (…/images/map-world-natural-earth.png)

Visão geral

O sistema de mapas fornece:

• World & Regional Maps — Mapas pré-carregados da CDN (mundo, EUA, Europa, etc.)
• Projeções múltiplas — Mercator, Terra Natural, Ortográfico (globe), Albers, e mais
• Realce da região — Destaque países, estados ou províncias
• Visualização de dados — Mapas de coropleth com escalas de cores
• Marcadores & Etiquetas — Adicionar pontos de interesse
• Qualidade Profissional — Apoio multipolígono para países complexos

Carregando um Mapa

De Modelos

A maneira mais fácil de começar é usando um modelo de mapa:

1. Abra o painel Templates
2. Encontre a categoria Maps
3. Escolha um modelo como “Mapa de Expansão Global” ou “visualização de dados dos EUA”

Painel do Gerador

1. Abra o painel Generator
2. Selecione Map como o tipo de fundo
3. Escolha um mapa (World, USA, Europa, etc.)
4. Configurar projeção e estilo

Tipos de Mapa

Projecções

Escolha a projeção certa para sua visualização:

Terra Natural (Padrão)

Melhor para mapas mundiais. Distorção equilibrada, parece natural.

[Projecção Natural da Terra] (…/images/map-world-natural-earth.png)

Mercator

Preserva ângulos, olhar familiar. Bom para mapas de navegação.

! [Projecção do Mercator] (…/images/map-mercator-projection.png)

Ortográfico (Globe)

Mostra a Terra como uma esfera 3D. Ótimo para vistas de regiões focadas.

! [Ortográfico] (…/images/map-orthographic-globe.png)

Albers EUA

Projecção especial para mapas dos EUA que incluem o Alasca e o Havaí reposicionados.

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

Outras Projeções

• Robinson — Projecção de compromisso, boa para mapas mundiais
• Winkel Tripel — Projecção mundial de baixa distorção
• Área de igualdade cónica — Boa para as regiões de média latitude

Destacando Regiões

País/Estado único

Carregue em qualquer região para a seleccionar , em seguida, use o painel Propriedades para alterar sua cor.

Regiões Múltiplas

Use o API ou modelos para destacar várias regiões:

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

Revelações Animadas

Os modelos podem animar os destaques da região com sincronismo escalonado para efeitos de contação de histórias.

Formatos de ID da Região

Diferentes mapas usam diferentes formatos de ID:

Visualização de dados (coropleth)

Regiões de cores baseadas nos valores dos dados:

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

Escalas de Cores

Marcadores

Adicionar marcadores de pontos em coordenadas específicas:

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

Configuração da Qualidade

Importante: Use a qualidade professional para países com formas complexas (Rússia, França, EUA) para garantir que todas as peças do território renderizem corretamente.

Países Multi-Polígono

Alguns países consistem em várias partes desconectadas:

• Rússia — Continente + Ilhas Kaliningrad +
• França — Continente + Córsega + Territórios ultramarinos
• EUA — Continente + Alasca + Havaí (em mapas mundiais)
• Indonésia — Milhares de ilhas
• Fiji — Várias ilhas

O Sistema de Mapas utiliza automaticamente o Paper.js CompoundPath para estes países quando a qualidade é definida como professional.

Interactividade

Efeitos de Hover

Activar o realce do hover:

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

Clique em Eventos

Responder aos cliques da região:

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

Modelos de Mapa

Mapa de Expansão Global

Mostra expansão de negócios em regiões com destaque animado baseado em fases.

Visualização de Dados dos EUA

Mostra dados em todos os estados dos EUA com coloração de choro.

Importação Personalizada do Mapa

Para mapas regionais detalhados não incluídos, use importCustomMap():

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

Fontes de dados:

• Terra natural — Dados do mapa de domínio público
• GADM — Limites administrativos pormenorizados
• [Mapshaper] (https://mapshaper.org) — Simplificar ficheiros GeoJSON

Dicas

1. Use HighRes do mundo para exportações profissionais com países multi-polígono
2. Projecção natural da Terra funciona melhor para a maioria dos mapas mundiais
3. Albers USA é projetado especificamente para mapas dos EUA
4. Ortográfico cria visões dramáticas do globo para apresentações
5. Qualidade profissional impede a corrupção de formas em países complexos

Atalhos do Teclado

Animação da Região do Mapa

Animar regiões de mapa com mudanças de cor integradas na linha do tempo. Perfeito para mostrar mudanças de dados ao longo do tempo, sequências de expansão global ou criação de visualizações de dados envolventes.

Animação Básica da Região

Animar regiões específicas com transições de cores baseadas em keyframe:

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

Animação de Ondas

Criar uma onda de cor em todas as regiões com base na posição geográfica:

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

Integração da Linha do Tempo

As regiões animadas integram-se à IU Timeline:

• As regiões animadas aparecem no painel Timeline
• Esfregue o tempo para visualizar as alterações de cores
• Reproduzir/pausar animações com os controles da linha do tempo
• Exportar animações para vídeo ou GIF

![Timeline with Map Animations] (…/images/timeline-with-keyframes.png)

Parando Animações

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

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

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

Obter Regiões Animadas

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

Exportação e Importação do CSV

Exportar e importar dados da região, incluindo cores, status de destaque e estado de seleção para visualizações orientadas a dados.

Exportando Dados da Região

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

Importando Dados da Região

Importar dados CSV para atualizar os estados da região:

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

Seleção 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', ...]

Fluxo de trabalho: Edição de mapas baseada em planilha

1. Carregar um mapa e destacar algumas regiões
2. Exportar para CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Editar em Planilhas Excel/Google (alterar cores, definir destacado=1)
4. Importar de volta: app.importMapRegionDataCSV(updatedCsv)

Este fluxo de trabalho é ideal para:

• Usuários não técnicos que editam dados do mapa
• Atualizações em massa para muitas regiões
• Integração dos gasodutos de dados
• Configuração do mapa controlada pela versão

Exportação e Importação do GeoJSON

Exportar mapas como GeoJSON para edição em ferramentas externas como QGIS ou Mapshaper, em seguida, re-importar com suas modificações.

Exportar mapa modificado

Exportar o mapa com cores e estilos atuais:

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

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

Exportar a Origem Original

Baixe o GeoJSON exato que foi usado para carregar o mapa (limites não modificados):

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

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

Importar mapas personalizados

Importar os seus dados de mapas GeoJSON ou externos editados:

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

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

Fluxo de trabalho completo: Editar → Re-importação → Animar

1. Carregar e exportar o mapa original:

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

2. Editar limites em ferramentas externas:

   • QGIS - Editor GIS completo
   • Mapshaper - Simplificação e edição online
   • geojson.io - Editor rápido online

3. Reimportar o seu mapa editado:

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

4. ** Anima o teu mapa personalizado:

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

Informações da Fonte do Mapa

Obtenha informações sobre o mapa atualmente carregado:

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

Recursos externos

Fontes de Dados do Mapa

Ferramentas de Conversão e Edição

Formatar fluxo de trabalho de conversão

Arquivo de forma → GeoJSON (usando Mapshaper):

1. Ir para mapshaper.org
2. Arraste e solte seu arquivo .shp (junto com arquivos .dbf e .prj)
3. Clique em Simplificar para reduzir o tamanho do arquivo (use 10-20% para web)
4. Clique em Exportar → escolher GeoJSON
5. Importar para PinePaper com app.importCustomMap()

TopoJSON → GeoJSON:

Arquivos TopoJSON são convertidos automaticamente quando importados para PinePaper.

Dicas de Tamanho do Ficheiro

Referência API

Para controle de mapas programáticos, consulte o Map System API Documentation.