إنشاء خريطة توزيعات ذات تظليل مساحي

اختيار النظام الأساسي: 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.
    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

JavaScript

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

CSS

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

<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

تجربة عيّنة