कोरोप्लेथ मैप बनाना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

कोरोप्लेथ मैप, एक तरह का थीमैटिक मैप होता है. इसमें प्रशासनिक इलाकों को डेटा वैल्यू के हिसाब से रंग या शेड किया जाता है. google.maps.FeatureStyleFunction का इस्तेमाल करके, किसी ऐसे डेटासेट के आधार पर मैप को स्टाइल किया जा सकता है जिसमें हर प्रशासनिक इलाके को संख्यात्मक वैल्यू की एक रेंज से जोड़ा गया हो. इस उदाहरण में, अमेरिका के राज्यों की जनसंख्या का डेटा दिखाने वाला कोरोप्लेथ मैप दिखाया गया है.

इस उदाहरण में, डेटा में की-वैल्यू पेयर का एक कलेक्शन शामिल है. इसमें हर राज्य के डिसप्ले नेम को जनसंख्या की संख्या वाली वैल्यू से मैच किया गया है. maps.FeatureStyleFunction, ऐरे में मौजूद वैल्यू के आधार पर हर क्षेत्र में रंग भरता है.

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,
    };
};
index.ts

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,
    };
};
index.js

के बाहर रैंडम हिस्से करने होंगे.

कोड का पूरा उदाहरण

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();
index.ts

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();
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<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"});</script>
  </head>
  <body>
    <gmp-map center="40.76,-101.64" zoom="5" map-id="8b37d7206ccf01219cd548d3">
  </body>
</html>
index.html

सैंपल आज़माएं