खास जानकारी
इस ट्यूटोरियल में, Google Maps पर एक से ज़्यादा सोर्स का डेटा दिखाने का तरीका बताया गया है. उदाहरण के लिए, अमेरिका के अलग-अलग राज्यों को हाइलाइट करने और राज्य के हिसाब से डेटा दिखाने के लिए, नीचे दिए गए चोरपलेथ मैप में दो अलग-अलग सोर्स का इस्तेमाल किया गया है.
यह मैप, अमेरिका के राज्यों की सीमाओं को दिखाने वाले पॉलीगॉन दिखाने के लिए, GeoJSON फ़ाइल के डेटा का इस्तेमाल करता है. यह हर राज्य के हिसाब से मैप पर डेटा भी दिखा सकता है. यह डेटा, अमेरिका की जनगणना के लिए उपलब्ध एपीआई की सिम्युलेट की गई क्वेरी से मिलता है.
मैप पर पॉलीगॉन अपडेट करने के लिए, कंट्रोल ड्रॉपडाउन मेन्यू से डेटा की कोई कैटगरी चुनें. मैप पर डेटा बॉक्स कंट्रोल में, राज्य के हिसाब से जानकारी देखने के लिए, राज्य के पॉलीगॉन पर कर्सर घुमाया जा सकता है.
नीचे दिए गए सैंपल में, यह पूरा कोड दिखाया गया है जिसकी ज़रूरत आपको यह मैप बनाने के लिए होगी.
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;
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;
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> <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
फ़ाइल में कॉपी करें. यह कोड, Maps JavaScript API को लोड करता है और मैप को फ़ुलस्क्रीन मोड में दिखाता है.
<!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
पर क्लिक करें या एपीआई कुंजी पाने के लिए निर्देशों का पालन करें.
YOUR_API_KEY
को अपने ऐप्लिकेशन की एपीआई कुंजी से बदलें. एपीआई पूरी तरह से लोड होने के बाद, नीचे दिए गए स्क्रिप्ट टैग में मौजूद कॉलबैक पैरामीटर, एचटीएमएल फ़ाइल में initMap()
फ़ंक्शन को लागू करता है.
<script> defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY &callback=initMap" </script>
मैप कंट्रोल बनाना और उसे स्टाइल देना
नीचे दिया गया कोड, मैप पर ये कंट्रोल बनाता है:
- ड्रॉपडाउन मेन्यू वाला एक कंट्रोल, जिसमें डेटा के पांच अलग-अलग विकल्प हैं.
- मैप का लेजेंड.
- किसी राज्य से जुड़ा डेटा दिखाने वाला डेटा बॉक्स. यह किसी पॉलीगॉन पर कर्सर घुमाने पर दिखता है.
<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(); }
डेटा को स्टाइल करना
नीचे दिया गया कोड, डेटासेट में मौजूद हर पॉलीगॉन पर सेंसस डेटा की वैल्यू के आधार पर ग्रेडिएंट लागू करके, choropleth मैप बनाता है. डेटा को स्टाइल करने के लिए, 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
फ़ंक्शन, loadGeoJson
तरीके का इस्तेमाल करके, GeoJSON फ़ाइल से अमेरिका के राज्य की सीमाओं के लिए पॉलीगॉन लोड करता है.
/** 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
को 'राज्य' पर सेट करता है. यह सेंसस डेटा और GeoJSON प्रॉपर्टी, दोनों में एक सामान्य कुंजी है.
ज़्यादा जानकारी
यह डेमो, Census Bureau Data API का इस्तेमाल करता है. हालांकि, इसे Census Bureau ने न तो प्रमाणित किया है और न ही इसका सुझाव दिया है.