Page Summary
-
Choropleth maps use color-coding to represent data values within administrative areas on a map.
-
The
google.maps.FeatureStyleFunctionallows customization of region colors based on corresponding data values. -
Data is structured as key-value pairs, linking administrative areas with their numeric data.
-
Ensure predictable output from your
FeatureStyleFunctionby handling random elements externally.
A choropleth map is a type of thematic map in which administrative areas are colored or shaded according to a data value. You can use a google.maps.FeatureStyleFunction to style a map based on a dataset where each administrative area is associated with a range of numeric values. The following example map shows a choropleth map depicting state population data for the United States.
In this example, the data consists of an array of key-value pairs, matching the display name of each state with a numeric population value. The maps.FeatureStyleFunction conditionally colors each region based on the values in the array.
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, }; };
Complete example code
TypeScript
async function initMap() { // Request needed libraries. (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; // Get the gmp-map element. const mapElement = document.querySelector( 'gmp-map' ) as google.maps.MapElement; // Get the inner map. const innerMap = mapElement.innerMap; const featureLayer = innerMap.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. (await google.maps.importLibrary('maps')); // Get the gmp-map element. const mapElement = document.querySelector('gmp-map'); // Get the inner map. const innerMap = mapElement.innerMap; const featureLayer = innerMap.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. */ gmp-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> <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_data-driven-styling" });</script> </head> <body> <gmp-map center="40.76,-101.64" zoom="5" map-id="8b37d7206ccf01219cd548d3"></gmp-map> </body> </html>