Karttajärjestelmä

Luo upeita maantieteellisiä visualisoinnit interaktiivisia karttoja, kuoropleth tietojen väritys, ja animoitu paljastaa.

Yleiskatsaus

Karttajärjestelmä tarjoaa:

• World & Regional Maps
• Multiple projections
• Alueen kohokohta …
• Data Visualization
• Markers & Labels
• Professional Quality**

Ladataan karttaa

Mallit

Helpoin tapa päästä alkuun on käyttää karttamallia:

1. Avaa Templates paneeli
2. Etsi Kartat-luokka
3. Valitse malli kuten “Global Expansion Map” tai “US Data Visualisation”

Generaattoripaneelista

1. Avaa Generator paneeli
2. Valitse taustatyypiksi kartta
3. Valitse kartta (Maailma, Yhdysvallat, Eurooppa jne.)
4. Määrittele projektio ja muotoilu

Karttatyypit

Ennusteet

Valitse oikea projektio visualisointiisi:

Luonnonmaa (Default)

Paras maailman kartoille. Tasapainoinen vääristymä, näyttää luonnolliselta.

Mercator

Säilyttää kulmat, tutun ulkonäön. Hyvä navigointikarttoihin.

Ortografinen (Globe)

Näyttää Maan 3D-pallona. Hienoa keskittyneille näköaloille.

Albers USA

Erityinen projektio Yhdysvaltain karttoja, jotka sisältävät Alaska ja Havaiji uudelleen sijoitettu.

Muut projektiot

• Robinson … Kompromissiprojektio
• Winkel Tripel
• Konic Equal Area

Korostavat alueet

Yksi maa/valtio

Valitse mikä tahansa alue valitaksesi sen , sitten käyttää Properties paneeli muuttaa sen väri.

Useita alueita

Käytä API tai malleja korostaa useita alueita:

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

Animoidut paljastukset

Mallit voivat animoida alueen kohokohtia porrastettu ajoitus tarinankertomisen vaikutuksia.

Alueen tunnistemuodot

Eri kartoissa käytetään eri ID-muotoja:

Datan visualisointi (Choropleth)

Värialueet, jotka perustuvat tietoarvoihin:

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

Värivaaka

Merkit

Lisää pistemerkit tiettyihin koordinaatteihin:

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

Laatuasetukset

Tärkeä: Käyttää professional laatu maiden monimutkaisia muotoja (Venäjä, Ranska, Yhdysvallat) varmistaa kaikki alueen osat tehdä oikein.

Monen-Polygonin maat

Joissakin maissa on useita irrotettuja osia:

• Venäjä
• Ranska Manner- ja Korsika + merentakaiset alueet
• USA
• Indonesia
• **Fiji * Useita saaria

Karttajärjestelmä käyttää automaattisesti Paper.js CompoundPathia näissä maissa, kun laatu on asetettu professional:lle.

Vuorovaikutus

Effektit

Käytä leijonan korostusta:

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

Napsauta tapahtumia

Vastaa alueen napsautuksiin:

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

Karttamallit

Maailmanlaajuinen laajennuskartta

Osoittaa liiketoiminnan laajentamista eri alueilla animoitu vaihepohjainen korostus.

US Data Visualisation

Näyttää tietoja eri puolilla USA:ta kuoropleth väritys.

Oma kartta

Jos yksityiskohtaisia alueellisia karttoja ei ole mukana, käytetään importCustomMap():a:

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

Tietolähteet:

• Luonnon maa …
• GADM
• Mapshaper

Vinkkejä

1. Use worldHighRes ammatillinen vienti monikulmiomaiden
2. Luonnon Maan projektio toimii parhaiten useimmissa maailman kartoissa
3. Albers USA on suunniteltu erityisesti Yhdysvaltain karttoja varten
4. Ortografia luo dramaattiset maailmankuvat esityksiin
5. Ammattilainen laatu estää korruptiota monimutkaisissa maissa

