Présentation
Une geomap est une carte d'un pays, d'un continent ou d'une région, avec des couleurs et des valeurs attribuées à des régions spécifiques. Les valeurs s'affichent sous la forme d'un dégradé de couleurs, et vous pouvez spécifier un texte de pointage facultatif pour les régions. La carte est affichée dans le navigateur à l'aide d'un lecteur Flash intégré. Notez que la carte n'est pas déroulante ni déplaçable, mais qu'elle peut être configurée pour zoomer.
Exemples
Nous avons deux exemples ici: un qui utilise le style d'affichage des régions et un autre qui utilise le style d'affichage des repères.
Exemple de régions
Le style de régions remplit des régions entières (généralement des pays) avec des couleurs correspondant aux valeurs que vous attribuez. Spécifiez le style des régions en attribuant le code options['dataMode']
= 'regions' à votre code.
<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>
Exemple de repères
Le style "repères" affiche un cercle, de taille et de couleur pour indiquer une valeur, sur les régions que vous spécifiez.
<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>
Chargement...
Le nom du package google.charts.load est "geomap"
google.charts.load('current', {'packages': ['geomap']});
Le nom de la classe de visualisation géographique est google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Format des données
Deux formats d'adresse sont acceptés, chacun acceptant un nombre différent de colonnes et différents types de données pour chaque colonne. Toutes les adresses de la table doivent utiliser l'une ou l'autre des types. Vous ne pouvez pas mélanger des types.
- Format 1: Latitude/Longitude. Ce format ne fonctionne que lorsque l'option
dataModeest "Repères". Si vous utilisez ce format, vous n'avez pas besoin d'inclure le code JavaScript de Google Maps. L'emplacement est saisi dans deux colonnes, plus deux colonnes facultatives :- [Nombre, obligatoire] Latitude. Les nombres positifs sont le nord, les nombres négatifs sont le sud.
- [Nombre, obligatoire] Longitude. Les nombres positifs sont l'est, les nombres négatifs l'ouest.
- [Nombre, facultatif] : valeur numérique affichée lorsque l'utilisateur passe la souris sur cette région. Si la colonne 4 est utilisée, elle est obligatoire.
- [Chaîne, facultatif] Texte de chaîne supplémentaire affiché lorsque l'utilisateur passe la souris sur cette région.
- Format 2: adresse, nom du pays, emplacement du nom de la région ou indicatifs des États-Unis Ce format fonctionne avec l'option
dataModedéfinie sur "Repères" ou "Régions". L'établissement est saisi dans une colonne, plus deux colonnes facultatives :- [Chaîne, obligatoire] Emplacement de la carte. Les formats suivants sont acceptés :
- Une adresse spécifique (par exemple, "1600 Avenue des Champs-Élysées").
- Nom de pays sous forme de chaîne (par exemple, "Angleterre"), ou code ISO-3166 en majuscules ou son équivalent en texte anglais (par exemple, "GB" ou "Royaume-Uni").
- Nom de code de région ISO-3166-2 en majuscules ou son équivalent en anglais (par exemple, "US-NJ" ou "New Jersey"). Remarque: Vous ne pouvez spécifier des régions que lorsque l'option dataMode est définie sur "regions".
- Indicatif métropolitain. Il s'agit de codes d'agglomérations à trois chiffres utilisés pour désigner différentes régions. Les codes aux États-Unis ne sont acceptés que. Notez qu'ils ne sont pas identiques aux indicatifs téléphoniques.
- [Nombre, facultatif] : valeur numérique affichée lorsque l'utilisateur passe la souris sur cette région. Si la colonne 3 est utilisée, elle est obligatoire.
- [Chaîne, facultatif] Texte de chaîne supplémentaire affiché lorsque l'utilisateur passe la souris sur cette région.
- [Chaîne, obligatoire] Emplacement de la carte. Les formats suivants sont acceptés :
Remarque:Une carte peut afficher 400 entrées au maximum. Si votre DataTable ou votre DataView contient plus de 400 lignes, seules les 400 premières seront affichées. Les modes les plus rapides sont dataMode='regions' avec des emplacements spécifiés en tant que codes ISO, et dataMode='markers' avec des coordonnées de latitude et de longitude. Le mode le plus lent est dataMode='markers' avec une adresse de chaîne.
Important:Votre DataTable doit inclure toutes les colonnes facultatives précédant la colonne que vous souhaitez utiliser. Ainsi, par exemple, si vous souhaitez spécifier une table de latitude et de longitude et que vous ne souhaitez utiliser que les colonnes 1, 2 et 4, la fonction DataTable doit toujours définir la colonne 3 (mais vous n'avez pas besoin d'y ajouter de valeurs):
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!");
Options de configuration
| Nom | Type | Par défaut | Description |
|---|---|---|---|
region |
chaîne | "monde" | Zone à afficher sur la carte. Les zones environnantes sont également affichées. Il peut s'agir d'un code de pays (au format ISO-3166 en majuscules) ou de l'une des chaînes suivantes:
La synthèse géographique n'autorise pas le comportement de défilement ou de glissement, et seulement un comportement de zoom limité. Vous pouvez activer un zoom arrière de base en définissant la propriété |
dataMode |
chaîne | régions | Comment afficher des valeurs sur la carte Deux valeurs sont acceptées:
|
width |
chaîne | "556 px" | Largeur de la visualisation. Si aucune unité n'est indiquée, l'unité par défaut est le nombre de pixels. |
height |
chaîne | "347 px" | Hauteur de la visualisation. Si aucune unité n'est indiquée, l'unité par défaut est le nombre de pixels. |
colors |
Tableau de numéros RVB au format 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Dégradé de couleurs à attribuer aux valeurs de la visualisation. Vous devez avoir au moins deux valeurs. Le gradient inclura toutes vos valeurs, plus les valeurs intermédiaires calculées, avec la couleur la plus claire comme la plus petite valeur et la couleur la plus foncée comme la plus haute. |
showLegend |
booléen | true | Si la valeur est "true", affiche une légende pour la carte. |
showZoomOut |
booléen | false | Si la valeur est "true", affiche un bouton avec le libellé spécifié par la propriété zoomOutLabel. Notez que ce bouton n'a aucun effet lorsque l'utilisateur clique dessus, hormis l'événement zoomOut.
Pour gérer le zoom, détectez cet événement et modifiez l'option region.
Vous ne pouvez spécifier showZoomOut que si l'option region est plus petite que la vue du monde. Pour activer le comportement de zoom avant, vous pouvez écouter l'événement regionClick, remplacer la propriété region par la région appropriée, puis actualiser la carte. |
zoomOutLabel |
chaîne | Zoom arrière | Libellé du bouton de zoom. |
Méthodes
| Méthode | Type renvoyé | Description |
|---|---|---|
draw(data, options) |
Aucune | Dessine la carte. Peut revenir avant la fin du dessin (voir l'événement drawingDone()). |
getSelection() |
Tableau d'éléments de sélection | Implémentation getSelection() standard. Les éléments sélectionnés sont des lignes. Cette méthode ne fonctionne que lorsque l'option dataMode est "regions". Vous ne pouvez sélectionner qu'une région associée à une valeur. |
setSelection(selection) |
Aucune | Implémentation setSelection() standard. Considère une sélection comme une sélection de lignes et accepte plusieurs sélections de lignes. Seules les régions auxquelles des valeurs ont été attribuées peuvent être sélectionnées. |
Événements
| Nom | Description | Propriétés |
|---|---|---|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique | identifiant, message |
select |
Déclenché lorsque l'utilisateur clique sur une région avec une valeur attribuée. Pour savoir ce qui a été sélectionné, appelez Remarque : En raison de certaines limitations, l'événement |
Aucune |
regionClick |
Appelée lorsqu'un internaute clique sur une région Fonctionne à la fois pour les "régions" et les "repères" Remarque: En raison de certaines limitations, l'événement |
Objet avec une seule propriété, region, qui est une chaîne au format ISO-3166 décrivant la région sur laquelle l'utilisateur a cliqué. |
zoomOut |
Appelé lorsque l'utilisateur clique sur le bouton de zoom arrière Pour gérer le zoom, détectez cet événement et modifiez l'option Remarque : En raison de certaines limitations, l'événement |
Aucune |
drawingDone |
Appelée lorsque la synthèse géographique est terminée. | Aucune |
Règles relatives aux données
Les adresses sont géocodées par Google Maps. Les données qui ne nécessitent pas de géocodage ne sont envoyées à aucun serveur. Pour en savoir plus sur ses règles relatives aux données, veuillez consulter les Conditions d'utilisation de Google Maps.
Remarques
Du fait des paramètres de sécurité Flash, cette méthode (et toutes les visualisations Flash) risque de ne pas fonctionner correctement lorsqu'on accède à partir d'un fichier dans le navigateur (par exemple, file:///c:/webhost/myhost/myviz.html) plutôt qu'à partir d'une URL de serveur Web (par exemple, http://www.myhost.com/myviz.html). Il s'agit généralement d'un problème de test uniquement. Vous pouvez résoudre ce problème comme décrit sur le site Web Macromedia.