یک نقشه choropleth بسازید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

نقشه کروپلت نوعی نقشه موضوعی است که در آن مناطق اداری بر اساس یک مقدار داده رنگ‌آمیزی یا سایه‌گذاری می‌شوند. می‌توانید از 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, // 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. 
 */
#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>
  </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

نمونه را امتحان کنید