Näppäimistön pikanäppäimet

Karttaalueanimaatio

Animoi kartta alueita aikajana-integroitu väri muuttuu. Täydellinen näyttämään datan muutoksia ajan, globaalin laajennuksen sekvenssejä, tai luoda mukaan data visualisointia.

Perusalue

Animoi tiettyjä alueita, joissa on keyframe-pohjainen värisiirtymät:

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

Aaltoanimaatio

Luo väriaalto kaikilla alueilla maantieteellisen sijainnin perusteella:

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

Aikajana integrointi

Animoidut alueet integroituvat aikajanan käyttöliittymään:

• Animaatioalueet näkyvät aikajanapaneelissa
• Kuuraa läpi ajan esikatselu värimuutoksia
• Toista/ta animaatioita aikajanan ohjaimilla
• Vie animaatioita videolle tai GIF: lle

Pysäytetään animaatioita

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

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

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

Animoitujen alueiden hyödyntäminen

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

CSV- vienti ja tuonti

Vie ja tuo alueen tiedot, kuten värit, korostustila ja valintatila datalähtöisille visualisoinneille.

Vientialuetiedot

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

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

Tuodaan aluetietoja

Tuo CSV-tiedot alueen päivittämiseen todetaan:

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

Ohjelmakohtainen valinta

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

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

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

Työnkulku: taulukkolaskenta - Karttojen muokkaus

1. Lataa kartta ja korosta joitakin alueita
2. Vie CSV:lle: app.downloadMapRegionDataCSV('regions.csv')
3. Muokkaa Excel/Google Sheetsissa (muuta värejä, aseta korostettu=1)
4. Tuo takaisin: app.importMapRegionDataCSV(updatedCsv)

Tämä työnkulku on ihanteellinen:

• Muut kuin tekniset käyttäjät muokkaamassa karttatietoja
• Bulk päivitykset monille alueille
• Dataputkien integrointi
• Version ohjatut karttakokoonpanot

GeoJSON- vienti ja tuonti

Vie kartat GeoJSON editoimaan ulkoisia työkaluja, kuten QGIS tai Mapshaper, ja tuo sitten uudelleen muokkauksin.

Vie muutettu kartta

Vie kartta nykyisillä väreillä ja tyyleillä:

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

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

Vie alkuperäinen lähde

Lataa tarkka GeoJSON, jota käytettiin kartan lataamiseen (muuttamattomat rajat):

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

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

Tuo omat kartat

Tuo muokatut GeoJSON- tai ulkoiset karttatiedot:

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

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

Koko työnkulku: Muokkaa → Uudelleentuoda → Animoi

1. Kirjoita ja vie alkuperäinen kartta:

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

2. Muokkaa rajoja ulkoisissa työkaluissa:

   • QGIS - GIS-editori
   • Mapshaper - Online yksinkertaistaminen ja editointi
   • geojson.io - Nopea online-toimittaja

3. Tuo uudelleen muokattu kartta:

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

4. Animate custom map:

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

Karttalähdetiedot

Hae tietoa ladatusta kartasta:

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

Ulkoiset varat

Karttatietolähteet

Muuntamis- ja muokkaustyökalut

Muotoa muuntaminen työvirta

Muototiedosto → GeoJSON (käyttäen Mapshaperia):

1. Siirry osoitteeseen mapshaper.org
2. Vedä ja pudota .shp-tiedosto (yhdessä .dbf ja .prj-tiedostot)
3. Napsauta Simplify pienentää tiedoston kokoa (käytä 10-20% web)
4. Klikkaa Export → valitse **GeoJSON
5. Tuo PinePaper:ään app.importCustomMap():lla

TopoJSON → GeoJSON:

TopoJSON-tiedostot muunnetaan automaattisesti, kun ne tuodaan PinePaper:ksi.

Tiedoston koko vinkkejä

API-viite

Ohjelmoidun kartan ohjauksessa ks. Map System API Documentation.