Visualisierung: Landkarte

Übersicht

Eine Landkarte ist die Karte eines Landes, eines Kontinents oder einer Regionskarte. Farben und Werte sind bestimmten Regionen zugewiesen. Die Werte werden als Farbskala angezeigt. Sie können optional den Hovertext für Regionen angeben. Die Karte wird im Browser mit einem eingebetteten Flash-Player gerendert. Die Karte lässt sich nicht durch Scrollen oder Ziehen steuern, sondern kann so konfiguriert werden, dass Zoomen möglich ist.

Beispiele

Wir haben hier zwei Beispiele: In dem einen wird der Darstellungsstil für Regionen und im anderen der Stil für Markierungen verwendet.

Beispiel für Regionen

Der Stil „Regionen“ füllt ganze Regionen (in der Regel Länder) mit Farben, die den von Ihnen zugewiesenen Werten entsprechen. Geben Sie den Stil der Regionen an, indem Sie im Code options['dataMode'] = 'regions' zuweisen.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Beispiel für Markierungen

Im Stil „Markierungen“ wird ein Kreis in den angegebenen Größen und Farben angezeigt, der sich über die von Ihnen angegebenen Regionen erstreckt.

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

Wird geladen

Der Paketname von google.charts.load lautet "geomap"

  google.charts.load('current', {'packages': ['geomap']});

Der Name der Visualisierungsklasse für Landkarten lautet google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Datenformat

