একটি choropleth মানচিত্র তৈরি করুন

প্ল্যাটফর্ম নির্বাচন করুন: iOS জাভাস্ক্রিপ্ট

একটি choropleth মানচিত্র হল এক ধরনের থিম্যাটিক মানচিত্র যেখানে প্রশাসনিক অঞ্চলগুলি একটি ডেটা মান অনুসারে রঙিন বা ছায়াযুক্ত হয়। আপনি একটি google.maps.FeatureStyleFunction ব্যবহার করতে পারেন একটি ডেটাসেটের উপর ভিত্তি করে একটি মানচিত্রের স্টাইল করতে যেখানে প্রতিটি প্রশাসনিক এলাকা বিভিন্ন সংখ্যার মানগুলির সাথে যুক্ত থাকে৷ নিম্নলিখিত উদাহরণ মানচিত্র মার্কিন যুক্তরাষ্ট্রের জন্য রাজ্যের জনসংখ্যার তথ্য চিত্রিত করে একটি কোরোপ্লেথ মানচিত্র দেখায়।

এই উদাহরণে, ডেটাতে একটি সাংখ্যিক জনসংখ্যা মানের সাথে প্রতিটি রাজ্যের প্রদর্শন নামের সাথে মিল রেখে কী-মানের জোড়ার একটি অ্যারে রয়েছে। maps.FeatureStyleFunction শর্তসাপেক্ষে অ্যারের মানগুলির উপর ভিত্তি করে প্রতিটি অঞ্চলকে রঙ করে৷

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

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

সম্পূর্ণ উদাহরণ কোড

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

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,
    "ChIJG8CuwJzfAFQRNduKqSde27w": 732673,
    "ChIJaxhMy-sIK4cRcc3Bf7EnOUI": 7276316,
    "ChIJYSc_dD-e0ocR0NLf_z5pBaQ": 3025891,
    "ChIJPV4oX_65j4ARVW8IJ6IJUYs": 39237836,
    "ChIJt1YYm3QUQIcR_6eQSTGDVMc": 5812069,
    "ChIJpVER8hFT5okR5XBhBVttmq4": 3605597,
    "ChIJO9YMTXYFx4kReOgEjBItHZQ": 1003384,
    "ChIJvypWkWV2wYgR0E7HW9MTLvc": 21781128,
    "ChIJV4FfHcU28YgR5xBP7BC8hGY": 10799566,
    "ChIJBeB5Twbb_3sRKIbMdNKCd0s": 1441553,
    "ChIJ6Znkhaj_WFMRWIf3FQUwa9A": 1900923,
    "ChIJGSZubzgtC4gRVlkRZFCCFX8": 12671469,
    "ChIJHRv42bxQa4gRcuwyy84vEH4": 6805985,
    "ChIJGWD48W9e7ocR2VnHV0pj78Y": 3193079,
    "ChIJawF8cXEXo4cRXwk-S6m0wmg": 2934582,
    "ChIJyVMZi0xzQogR_N_MxU5vH3c": 4509394,
    "ChIJZYIRslSkIIYRA0flgTL3Vck": 4624047,
    "ChIJ1YpTHd4dsEwR0KggZ2_MedY": 1372247,
    "ChIJ35Dx6etNtokRsfZVdmU3r_I": 6165129,
    "ChIJ_b9z6W1l44kRHA2DVTbQxkU": 6984723,
    "ChIJEQTKxz2qTE0Rs8liellI3Zc": 10050811,
    "ChIJmwt4YJpbWE0RD6L-EJvJogI": 5707390,
    "ChIJGdRK5OQyKIYR2qbc6X8XDWI": 2949965,
    "ChIJfeMiSNXmwIcRcr1mBFnEW7U": 6168187,
    "ChIJ04p7LZwrQVMRGGwqz1jWcfU": 1104271,
    "ChIJ7fwMtciNk4cRxArzDwyQJ6E": 1963692,
    "ChIJcbTe-KEKmYARs5X8qooDR88": 3143991,
    "ChIJ66bAnUtEs0wR64CmJa8CyNc": 1388992,
    "ChIJn0AAnpX7wIkRjW0_-Ad70iw": 9267130,
    "ChIJqVKY50NQGIcRup41Yxpuv0Y": 2115877,
    "ChIJqaUj8fBLzEwRZ5UY3sHGz90": 19835913,
    "ChIJgRo4_MQfVIgRGa4i6fUwP60": 10551162,
    "ChIJY-nYVxKD11IRyc9egzmahA0": 774948,
    "ChIJwY5NtXrpNogRFtmfnDlkzeU": 11780017,
    "ChIJnU-ssRE5rIcRSOoKQDPPHF0": 3986639,
    "ChIJVWqfm3xuk1QRdrgLettlTH0": 4246155,
    "ChIJieUyHiaALYgRPbQiUEchRsI": 12964056,
    "ChIJD9cOYhQ15IkR5wbB57wYTh4": 1095610,
    "ChIJ49ExeWml-IgRnhcF9TKh_7k": 5190705,
    "ChIJpTjphS1DfYcRt6SGMSnW8Ac": 895376,
    "ChIJA8-XniNLYYgRVpGBpcEgPgM": 6975218,
    "ChIJSTKCCzZwQIYRPN4IGI8c6xY": 29527941,
    "ChIJzfkTj8drTIcRP0bXbKVK370": 3337975,
    "ChIJ_87aSGzctEwRtGtUNnSJTSY": 645570,
    "ChIJzbK8vXDWTIgRlaZGt0lBTsA": 8642274,
    "ChIJ-bDD5__lhVQRuvNfbGh4QpQ": 7738692,
    "ChIJRQnL1KVUSogRQzrN3mjHALs": 1782959,
    "ChIJr-OEkw_0qFIR1kmG-LjV1fI": 5895908,
    "ChIJaS7hSDTiXocRLzh90nkisCY": 578803, // Wyoming
  };
}

initMap();
index.js

সিএসএস

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

style.css

এইচটিএমএল

<html>
  <head>
    <title>Choropleth Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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>
index.html

নমুনা চেষ্টা করুন