סקירה
במדריך הזה תלמדו איך להציג נתונים מכמה מקורות במפת Google. לדוגמה, המפה של הכוורופט הבאה משתמשת בשני מקורות שונים כדי להדגיש מדינות שונות בארה"ב, ולהציג נתונים ספציפיים לכל מדינה.
המפה משתמשת בנתונים מקובץ GeoJSON כדי להציג פוליגונים שמגדירים את גבולות המדינות בארה"ב. הם יכולים גם להציג במפה נתונים שתואמים לכל מדינה, שמקורם בסימולציה של שאילתה ב-US Census API.
כדי לעדכן את הפוליגונים במפה, צריך לבחור קטגוריית נתונים בתפריט הנפתח של הבקרה. אפשר גם להעביר את העכבר מעל פוליגון של מדינה כדי לראות מידע ספציפי למדינה בפקדים של תיבת הנתונים במפה.
בדוגמה הבאה מוצג הקוד המלא שדרוש כדי ליצור את המפה הזו.
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 let censusVariable = feature.getProperty("census_variable") as number; // delta represents where the value sits between the min and max const delta = (censusVariable - 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 ( censusVariable == null || isNaN(censusVariable) ) { 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 let censusVariable = feature.getProperty("census_variable"); // delta represents where the value sits between the min and max const delta = (censusVariable - 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 (censusVariable == null || isNaN(censusVariable)) { 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> <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 script 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>
כדאי לנסות דוגמה
איך מתחילים
תוכלו לפתח גרסה משלכם של מפת הכוורופולט הזו באמצעות הקוד במדריך הזה.
כדי להתחיל לעשות את זה, צריך ליצור קובץ חדש בכלי לעריכת טקסט ולשמור אותו בשם index.html
.
כדאי לקרוא את הקטעים הבאים כדי להבין מהו הקוד שניתן להוסיף לקובץ.
יצירת מפה בסיסית
בקטע הזה מוסבר הקוד שמגדיר את המפה הבסיסית. התהליך הזה יכול להיות דומה לאופן שבו יצרת מפות כשהתחלת לעבוד עם Maps JavaScript API.
מעתיקים את הקוד שבהמשך לקובץ index.html
. הקוד הזה טוען את
ממשק JavaScript API של מפות Google והופך את המפה למסך מלא.
<!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>
הקוד בתג הסקריפט הראשון הוא נקודת ההתחלה להפעלת התוכנית. לשם כך, המערכת יוצרת פונקציה בשם initMap
שמאתחלת את אובייקט המפה.
המעצבים בקוד שלמעלה משביתים את החשיפה של כל
featureTypes
במפה, כמו כבישים, נקודות עניין, נוף, אזורים מנהליים וכל הelementTypes
שלהם. רשימה של כל הערכים הזמינים בשביל featureType
ו-elementType
מופיעה בחומר העזר בנושא סגנון JSON.
לוחצים על YOUR_API_KEY
בדוגמה של הקוד או פועלים לפי ההוראות כדי לקבל מפתח API.
מחליפים את YOUR_API_KEY
במפתח ה-API של האפליקציה. אחרי שה-API
נטען במלואו, פרמטר הקריאה החוזרת (callback) בתג הסקריפט שבהמשך מפעיל את
הפונקציה initMap()
בקובץ ה-HTML.
<script> defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>
יצירה ועיצוב של פקד המפה
הקוד שבהמשך יוצר את הפקדים הבאים במפה:
- אמצעי בקרה עם תפריט נפתח שכולל 5 אפשרויות שונות לנתונים.
- מקרא של מפה.
- תיבת נתונים שמציגה נתונים ספציפיים למדינה שמופיעה כשמעבירים את העכבר מעל פוליגון.
<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>
יש להשתמש בקוד שבהמשך בתוך התגים style
כדי לעצב את פקדי המפה.
<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>
ייבוא נתונים מ-US Census API
הקוד שבהמשך שולח שאילתה ללשכת רישום האוכלוסין בארה"ב לגבי נתוני מפקד האוכלוסין העדכניים ביותר של כל המדינות בארה"ב, שאותם הוא מקבל בפורמט 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();
}
עיצוב הנתונים
הקוד שבהמשך יוצר את מפת הכוורופלת על ידי החלת שיפוע על כל פוליגון במערך הנתונים,
על סמך ערך הנתונים של מפקד האוכלוסין. אפשר לעצב את הנתונים באמצעות אובייקט Data.StyleOptions
או פונקציה שמחזירה אובייקט 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 }; }
בנוסף לצביעת הפוליגונים, ��קוד שבהמשך יוצר ��כ��ב א��נ��ראקטיבי על ידי הוספת אירועים שמגיבים לפעילות העכבר. העברת העכבר מעל פוליגון מדגישה את גבול המדינה, ומעדכנת בו-זמנית את פקד תיבת הנתונים.
// 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'); }
מתבצעת טעינה של הפוליגונים של גבולות המדינה
צריך להוסיף את הקוד שבהמשך אחרי כל הפונקציה initMap
. הפונקציה loadMapShapes
טוענת פוליגונים לגבולות של מדינות בארה"ב מקובץ GeoJSON, באמצעות השיטה 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' });
מוסיפים את השורה הבאה בסוף הפונקציה initMap
.
// state polygons only need to be loaded once, do them now loadMapShapes();
כשבוחרים אפשרות של מקור נתונים מהתפריט הנפתח של בקרת המפה, המפה שולחת שאילתה
ל-US Census Data API עבור המשתנה שצוין. כדי לחבר את נתוני מפקד האוכלוסין עם נתוני הצורה, הקוד מגדיר את
idPropertyName
כ-STATE, שהוא מפתח משותף גם בנתוני מפקד האוכלוסין וגם בנכסים של GeoJson.
מידע נוסף
ההדגמה הזו משתמשת ב-Census Bureau Data API, אבל היא לא אושרה על ידי רשות האוכלוסין ולא הומלצה על ידי הרשויות.