AI-generated Key Takeaways
-
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. 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>