Présentation
Une géomap est une carte d'un pays, d'un continent ou d'une région, où des couleurs et des valeurs sont attribuées à des régions spécifiques. Les valeurs s'affichent sous forme de dégradé de couleurs, et vous pouvez spécifier un texte d'info-bulle facultatif pour les régions. La carte s'affiche dans le navigateur à l'aide d'un lecteur Flash intégré. Notez qu'il n'est pas possible de faire défiler la carte ni de la faire glisser, mais vous pouvez la configurer pour permettre le zoom.
Exemples
Nous avons deux exemples ici: l'un qui utilise le style d'affichage des régions et l'autre qui utilise le style d'affichage des repères.
Exemple de régions
Le style des 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 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, dimensionné et coloré 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 Geomap est google.visualization.GeoMap.
var visualization = new google.visualization.GeoMap(container);
Format des données
Deux formats d'adresses sont acceptés, chacun acceptant un nombre différent de colonnes et des types de données différents pour chaque colonne. Toutes les adresses de la table doivent utiliser l'une ou l'autre de ces options ; vous ne pouvez pas mélanger les types.
- Format 1: positions (latitude/longitude). Ce format ne fonctionne que lorsque l'option
dataModeest définie sur "markers". Si vous utilisez ce format, vous n'avez pas besoin d'inclure le JavaScript Google Maps. L'emplacement est indiqué dans deux colonnes, plus deux colonnes facultatives :- [Nombre, obligatoire] Latitude. Les nombres positifs correspondent au nord et les nombres négatifs au sud.
- [Nombre, obligatoire] Longitude. Les nombres positifs correspondent à l'est et les nombres négatifs à l'ouest.
- [Nombre, facultatif] Valeur numérique affichée lorsque l'utilisateur pointe 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 pointe sur cette région.
- Format 2: adresse, nom du pays, emplacement du nom de la région ou indicatifs métropolitains américains Ce format fonctionne lorsque l'option
dataModeest définie sur "repères" ou "régions". L'emplacement est indiqué dans une colonne, plus deux colonnes facultatives :- [Chaîne obligatoire] Emplacement sur la carte. Les formats suivants sont acceptés :
- Une adresse spécifique (par exemple, "1600 Pennsylvania Ave").
- Nom d'un pays sous forme de chaîne (par exemple, "Angleterre"), code ISO-3166 en majuscules ou son équivalent en texte en anglais (par exemple, "GB" ou "Royaume-Uni").
- Nom de code régional ISO-3166-2 en majuscules ou son équivalent en texte anglais (par exemple, "US-NJ" ou "New Jersey"). Remarque: Des régions ne peuvent être spécifiées que lorsque l'option dataMode est définie sur "regions".
- Indicatif métropolitain. Il s'agit de codes d'agglomération à trois chiffres servant à désigner différentes régions. Les codes américains ne sont acceptés que. Notez qu'ils sont différents des indicatifs téléphoniques.
- [Nombre, facultatif] Valeur numérique affichée lorsque l'utilisateur pointe 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 pointe sur cette région.
- [Chaîne obligatoire] Emplacement sur la carte. Les formats suivants sont acceptés :
Remarque:Une carte peut afficher un maximum de 400 entrées. Si votre table de données ou DataView contient plus de 400 lignes, seules les 400 premières seront affichées. Les modes les plus rapides sont dataMode='regions' avec des lieux spécifiés sous forme de codes ISO, et dataMode='markers' avec des coordonnées de latitude/longitude. Le mode le plus lent est dataMode='markers' avec une adresse de chaîne.
Important:DataTable doit inclure toutes les colonnes facultatives précédant les colonnes que vous souhaitez utiliser. Par exemple, si vous souhaitez spécifier une table lat/long et n'utiliser que les colonnes 1, 2 et 4, votre 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 | "world" | Zone à afficher sur la carte. (Les zones environnantes seront également affichées.) Il peut s'agir d'un code pays (en majuscules au format ISO-3166) ou de l'une des chaînes suivantes:
Le Geomap n'autorise pas le défilement ou le déplacement, 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 | "regions" | 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 pixel. |
height |
chaîne | "347 px" | Hauteur de la visualisation. Si aucune unité n'est indiquée, l'unité par défaut est le pixel. |
colors |
Tableau de nombres RVB au format 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Dégradé de couleur à attribuer aux valeurs de la visualisation. Vous devez avoir au moins deux valeurs. Le dégradé inclura toutes vos valeurs, ainsi que les valeurs intermédiaires calculées, la couleur la plus claire étant la plus petite et la couleur la plus sombre comme la valeur la plus élevée. |
showLegend |
boolean | true | Si la valeur est "true", affiche une légende pour la carte. |
showZoomOut |
boolean | 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, sauf qu'il génère l'événement zoomOut.
Pour gérer le zoom, interceptez 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 et actualiser la carte. |
zoomOutLabel |
chaîne | "Zoom arrière" | Étiquette du bouton de zoom. |
Méthodes
| Méthode | Type renvoyé | Description |
|---|---|---|
draw(data, options) |
Aucun | Dessine la carte. Peut être renvoyé avant la fin du dessin (voir l'événement drawingDone()). |
getSelection() |
Tableau d'éléments de sélection | Implémentation standard de getSelection(). Les éléments sélectionnés sont des lignes. Cette méthode ne fonctionne que lorsque l'option dataMode est définie sur "regions". Vous ne pouvez sélectionner qu'une région à laquelle une valeur a été attribuée. |
setSelection(selection) |
Aucun | Implémentation standard de setSelection(). Traite une sélection comme une sélection de lignes et accepte les sélections de plusieurs lignes. Seules des régions auxquelles des valeurs ont été attribuées peuvent être sélectionnées. |
Événements
| Nom | Description | Propriétés |
|---|---|---|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. | ID, message |
select |
Déclenché lorsque l'utilisateur clique sur une région à laquelle une valeur a été attribuée. Pour savoir ce qui a été sélectionné, appelez Remarque: En raison de certaines limites, l'événement |
Aucun |
regionClick |
Appelé lorsqu'un utilisateur clique sur une région. Fonctionne à la fois pour les Remarque: En raison de certaines limites, l'événement |
Un 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é en cas de clic sur le bouton de zoom arrière. Pour gérer le zoom, interceptez cet événement et modifiez l'option Remarque: En raison de certaines limites, l'événement |
Aucun |
drawingDone |
Appelé lorsque le tracé de la carte géographique est terminé. | Aucun |
Règles concernant les données
Les lieux sont géocodés 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 les règles relatives aux données, veuillez consulter les Conditions d'utilisation de Google Maps.
Remarques
En raison des paramètres de sécurité Flash, il est possible que cette page (et toutes les visualisations Flash) ne fonctionne pas correctement lorsque vous y accédez à partir d'un emplacement de fichier dans le navigateur (par exemple, fichier:///c:/webhost/monhôte/myviz.html) plutôt qu'à partir d'une URL de serveur Web (par exemple, http://www.monhôte.com/monviz.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 de Macromedia.