Es werden zwei Adressformate unterstützt, von denen jedes eine unterschiedliche Anzahl von Spalten und unterschiedliche Datentypen für jede Spalte unterstützt. Alle Adressen in der Tabelle müssen eine der beiden Optionen enthalten. Typen können nicht kombiniert werden.

  • Format 1: Längen- und Breitengrade Dieses Format funktioniert nur, wenn die Option dataMode „markers“ ist. Bei diesem Format muss das Google Maps-JavaScript nicht eingefügt werden. Der Standort wird in zwei Spalten und zwei optionalen Spalten eingegeben:
    1. [Zahl, erforderlich] Ein Breitengrad. Positive Zahlen sind Norden, negative Zahlen nach Süden.
    2. [Zahl, erforderlich] Ein Längengrad Positive Zahlen sind Osten, negative Zahlen nach Westen.
    3. [Zahl, optional] Ein numerischer Wert, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt. Wenn Spalte 4 verwendet wird, ist diese Spalte erforderlich.
    4. [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.
  • Format 2: Adresse, Ländername, Regionsname oder US-Großraumcode. Für dieses Format ist die Option dataMode entweder auf „Markierungen“ oder auf „Regionen“ festgelegt. Der Standort wird in eine Spalte sowie zwei optionale Spalten eingegeben:
    1. [String, required] Ein Standort auf der Karte. Folgende Formate sind zulässig:
      • Eine bestimmte Adresse, z. B. „Musterstraße 16“
      • Ein Ländername als String (z. B. „England“) oder ein großgeschriebener ISO-3166-Code oder der zugehörige englische Text (z. B. „GB“ oder „Vereinigtes Königreich“).
      • Ein ISO 3166-2-Regionscode oder ein englischer Textäquivalent in Großbuchstaben, z. B. „US-NJ“ oder „New Jersey“. Hinweis: Regionen können nur angegeben werden, wenn für die dataMode-Option „regionen“ festgelegt ist.
      • Eine Städtevorwahl. Dies sind dreistellige Großraumcodes, die verwendet werden können, um verschiedene Regionen anzugeben; US-Codes werden nur unterstützt. Beachten Sie, dass diese nicht mit Telefonvorwahlen identisch sind.
    2. [Zahl, optional] Ein numerischer Wert, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt. Wenn Spalte 3 verwendet wird, ist diese Spalte erforderlich.
    3. [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.

Hinweis:Eine Karte kann maximal 400 Einträge enthalten. Wenn Ihre DataTable oder DataView mehr als 400 Zeilen enthält, werden nur die ersten 400 Zeilen angezeigt. Die schnellsten Modi sind dataMode='regions' mit Standorten, die als ISO-Codes angegeben sind, und dataMode='markers' mit Breiten- und Längengraden. Der langsamste Modus ist dataMode='markers' mit einer Stringadresse.

Wichtig: DataTable muss jede optionale Spalte vor jeder Spalte enthalten, die Sie verwenden möchten. Wenn Sie beispielsweise einen Längen- und Breitengrad angeben und nur die Spalten 1, 2 und 4 verwenden möchten, muss DataTable trotzdem die Spalte 3 definieren. Sie müssen jedoch keine Werte hinzufügen.

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

Konfigurationsoptionen

Name Typ Standard Beschreibung
region String 'Welt'

Der auf der Karte anzuzeigende Bereich. Die umliegenden Bereiche werden ebenfalls angezeigt. Dies kann entweder ein Ländercode (im ISO 3166-Großformat) oder einer der folgenden Strings sein:

  • world (ganze Welt)
  • us_metro (USA, Großräume)
  • 005 (Südamerika)
  • 013 – (Mittelamerika)
  • 021 (Nordamerika)
  • 002 – (ganz Afrika)
  • 017 (Zentralafrika)
  • 015 – (Nordafrika)
  • 018 (Südafrika)
  • 030 – (Ostasien)
  • 034 – (Südasien)
  • 035 – (Asien-Pazifik-Region)
  • 009 (Ozeanien)
  • 145 – (Naher Osten)
  • 143 – (Zentralasien)
  • 151 – (Nordasien)
  • 154 (Nordeuropa)
  • 155 (Westeuropa)
  • 039 (Südeuropa)

Landkarten ermöglichen kein Scrollen oder Ziehen, sondern nur ein begrenztes Zoomverhalten. Ein einfacher Zoom kann durch Festlegen der Property showZoomOut aktiviert werden.

dataMode String 'regions' [Regionen]

So werden Werte auf der Karte angezeigt. Es werden zwei Werte unterstützt:

  • regions – färbt einen gesamten Bereich mit der entsprechenden Farbe. Diese Option kann nicht mit Breiten- und Längengraden verwendet werden. Siehe Beispiel für Regionen.
  • markers: Zeigt einen Punkt über einer Region an, wobei Farbe und Größe für den Wert stehen. Siehe Markierungsbeispiel.
width String „556 px“ Breite der Visualisierung Wenn keine Einheiten angegeben sind, ist die Standardeinheit Pixel.
height String „347 px“ Höhe der Visualisierung. Wenn keine Einheiten angegeben sind, ist die Standardeinheit Pixel.
colors RGB-Zahlen im Format 0xRRGGBB [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] Farbverlauf, der Werten in der Visualisierung zugewiesen werden soll. Sie müssen mindestens zwei Werte haben. Der Farbverlauf enthält alle Ihre Werte sowie die berechneten Zwischenwerte mit der hellsten Farbe als kleinstem und dem dunkelsten Wert.
showLegend boolean true Falls wahr, wird eine Legende für die Karte angezeigt.
showZoomOut boolean false Bei „true“ wird eine Schaltfläche mit dem Label angezeigt, das im Attribut zoomOutLabel angegeben ist. Hinweis: Diese Schaltfläche hat nach dem Anklicken keine Auswirkung, mit Ausnahme des Ereignisses zoomOut. Für das Zoomen erfassen Sie dieses Ereignis und ändern die Option region. Sie können showZoomOut nur angeben, wenn die Option region kleiner als die Weltansicht ist. Eine Möglichkeit, das Zoomverhalten zu aktivieren, wäre, das Ereignis regionClick zu beobachten, die Eigenschaft region in die entsprechende Region zu ändern und die Karte neu zu laden.
zoomOutLabel String „Herauszoomen“ Label für die Zoom-Schaltfläche.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) Zeichnet die Karte. Kann vor dem Zeichnen zurückkehren (siehe drawingDone()-Ereignis).
getSelection() Array von Auswahlelementen Standardimplementierung von getSelection() Ausgewählte Elemente sind Zeilen. Diese Methode funktioniert nur, wenn die Option dataMode „Regionen“ ist. Sie können nur eine Region mit einem zugewiesenen Wert auswählen.
setSelection(selection) Standardimplementierung für setSelection(). Behandelt eine Auswahl als Zeilenauswahl und unterstützt die Auswahl mehrerer Zeilen. Es können nur Regionen mit zugewiesenen Werten ausgewählt werden.

Ereignisse

Name Beschreibung Attribute
error Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt ID, Nachricht
select

Wird ausgelöst, wenn der Nutzer auf eine Region mit einem zugewiesenen Wert klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde. Nur verfügbar, wenn für die Option dataMode „Regionen“ festgelegt ist.

Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis select nicht ausgelöst, wenn Sie als Browser auf die Seite zugreifen (z.B. und nicht von einem Server (z.B. „http://www“).

regionClick

Wird aufgerufen, wenn auf eine Region geklickt wird. Funktioniert sowohl für dataMode als auch für Markierungen. Im Markierungsmodus wird sie jedoch nicht für das in der Option „Region“ zugewiesene Land ausgelöst, wenn ein bestimmtes Land aufgeführt ist.

Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis regionClick nicht ausgelöst, wenn Sie im Browser auf die Seite zugreifen (z.B. und nicht von einem Server (z.B. „http://www“).

Ein Objekt mit einer einzelnen Eigenschaft (region), bei der es sich um einen String im ISO-3166-Format handelt, der die angeklickte Region beschreibt.
zoomOut

Wird aufgerufen, wenn auf die Schaltfläche zum Herauszoomen geklickt wird. Für das Zoomen erfassen Sie dieses Ereignis und ändern die Option region.

Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis zoomOut nicht ausgelöst, wenn Sie als Browser auf die Seite zugreifen (z.B. und nicht von einem Server (z.B. „http://www“).

drawingDone Wird nach dem Zeichnen der Landkarte aufgerufen.

Datenrichtlinie

Standorte werden von Google Maps geocodiert. Daten, die keine Geocodierung erfordern, werden an keinen Server gesendet. Weitere Informationen finden Sie in den Google Maps-Nutzungsbedingungen.

Hinweise

Aufgrund von Flash-Sicherheitseinstellungen funktionieren diese und alle Flash-basierten Visualisierungen möglicherweise nicht richtig, wenn von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) aus und nicht von einer Webserver-URL (z.B. http://www.myhost.com/myviz.html) zugegriffen wird. Dies ist in der Regel nur ein Testproblem. Du kannst dieses Problem beheben, wie auf der Macromedia-Website beschrieben.