Présentation
Ce tutoriel explique comment afficher des données provenant de plusieurs sources sur une carte Google. Par exemple, la carte choroplèthe ci-dessous utilise deux sources différentes pour mettre en évidence divers États des États-Unis et afficher des données spécifiques à un État.
La carte utilise les données d'un fichier GeoJSON pour afficher les polygones qui définissent les frontières des États des États-Unis. Ce fichier peut également présenter sur la carte des données correspondant à chaque état, qui proviennent d'une simulation de requête envoyée à l'API US Census.
Sélectionnez une catégorie de données dans le menu déroulant des commandes pour mettre à jour les polygones sur la carte. Vous pouvez également pointer sur le polygone d'un État pour afficher ses informations dans une commande de zone de données sur la carte.
L'exemple ci-dessous montre tout le code dont vous avez besoin pour créer cette carte.
TypeScript
const mapStyle: google.maps.MapTypeStyle[] = [
{
stylers: [{ visibility: "off" }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ visibility: "on" }, { color: "#fcfcfc" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ visibility: "on" }, { color: "#bfd4ff" }],
},
];
let map: google.maps.Map;
let censusMin = Number.MAX_VALUE,
censusMax = -Number.MAX_VALUE;
function initMap(): void {
// load the map
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: 40, lng: -100 },
zoom: 4,
styles: mapStyle,
});
// set up the style rules and events for google.maps.Data
map.data.setStyle(styleFeature);
map.data.addListener("mouseover", mouseInToRegion);
map.data.addListener("mouseout", mouseOutOfRegion);
// wire up the button
const selectBox = document.getElementById(
"census-variable"
) as HTMLSelectElement;
google.maps.event.addDomListener(selectBox, "change", () => {
clearCensusData();
loadCensusData(selectBox.options[selectBox.selectedIndex].value);
});
// state polygons only need to be loaded once, do them now
loadMapShapes();
}
/** Loads the state boundary polygons from a GeoJSON source. */
function loadMapShapes() {
// load US state outline polygons from a GeoJson file
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/states.js",
{ idPropertyName: "STATE" }
);
// wait for the request to complete by listening for the first feature to be
// added
google.maps.event.addListenerOnce(map.data, "addfeature", () => {
google.maps.event.trigger(
document.getElementById("census-variable") as HTMLElement,
"change"
);
});
}
/**
* Loads the census data from a simulated API call to the US Census API.
*
* @param {string} variable
*/
function loadCensusData(variable: string) {
// load the requested variable from the census API (using local copies)
const xhr = new XMLHttpRequest();
xhr.open("GET", variable + ".json");
xhr.onload = function () {
const censusData = JSON.parse(xhr.responseText) as any;
censusData.shift(); // the first row contains column names
censusData.forEach((row: string) => {
const censusVariable = parseFloat(row[0]);
const stateId = row[1];
// keep track of min and max values
if (censusVariable < censusMin) {
censusMin = censusVariable;
}
if (censusVariable > censusMax) {
censusMax = censusVariable;
}
const state = map.data.getFeatureById(stateId);
// update the existing row with the new data
if (state) {
state.setProperty("census_variable", censusVariable);
}
});
// update and display the legend
(document.getElementById("census-min") as HTMLElement).textContent =
censusMin.toLocaleString();
(document.getElementById("census-max") as HTMLElement).textContent =
censusMax.toLocaleString();
};
xhr.send();
}
/** Removes census data from each shape on the map and resets the UI. */
function clearCensusData() {
censusMin = Number.MAX_VALUE;
censusMax = -Number.MAX_VALUE;
map.data.forEach((row) => {
row.setProperty("census_variable", undefined);
});
(document.getElementById("data-box") as HTMLElement).style.display = "none";
(document.getElementById("data-caret") as HTMLElement).style.display = "none";
}
/**
* Applies a gradient style based on the 'census_variable' column.
* This is the callback passed to data.setStyle() and is called for each row in
* the data set. Check out the docs for Data.StylingFunction.
*
* @param {google.maps.Data.Feature} feature
*/
function styleFeature(feature: google.maps.Data.Feature) {
const low = [5, 69, 54]; // color of smallest datum
const high = [151, 83, 34]; // color of largest datum
// delta represents where the value sits between the min and max
const delta =
(feature.getProperty("census_variable") - censusMin) /
(censusMax - censusMin);
const color: number[] = [];
for (let i = 0; i < 3; i++) {
// calculate an integer color based on the delta
color.push((high[i] - low[i]) * delta + low[i]);
}
// determine whether to show this shape or not
let showRow = true;
if (
feature.getProperty("census_variable") == null ||
isNaN(feature.getProperty("census_variable"))
) {
showRow = false;
}
let outlineWeight = 0.5,
zIndex = 1;
if (feature.getProperty("state") === "hover") {
outlineWeight = zIndex = 2;
}
return {
strokeWeight: outlineWeight,
strokeColor: "#fff",
zIndex: zIndex,
fillColor: "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)",
fillOpacity: 0.75,
visible: showRow,
};
}
/**
* Responds to the mouse-in event on a map shape (state).
*
* @param {?google.maps.MapMouseEvent} e
*/
function mouseInToRegion(e: any) {
// set the hover state so the setStyle function can change the border
e.feature.setProperty("state", "hover");
const percent =
((e.feature.getProperty("census_variable") - censusMin) /
(censusMax - censusMin)) *
100;
// update the label
(document.getElementById("data-label") as HTMLElement).textContent =
e.feature.getProperty("NAME");
(document.getElementById("data-value") as HTMLElement).textContent = e.feature
.getProperty("census_variable")
.toLocaleString();
(document.getElementById("data-box") as HTMLElement).style.display = "block";
(document.getElementById("data-caret") as HTMLElement).style.display =
"block";
(document.getElementById("data-caret") as HTMLElement).style.paddingLeft =
percent + "%";
}
/**
* Responds to the mouse-out event on a map shape (state).
*
*/
function mouseOutOfRegion(e: any) {
// reset the hover state, returning the border to normal
e.feature.setProperty("state", "normal");
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
const mapStyle = [
{
stylers: [{ visibility: "off" }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ visibility: "on" }, { color: "#fcfcfc" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ visibility: "on" }, { color: "#bfd4ff" }],
},
];
let map;
let censusMin = Number.MAX_VALUE,
censusMax = -Number.MAX_VALUE;
function initMap() {
// load the map
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40, lng: -100 },
zoom: 4,
styles: mapStyle,
});
// set up the style rules and events for google.maps.Data
map.data.setStyle(styleFeature);
map.data.addListener("mouseover", mouseInToRegion);
map.data.addListener("mouseout", mouseOutOfRegion);
// wire up the button
const selectBox = document.getElementById("census-variable");
google.maps.event.addDomListener(selectBox, "change", () => {
clearCensusData();
loadCensusData(selectBox.options[selectBox.selectedIndex].value);
});
// state polygons only need to be loaded once, do them now
loadMapShapes();
}
/** Loads the state boundary polygons from a GeoJSON source. */
function loadMapShapes() {
// load US state outline polygons from a GeoJson file
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/states.js",
{ idPropertyName: "STATE" }
);
// wait for the request to complete by listening for the first feature to be
// added
google.maps.event.addListenerOnce(map.data, "addfeature", () => {
google.maps.event.trigger(
document.getElementById("census-variable"),
"change"
);
});
}
/**
* Loads the census data from a simulated API call to the US Census API.
*
* @param {string} variable
*/
function loadCensusData(variable) {
// load the requested variable from the census API (using local copies)
const xhr = new XMLHttpRequest();
xhr.open("GET", variable + ".json");
xhr.onload = function () {
const censusData = JSON.parse(xhr.responseText);
censusData.shift(); // the first row contains column names
censusData.forEach((row) => {
const censusVariable = parseFloat(row[0]);
const stateId = row[1];
// keep track of min and max values
if (censusVariable < censusMin) {
censusMin = censusVariable;
}
if (censusVariable > censusMax) {
censusMax = censusVariable;
}
const state = map.data.getFeatureById(stateId);
// update the existing row with the new data
if (state) {
state.setProperty("census_variable", censusVariable);
}
});
// update and display the legend
document.getElementById("census-min").textContent =
censusMin.toLocaleString();
document.getElementById("census-max").textContent =
censusMax.toLocaleString();
};
xhr.send();
}
/** Removes census data from each shape on the map and resets the UI. */
function clearCensusData() {
censusMin = Number.MAX_VALUE;
censusMax = -Number.MAX_VALUE;
map.data.forEach((row) => {
row.setProperty("census_variable", undefined);
});
document.getElementById("data-box").style.display = "none";
document.getElementById("data-caret").style.display = "none";
}
/**
* Applies a gradient style based on the 'census_variable' column.
* This is the callback passed to data.setStyle() and is called for each row in
* the data set. Check out the docs for Data.StylingFunction.
*
* @param {google.maps.Data.Feature} feature
*/
function styleFeature(feature) {
const low = [5, 69, 54]; // color of smallest datum
const high = [151, 83, 34]; // color of largest datum
// delta represents where the value sits between the min and max
const delta =
(feature.getProperty("census_variable") - censusMin) /
(censusMax - censusMin);
const color = [];
for (let i = 0; i < 3; i++) {
// calculate an integer color based on the delta
color.push((high[i] - low[i]) * delta + low[i]);
}
// determine whether to show this shape or not
let showRow = true;
if (
feature.getProperty("census_variable") == null ||
isNaN(feature.getProperty("census_variable"))
) {
showRow = false;
}
let outlineWeight = 0.5,
zIndex = 1;
if (feature.getProperty("state") === "hover") {
outlineWeight = zIndex = 2;
}
return {
strokeWeight: outlineWeight,
strokeColor: "#fff",
zIndex: zIndex,
fillColor: "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)",
fillOpacity: 0.75,
visible: showRow,
};
}
/**
* Responds to the mouse-in event on a map shape (state).
*
* @param {?google.maps.MapMouseEvent} e
*/
function mouseInToRegion(e) {
// set the hover state so the setStyle function can change the border
e.feature.setProperty("state", "hover");
const percent =
((e.feature.getProperty("census_variable") - censusMin) /
(censusMax - censusMin)) *
100;
// update the label
document.getElementById("data-label").textContent =
e.feature.getProperty("NAME");
document.getElementById("data-value").textContent = e.feature
.getProperty("census_variable")
.toLocaleString();
document.getElementById("data-box").style.display = "block";
document.getElementById("data-caret").style.display = "block";
document.getElementById("data-caret").style.paddingLeft = percent + "%";
}
/**
* Responds to the mouse-out event on a map shape (state).
*
*/
function mouseOutOfRegion(e) {
// reset the hover state, returning the border to normal
e.feature.setProperty("state", "normal");
}
window.initMap = initMap;
CSS
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.nicebox {
position: absolute;
text-align: center;
font-family: "Roboto", "Arial", sans-serif;
font-size: 13px;
z-index: 5;
box-shadow: 0 4px 6px -4px #333;
padding: 5px 10px;
background: rgb(255, 255, 255);
background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(245, 245, 245) 100%);
border: rgb(229, 229, 229) 1px solid;
}
#controls {
top: 10px;
left: 110px;
width: 360px;
height: 45px;
}
#data-box {
top: 10px;
left: 500px;
height: 45px;
line-height: 45px;
display: none;
}
#census-variable {
width: 360px;
height: 20px;
}
#legend {
display: flex;
display: -webkit-box;
padding-top: 7px;
}
.color-key {
background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%);
flex: 1;
-webkit-box-flex: 1;
margin: 0 5px;
text-align: left;
font-size: 1em;
line-height: 1em;
}
#data-value {
font-size: 2em;
font-weight: bold;
}
#data-label {
font-size: 2em;
font-weight: normal;
padding-right: 10px;
}
#data-label:after {
content: ":";
}
#data-caret {
margin-left: -5px;
display: none;
font-size: 14px;
width: 14px;
}
HTML
<html>
<head>
<title>Mashups with google.maps.Data</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="controls" class="nicebox">
<div>
<select id="census-variable">
<option
value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE"
>
Percent of population over 25 that completed high school
</option>
<option
value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E"
>
Median age
</option>
<option
value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E"
>
Total population
</option>
<option
value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E"
>
Average family size
</option>
<option
value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E"
>
Per-capita income
</option>
</select>
</div>
<div id="legend">
<div id="census-min">min</div>
<div class="color-key"><span id="data-caret">◆</span></div>
<div id="census-max">max</div>
</div>
</div>
<div id="data-box" class="nicebox">
<label id="data-label" for="data-value"></label>
<span id="data-value"></span>
</div>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Essayer l'exemple
Premiers pas
Vous pouvez développer une version personnalisée de la carte choroplèthe en vous basant sur le code fourni dans ce tutoriel.
Pour ce faire, commencez par créer un fichier dans un éditeur de texte, puis enregistrez-le sous le nom index.html.
Lisez les sections ci-dessous pour savoir quel code vous pouvez ajouter à ce fichier.
Créer une carte basique
Cette section décrit le code qui permet de configurer une carte basique. Vous trouverez peut-être des similarités avec la méthode employée pour créer des cartes lorsque vous avez commencé à utiliser l'API Maps JavaScript.
Copiez le code ci-dessous dans votre fichier index.html. Ce code charge l'API Maps JavaScript et affiche la carte en plein écran.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Mashups with google.maps.Data</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// load the map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40, lng: -100},
zoom: 4,
styles: mapStyle
});
var mapStyle = [{
'featureType': 'all',
'elementType': 'all',
'stylers': [{'visibility': 'off'}]
}, {
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'color': '#fcfcfc'}]
}, {
'featureType': 'water',
'elementType': 'labels',
'stylers': [{'visibility': 'off'}]
}, {
'featureType': 'water',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'hue': '#5f94ff'}, {'lightness': 60}]
}];
}
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Le code contenu dans le premier tag de script est le point de départ de ce programme. Il crée une fonction appelée initMap qui initialise l'objet de carte.
Les stylers du code ci-dessus désactivent la visibilité de tous les featureTypes sur la carte (comme les routes, les points d'intérêt, le paysage et les zones administratives) et de tous leurs elementTypes. Pour obtenir la liste de toutes les valeurs disponibles pour featureType et elementType, consultez la documentation de référence sur le style JSON.
Cliquez sur YOUR_API_KEY dans l'exemple de code ou suivez les instructions pour obtenir une clé API.
Remplacez YOUR_API_KEY par la clé API de votre application. Une fois l'API entièrement chargée, le paramètre de rappel du tag de script ci-dessous exécute la fonction initMap() dans le fichier HTML.
<script> defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>
Créer et styliser les commandes de la carte
Le code ci-dessous crée les commandes suivantes sur la carte :
- Une commande avec un menu déroulant proposant cinq options de données différentes
- Une légende de carte
- Une zone de données affichant des données sur les États des États-Unis qui apparaissent lorsque vous pointez sur un polygone
<div id="controls" class="nicebox">
<div>
<select id="census-variable">
<option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE">Percent of population over 25 that completed high
school</option>
<option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E">Median age</option>
<option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E">Total population</option>
<option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E">Average family size</option>
<option value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E">Per-capita income</option>
</select>
</div>
<div id="legend">
<div id="census-min">min</div>
<div class="color-key"><span id="data-caret">◆</span></div>
<div id="census-max">max</div>
</div>
</div>
<div id="data-box" class="nicebox">
<label id="data-label" for="data-value"></label>
<span id="data-value"></span>
</div>
Utilisez le code ci-dessous entre les tags style pour styliser les commandes de la carte.
<style>
html, body, #map { height: 100%; margin: 0; padding: 0; overflow: hidden; }
.nicebox {
position: absolute;
text-align: center;
font-family: "Roboto", "Arial", sans-serif;
font-size: 13px;
z-index: 5;
box-shadow: 0 4px 6px -4px #333;
padding: 5px 10px;
background: rgb(255,255,255);
background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
border: rgb(229, 229, 229) 1px solid;
}
#controls {
top: 10px;
left: 110px;
width: 360px;
height: 45px;
}
#data-box {
top: 10px;
left: 500px;
height: 45px;
line-height: 45px;
display: none;
}
#census-variable {
width: 360px;
height: 20px;
}
#legend { display: flex; display: -webkit-box; padding-top: 7px }
.color-key {
background: linear-gradient(to right,
hsl(5, 69%, 54%) 0%,
hsl(29, 71%, 51%) 17%,
hsl(54, 74%, 47%) 33%,
hsl(78, 76%, 44%) 50%,
hsl(102, 78%, 41%) 67%,
hsl(127, 81%, 37%) 83%,
hsl(151, 83%, 34%) 100%);
flex: 1;
-webkit-box-flex: 1;
margin: 0 5px;
text-align: left;
font-size: 1.0em;
line-height: 1.0em;
}
#data-value { font-size: 2.0em; font-weight: bold }
#data-label { font-size: 2.0em; font-weight: normal; padding-right: 10px; }
#data-label:after { content: ':' }
#data-caret { margin-left: -5px; display: none; font-size: 14px; width: 14px}
</style>
Importer des données depuis l'API US Census
Le code ci-dessous interroge le Bureau du recensement des États-Unis (US Census Bureau) pour obtenir les données de recensement les plus récentes de tous les États des États-Unis au format JSON.
function loadCensusData(variable) {
// load the requested variable from the census API
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.census.gov/data/2012/acs5/profile?get=' +
variable + '&for=state:*&key=YOUR_API_KEY');
xhr.onload = function() {
var censusData = JSON.parse(xhr.responseText);
censusData.shift(); // the first row contains column names
censusData.forEach(function(row) {
var censusVariable = parseFloat(row[0]);
var stateId = row[1];
// keep track of min and max values
if (censusVariable < censusMin) {
censusMin = censusVariable;
}
if (censusVariable > censusMax) {
censusMax = censusVariable;
}
// update the existing row with the new data
map.data
.getFeatureById(stateId)
.setProperty('census_variable', censusVariable);
});
// update and display the legend
document.getElementById('census-min').textContent =
censusMin.toLocaleString();
document.getElementById('census-max').textContent =
censusMax.toLocaleString();
};
xhr.send();
}
Styliser les données
Le code ci-dessous crée la carte de choroplèthe en appliquant un dégradé à chaque polygone de l'ensemble de données, en fonction de la valeur des données de recensement. Vous pouvez styliser les données à l'aide d'un objet Data.StyleOptions ou d'une fonction qui renvoie un objet Data.StyleOptions.
// set up the style rules and events for google.maps.Data
map.data.setStyle(styleFeature);
function styleFeature(feature) {
var low = [5, 69, 54]; // color of smallest datum
var high = [151, 83, 34]; // color of largest datum
// delta represents where the value sits between the min and max
var delta = (feature.getProperty('census_variable') - censusMin) /
(censusMax - censusMin);
var color = [];
for (var i = 0; i < 3; i++) {
// calculate an integer color based on the delta
color[i] = (high[i] - low[i]) * delta + low[i];
}
// determine whether to show this shape or not
var showRow = true;
if (feature.getProperty('census_variable') == null ||
isNaN(feature.getProperty('census_variable'))) {
showRow = false;
}
var outlineWeight = 0.5, zIndex = 1;
if (feature.getProperty('state') === 'hover') {
outlineWeight = zIndex = 2;
}
return {
strokeWeight: outlineWeight,
strokeColor: '#fff',
zIndex: zIndex,
fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)',
fillOpacity: 0.75,
visible: showRow
};
}
En plus de colorer les polygones, le code ci-dessous crée un élément interactif en ajoutant des événements qui réagissent à l'activité de la souris. Lorsque l'utilisateur pointe sur un polygone, la frontière de l'État est mise en évidence et, simultanément, la commande de zone de données est mise à jour sur la carte.
// set up the style rules and events for google.maps.Data
map.data.addListener('mouseover', mouseInToRegion);
map.data.addListener('mouseout', mouseOutOfRegion);
/**
* Responds to the mouse-in event on a map shape (state).
*
* @param {?google.maps.MapMouseEvent} e
*/
function mouseInToRegion(e) {
// set the hover state so the setStyle function can change the border
e.feature.setProperty('state', 'hover');
var percent = (e.feature.getProperty('census_variable') - censusMin) /
(censusMax - censusMin) * 100;
// update the label
document.getElementById('data-label').textContent =
e.feature.getProperty('NAME');
document.getElementById('data-value').textContent =
e.feature.getProperty('census_variable').toLocaleString();
document.getElementById('data-box').style.display = 'block';
document.getElementById('data-caret').style.display = 'block';
document.getElementById('data-caret').style.paddingLeft = percent + '%';
}
/**
* Responds to the mouse-out event on a map shape (state).
*
* @param {?google.maps.MapMouseEvent} e
*/
function mouseOutOfRegion(e) {
// reset the hover state, returning the border to normal
e.feature.setProperty('state', 'normal');
}
Charger des polygones des frontières des États
Ajoutez le code ci-dessous après l'intégralité de la fonction initMap. La fonction loadMapShapes charge les polygones pour délimiter les États des États-Unis à partir d'un fichier GeoJSON à l'aide de la méthode loadGeoJson.
/** Loads the state boundary polygons from a GeoJSON source. */
function loadMapShapes() {
// load US state outline polygons from a GeoJSON file
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/states.js', { idPropertyName: 'STATE' });
Ajoutez la ligne ci-dessous à la fin de la fonction initMap.
// state polygons only need to be loaded once, do them now loadMapShapes();
Lorsque vous sélectionnez une option de source de données dans le menu déroulant des commandes de carte, la carte interroge l'API US Census Data pour obtenir la variable spécifiée. Pour associer les données de recensement aux données de forme, le code définit idPropertyName sur 'STATE', qui est une clé courante dans les données de recensement et dans les propriétés GeoJson.
En savoir plus
Cette démonstration utilise l'API Census Bureau Data, mais n'est pas approuvée ni certifiée par le Bureau du recensement des États-Unis.