Une carte choroplèthe est un type de carte thématique dans laquelle les régions administratives sont colorées ou nuancées en fonction d'une valeur de données. Vous pouvez utiliser google.maps.FeatureStyleFunction pour styliser une carte en fonction d'un ensemble de données, chaque région administrative étant associée à une plage de valeurs numériques. L'exemple de carte suivant montre une carte choroplèthe représentant les données de population de chaque État des États-Unis.
Dans cet exemple, les données sont constituées d'un tableau de paires clé/valeur, correspondant au nom à afficher de chaque État avec une valeur numérique de population. La maps.FeatureStyleFunction colore de manière conditionnelle chaque région en fonction des valeurs du tableau.
TypeScript
featureLayer.style = featureStyleFunctionOptions => {
const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
const population = states[placeFeature.placeId];
let fillColor;
// Specify colors using any of the following:
// * Named ('green')
// * Hexadecimal ('#FF0000')
// * RGB ('rgb(0, 0, 255)')
// * HSL ('hsl(60, 100%, 50%)')
if (population < 2000000) {
fillColor = 'green'
} else if (population < 5000000) {
fillColor = 'red'
} else if (population < 10000000) {
fillColor = 'blue'
} else if (population < 40000000) {
fillColor = 'yellow'
}
return {
fillColor,
fillOpacity: 0.5
}
}
JavaScript
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
const population = states[placeFeature.placeId];
let fillColor;
// Specify colors using any of the following:
// * Named ('green')
// * Hexadecimal ('#FF0000')
// * RGB ('rgb(0, 0, 255)')
// * HSL ('hsl(60, 100%, 50%)')
if (population < 2000000) {
fillColor = "green";
} else if (population < 5000000) {
fillColor = "red";
} else if (population < 10000000) {
fillColor = "blue";
} else if (population < 40000000) {
fillColor = "yellow";
}
return {
fillColor,
fillOpacity: 0.5,
};
};
Exemple de code complet
TypeScript
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: 40.76, lng: -101.64 },
zoom: 5,
// In the cloud console, configure this Map ID with a style that enables the
// "Administrative Area Level 1" feature layer.
mapId: '7ba16be0c9375fa7',
});
const featureLayer = map.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1);
featureLayer.style = featureStyleFunctionOptions => {
const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
const population = states[placeFeature.placeId];
let fillColor;
// Specify colors using any of the following:
// * Named ('green')
// * Hexadecimal ('#FF0000')
// * RGB ('rgb(0, 0, 255)')
// * HSL ('hsl(60, 100%, 50%)')
if (population < 2000000) {
fillColor = 'green'
} else if (population < 5000000) {
fillColor = 'red'
} else if (population < 10000000) {
fillColor = 'blue'
} else if (population < 40000000) {
fillColor = 'yellow'
}
return {
fillColor,
fillOpacity: 0.5
}
}
// Population data by state.
const states = {
"ChIJdf5LHzR_hogR6czIUzU0VV4": 5039877, // Alabama
"ChIJG8CuwJzfAFQRNduKqSde27w": 732673, // Alaska
"ChIJaxhMy-sIK4cRcc3Bf7EnOUI": 7276316, // Arizona
"ChIJYSc_dD-e0ocR0NLf_z5pBaQ": 3025891, // Arkansas
"ChIJPV4oX_65j4ARVW8IJ6IJUYs": 39237836, // California
"ChIJt1YYm3QUQIcR_6eQSTGDVMc": 5812069, // Colorado
"ChIJpVER8hFT5okR5XBhBVttmq4": 3605597, // Connecticut
"ChIJO9YMTXYFx4kReOgEjBItHZQ": 1003384, // Delaware
"ChIJvypWkWV2wYgR0E7HW9MTLvc": 21781128, // Florida
"ChIJV4FfHcU28YgR5xBP7BC8hGY": 10799566, // Georgia
"ChIJBeB5Twbb_3sRKIbMdNKCd0s": 1441553, // Hawaii
"ChIJ6Znkhaj_WFMRWIf3FQUwa9A": 1900923, // Idaho
"ChIJGSZubzgtC4gRVlkRZFCCFX8": 12671469, // Illinois
"ChIJHRv42bxQa4gRcuwyy84vEH4": 6805985, // Indiana
"ChIJGWD48W9e7ocR2VnHV0pj78Y": 3193079, // Iowa
"ChIJawF8cXEXo4cRXwk-S6m0wmg": 2934582, // Kansas
"ChIJyVMZi0xzQogR_N_MxU5vH3c": 4509394, // Kentucky
"ChIJZYIRslSkIIYRA0flgTL3Vck": 4624047, // Louisiana
"ChIJ1YpTHd4dsEwR0KggZ2_MedY": 1372247, // Maine
"ChIJ35Dx6etNtokRsfZVdmU3r_I": 6165129, // Maryland
"ChIJ_b9z6W1l44kRHA2DVTbQxkU": 6984723, // Massachussetts
"ChIJEQTKxz2qTE0Rs8liellI3Zc": 10050811, // Michigan
"ChIJmwt4YJpbWE0RD6L-EJvJogI": 5707390, // Minnesota
"ChIJGdRK5OQyKIYR2qbc6X8XDWI": 2949965, // Mississippi
"ChIJfeMiSNXmwIcRcr1mBFnEW7U": 6168187, // Misssouri
"ChIJ04p7LZwrQVMRGGwqz1jWcfU": 1104271, // Montana
"ChIJ7fwMtciNk4cRxArzDwyQJ6E": 1963692, // Nebraska
"ChIJcbTe-KEKmYARs5X8qooDR88": 3143991, // Nevada
"ChIJ66bAnUtEs0wR64CmJa8CyNc": 1388992, // New Hampshire
"ChIJn0AAnpX7wIkRjW0_-Ad70iw": 9267130, // New Jersey
"ChIJqVKY50NQGIcRup41Yxpuv0Y": 2115877, // New Mexico
"ChIJqaUj8fBLzEwRZ5UY3sHGz90": 19835913, // New York
"ChIJgRo4_MQfVIgRGa4i6fUwP60": 10551162, // North Carolina
"ChIJY-nYVxKD11IRyc9egzmahA0": 774948, // North Dakota
"ChIJwY5NtXrpNogRFtmfnDlkzeU": 11780017, // Ohio
"ChIJnU-ssRE5rIcRSOoKQDPPHF0": 3986639, // Oklahoma
"ChIJVWqfm3xuk1QRdrgLettlTH0": 4246155, // Oregon
"ChIJieUyHiaALYgRPbQiUEchRsI": 12964056, // Pennsylvania
"ChIJD9cOYhQ15IkR5wbB57wYTh4": 1095610, // Rhode Island
"ChIJ49ExeWml-IgRnhcF9TKh_7k": 5190705, // South Carolina
"ChIJpTjphS1DfYcRt6SGMSnW8Ac": 895376, // South Dakota
"ChIJA8-XniNLYYgRVpGBpcEgPgM": 6975218, // Tennessee
"ChIJSTKCCzZwQIYRPN4IGI8c6xY": 29527941, // Texas
"ChIJzfkTj8drTIcRP0bXbKVK370": 3337975, // Utah
"ChIJ_87aSGzctEwRtGtUNnSJTSY": 645570, // Vermont
"ChIJzbK8vXDWTIgRlaZGt0lBTsA": 8642274, // Virginia
"ChIJ-bDD5__lhVQRuvNfbGh4QpQ": 7738692, // Washington
"ChIJRQnL1KVUSogRQzrN3mjHALs": 1782959, // West Virginia
"ChIJr-OEkw_0qFIR1kmG-LjV1fI": 5895908, // Wisconsin
"ChIJaS7hSDTiXocRLzh90nkisCY": 578803, // Wyoming
};
}
initMap();
JavaScript
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const map = new Map(document.getElementById("map"), {
center: { lat: 40.76, lng: -101.64 },
zoom: 5,
// In the cloud console, configure this Map ID with a style that enables the
// "Administrative Area Level 1" feature layer.
mapId: "7ba16be0c9375fa7",
});
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1,
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
const population = states[placeFeature.placeId];
let fillColor;
// Specify colors using any of the following:
// * Named ('green')
// * Hexadecimal ('#FF0000')
// * RGB ('rgb(0, 0, 255)')
// * HSL ('hsl(60, 100%, 50%)')
if (population < 2000000) {
fillColor = "green";
} else if (population < 5000000) {
fillColor = "red";
} else if (population < 10000000) {
fillColor = "blue";
} else if (population < 40000000) {
fillColor = "yellow";
}
return {
fillColor,
fillOpacity: 0.5,
};
};
// Population data by state.
const states = {
"ChIJdf5LHzR_hogR6czIUzU0VV4": 5039877, // Alabama
"ChIJG8CuwJzfAFQRNduKqSde27w": 732673, // Alaska
"ChIJaxhMy-sIK4cRcc3Bf7EnOUI": 7276316, // Arizona
"ChIJYSc_dD-e0ocR0NLf_z5pBaQ": 3025891, // Arkansas
"ChIJPV4oX_65j4ARVW8IJ6IJUYs": 39237836, // California
"ChIJt1YYm3QUQIcR_6eQSTGDVMc": 5812069, // Colorado
"ChIJpVER8hFT5okR5XBhBVttmq4": 3605597, // Connecticut
"ChIJO9YMTXYFx4kReOgEjBItHZQ": 1003384, // Delaware
"ChIJvypWkWV2wYgR0E7HW9MTLvc": 21781128, // Florida
"ChIJV4FfHcU28YgR5xBP7BC8hGY": 10799566, // Georgia
"ChIJBeB5Twbb_3sRKIbMdNKCd0s": 1441553, // Hawaii
"ChIJ6Znkhaj_WFMRWIf3FQUwa9A": 1900923, // Idaho
"ChIJGSZubzgtC4gRVlkRZFCCFX8": 12671469, // Illinois
"ChIJHRv42bxQa4gRcuwyy84vEH4": 6805985, // Indiana
"ChIJGWD48W9e7ocR2VnHV0pj78Y": 3193079, // Iowa
"ChIJawF8cXEXo4cRXwk-S6m0wmg": 2934582, // Kansas
"ChIJyVMZi0xzQogR_N_MxU5vH3c": 4509394, // Kentucky
"ChIJZYIRslSkIIYRA0flgTL3Vck": 4624047, // Louisiana
"ChIJ1YpTHd4dsEwR0KggZ2_MedY": 1372247, // Maine
"ChIJ35Dx6etNtokRsfZVdmU3r_I": 6165129, // Maryland
"ChIJ_b9z6W1l44kRHA2DVTbQxkU": 6984723, // Massachussetts
"ChIJEQTKxz2qTE0Rs8liellI3Zc": 10050811, // Michigan
"ChIJmwt4YJpbWE0RD6L-EJvJogI": 5707390, // Minnesota
"ChIJGdRK5OQyKIYR2qbc6X8XDWI": 2949965, // Mississippi
"ChIJfeMiSNXmwIcRcr1mBFnEW7U": 6168187, // Misssouri
"ChIJ04p7LZwrQVMRGGwqz1jWcfU": 1104271, // Montana
"ChIJ7fwMtciNk4cRxArzDwyQJ6E": 1963692, // Nebraska
"ChIJcbTe-KEKmYARs5X8qooDR88": 3143991, // Nevada
"ChIJ66bAnUtEs0wR64CmJa8CyNc": 1388992, // New Hampshire
"ChIJn0AAnpX7wIkRjW0_-Ad70iw": 9267130, // New Jersey
"ChIJqVKY50NQGIcRup41Yxpuv0Y": 2115877, // New Mexico
"ChIJqaUj8fBLzEwRZ5UY3sHGz90": 19835913, // New York
"ChIJgRo4_MQfVIgRGa4i6fUwP60": 10551162, // North Carolina
"ChIJY-nYVxKD11IRyc9egzmahA0": 774948, // North Dakota
"ChIJwY5NtXrpNogRFtmfnDlkzeU": 11780017, // Ohio
"ChIJnU-ssRE5rIcRSOoKQDPPHF0": 3986639, // Oklahoma
"ChIJVWqfm3xuk1QRdrgLettlTH0": 4246155, // Oregon
"ChIJieUyHiaALYgRPbQiUEchRsI": 12964056, // Pennsylvania
"ChIJD9cOYhQ15IkR5wbB57wYTh4": 1095610, // Rhode Island
"ChIJ49ExeWml-IgRnhcF9TKh_7k": 5190705, // South Carolina
"ChIJpTjphS1DfYcRt6SGMSnW8Ac": 895376, // South Dakota
"ChIJA8-XniNLYYgRVpGBpcEgPgM": 6975218, // Tennessee
"ChIJSTKCCzZwQIYRPN4IGI8c6xY": 29527941, // Texas
"ChIJzfkTj8drTIcRP0bXbKVK370": 3337975, // Utah
"ChIJ_87aSGzctEwRtGtUNnSJTSY": 645570, // Vermont
"ChIJzbK8vXDWTIgRlaZGt0lBTsA": 8642274, // Virginia
"ChIJ-bDD5__lhVQRuvNfbGh4QpQ": 7738692, // Washington
"ChIJRQnL1KVUSogRQzrN3mjHALs": 1782959, // West Virginia
"ChIJr-OEkw_0qFIR1kmG-LjV1fI": 5895908, // Wisconsin
"ChIJaS7hSDTiXocRLzh90nkisCY": 578803, // Wyoming
};
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<html>
<head>
<title>Choropleth Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>