I'm having a problem getting the setStyle function in a Google Maps data component to work. In the below code, I am loading a GEOJSON into the map which load successfully.
Once the map has the GEOJSON data (US Counties), I determine a list of identifiers (ZIP CODES) that gets used as data while calling into an API, returning a JSON response.
Both the GEOJSON and the API return contain identical identifiers (Think SQL JOIN) and they should match to determine the color of the polygon (HTML Color code element in the API return).
The intent is for each polygon in the GEOJSON is going to be colored by the color returned from the API call.
The problem is the setStyle function. It appears that the javascript does NOT go into the setStyle function to evaluate the matching. The Control panel ignores the inside of the function, and moves along, causing all polygons to remain black.
How do I get the two to match so the color is effective?
Here's my code:
// initializer
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 49.496675, lng: -102.65625 },
});
let states = new google.maps.Data({map:map});
let counties = new google.maps.Data({map:map});
let zips = new google.maps.Data({map:map});
//code
zips.loadGeoJson('data/zip_codes/GEOID_' + GEOID + '.json', {}, function (features) {
zips.forEach(function (feature) {
ziplist.push(feature.getProperty('ZCTA5CE20'));
});
$.get("data/API/zipcolor.cfm?Zip=" + ziplist.toString(), function (data) {
zips.setStyle(function (feature) {
for (let i = 0; i < data.length; i++) {
var color = 'black';
if (feature.getProperty('ZCTA5CE20') === data[i]['ZIPCODE']) {
color = data[i]['COLOR'];
}
}
return {
fillColor: color
}
});
zips.setStyle({
zIndex: 4,
});
});
UPDATE #1. added example data from solution.
example of the GEOJSON (of note, ZCTA5CE20 is the field that contains the five-digit zip code):
{
"type": "FeatureCollection",
"name": "GEOID_01025",
"features": [
{ "type": "Feature", "properties": { "ZCTA5CE20": "36585", "GEOID20": "36585", "CLASSFP20": "B5", "MTFCC20": "G6350", "FUNCSTAT20": "S", "ALAND20": 353436569, "AWATER20": 10517597, "INTPTLAT20": "+31.4235226", "INTPTLON20": "-088.0844556", "STATEFP": "01", "COUNTYFP": "025", "COUNTYNS": "00161538", "NAME": "Clarke", "GEOID": "01025" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -87.935193, 31.440375 ], [ -87.935366, 31.441182 ], [ -87.935366, 31.441182 ], [ -87.935193, 31.440375 ] ] ], [ [ [ -87.933669, 31.43795 ], [ -87.932417, 31.437299 ], [ -87.933669, 31.43795 ], [ -87.934359, 31.438599 ], [ -87.933669, 31.43795 ] ] ], [ [ [ -87.927014, 31.436329 ], [ -87.925242, 31.436352 ], [ -87.927014, 31.436329 ], [ -87.928761334129746, 31.436412166384059 ], [ -87.927014, 31.436329 ] ] ], [ [ [ -87.923066, 31.436486 ], [ -87.921979, 31.436537 ], [ -87.921398308179334, 31.436272749512071 ], [ -87.921979, 31.436537 ], [ -87.923066, 31.436486 ], [ -87.925242, 31.436352 ], [ -87.923066, 31.436486 ] ] ], [ [ [ -87.915043, 31.428419 ], [ -87.913823, 31.42718 ], [ -87.915043, 31.428419 ], [ -87.916281, 31.429852 ], [ -87.915043, 31.428419 ] ] ], [ [ [ -87.923948, 31.404551 ], [ -87.92272, 31.404673 ], [ -87.923948, 31.404551 ], [ -87.925035, 31.404508 ], [ -87.923948, 31.404551 ] ] ], [ [ [ -87.921461, 31.405142 ], [ -87.920538, 31.405871 ], [ -87.919736, 31.406946 ], [ -87.918681, 31.407763 ], [ -87.917412, 31.408296 ], [ -87.918681, 31.407763 ], [ -87.919736, 31.406946 ], [ -87.920538, 31.405871 ], [ -87.921461, 31.405142 ], [ -87.92272, 31.404673 ], [ -87.921461, 31.405142 ] ] ], [ [ [ -87.907342, 31.406068 ], [ -87.905869, 31.40473 ], [ -87.905081, 31.403372 ], [ -87.905045551204381, 31.4032321113074 ], [ -87.905081, 31.403372 ], [ -87.905869, 31.40473 ], [ -87.907342, 31.406068 ], [ -87.908735, 31.406599 ], [ -87.907342, 31.406068 ] ] ], [ [ [ -87.915298, 31.394758 ], [ -87.915651291675289, 31.394784676653089 ], [ -87.915298, 31.394758 ], [ -87.914736339039564, 31.39466841468731 ], [ -87.915298, 31.394758 ] ] ], [ [ [ -87.922458, 31.395767 ], [ -87.922458, 31.395767 ], [ -87.921889867455278, 31.39563403280868 ], [ -87.922458, 31.395767 ] ] ], [ [ [ -87.945652, 31.37629 ], [ -87.945550571655289, 31.376191856783862 ], [ -87.945652, 31.37629 ], [ -87.945956, 31.377178 ], [ -87.945956, 31.377178 ], [ -87.945652, 31.37629 ] ] ], [ [ [ -87.939925, 31.375167 ], [ -87.935991, 31.376701 ], [ -87.934375, 31.377466 ], [ -87.935991, 31.376701 ], [ -87.939925, 31.375167 ], [ -87.940412, 31.374861 ], [ -87.939925, 31.375167 ] ] ], [ [ [ -87.93213, 31.378551 ], [ -87.931106, 31.379029 ], [ -87.93213, 31.378551 ], [ -87.932901, 31.377982 ], [ -87.93213, 31.378551 ] ] ], [ [ [ -87.929154, 31.379639 ], [ -87.927907, 31.379794 ], [ -87.927082, 31.379838 ], [ -87.927907, 31.379794 ], [ -87.929154, 31.379639 ], [ -87.93011, 31.379419 ], [ -87.929154, 31.379639 ] ] ], [ [ [ -87.918497, 31.375547 ], [ -87.917821, 31.375705 ], [ -87.917388, 31.376057 ], [ -87.917821, 31.375705 ], [ -87.918497, 31.375547 ], [ -87.919219, 31.375479 ], [ -87.918497, 31.375547 ] ] ], [ [ [ -87.917291, 31.376734 ], [ -87.917595529378346, 31.377609866973401 ], [ -87.917291, 31.376734 ], [ -87.917388, 31.376057 ], [ -87.917291, 31.376734 ] ] ], [ [ [ -87.920151, 31.382518 ], [ -87.920968871138982, 31.384150243363997 ], [ -87.920151, 31.382518 ], [ -87.918179, 31.378624 ], [ -87.920151, 31.382518 ] ] ], [ [ [ -87.921181, 31.387318 ], [ -87.920793, 31.388025 ], [ -87.920085, 31.388996 ], [ -87.920793, 31.388025 ], [ -87.921181, 31.387318 ], [ -87.921402, 31.386473 ], [ -87.921181, 31.387318 ] ] ], [ [ [ -87.917653, 31.389797 ], [ -87.916547, 31.389945 ], [ -87.915741, 31.389997 ], [ -87.914831, 31.390202 ], [ -87.91393, 31.39039 ], [ -87.914831, 31.390202 ], [ -87.915741, 31.389997 ], [ -87.916547, 31.389945 ], [ -87.917653, 31.389797 ], [ -87.918638, 31.389633 ], [ -87.917653, 31.389797 ] ] ], [ [ [ -87.913263, 31.39074 ], [ -87.912147, 31.390855 ], [ -87.91076, 31.390945 ], [ -87.912147, 31.390855 ], [ -87.913263, 31.39074 ], [ -87.91393, 31.39039 ], [ -87.913263, 31.39074 ] ] ], [ [ [ -87.908056, 31.390197 ], [ -87.906972, 31.38983 ], [ -87.908056, 31.390197 ], [ -87.908443209596172, 31.39034344720595 ], [ -87.908056, 31.390197 ] ] ], [ [ [ -87.904263, 31.388646 ], [ -87.904035189696444, 31.388553202480686 ], [ -87.904263, 31.388646 ], [ -87.905309, 31.389072 ], [ -87.904263, 31.388646 ] ] ], [ [ [ -87.898003, 31.38108 ], [ -87.896785, 31.381245 ], [ -87.898003, 31.38108 ], [ -87.898588674627788, 31.381998752171214 ], [ -87.898003, 31.38108 ] ] ], [ [ [ -87.895612, 31.381357 ], [ -87.894137, 31.38205 ], [ -87.895612, 31.381357 ], [ -87.896785, 31.381245 ], [ -87.895612, 31.381357 ] ] ], [ [ [ -87.893179, 31.382448 ], [ -87.892314, 31.382878 ], [ -87.891438, 31.383607 ], [ -87.890693, 31.384409 ], [ -87.890192, 31.385212 ], [ -87.890693, 31.384409 ], [ -87.891438, 31.383607 ], [ -87.892314, 31.382878 ], [ -87.893179, 31.382448 ], [ -87.894137, 31.38205 ], [ -87.893179, 31.382448 ] ] ], [ [ [ -87.889812, 31.385983 ], [ -87.889516, 31.386957 ], [ -87.889812, 31.385983 ], [ -87.890192, 31.385212 ], [ -87.889812, 31.385983 ] ] ], [ [ [ -87.889453, 31.387931 ], [ -87.88973779828757, 31.38910980085916 ], [ -87.889453, 31.387931 ], [ -87.889516, 31.386957 ], [ -87.889453, 31.387931 ] ] ], [ [ [ -87.893398, 31.393915 ], [ -87.893637, 31.394617 ], [ -87.893398, 31.393915 ], [ -87.892878, 31.393106 ], [ -87.893398, 31.393915 ] ] ], [ [ [ -87.892401, 31.395988 ], [ -87.89181, 31.396082 ], [ -87.89181, 31.396082 ], [ -87.892401, 31.395988 ], [ -87.893031, 31.395629 ], [ -87.892401, 31.395988 ] ] ], [ [ [ -87.891117, 31.39607 ], [ -87.889854, 31.395741 ], [ -87.889645314312077, 31.395664671382626 ], [ -87.889854, 31.395741 ], [ -87.891117, 31.39607 ], [ -87.891765109205068, 31.396081222670219 ], [ -87.891117, 31.39607 ] ] ], [ [ [ -87.888761, 31.395316 ], [ -87.888739016346022, 31.395291749989937 ], [ -87.888761, 31.395316 ], [ -87.888980542561598, 31.395405864571845 ], [ -87.888761, 31.395316 ] ] ], [ [ [ -87.88793, 31.394673 ], [ -87.887654, 31.393892 ], [ -87.887633452885765, 31.393832250023447 ], [ -87.887654, 31.393892 ], [ -87.88793, 31.394673 ], [ -87.888182, 31.394982 ], [ -87.88793, 31.394673 ] ] ], [ [ [ -87.890733, 31.367816 ], [ -87.890652425022154, 31.367659643456602 ], [ -87.890733, 31.367816 ], [ -87.891618, 31.369711 ], [ -87.890733, 31.367816 ] ] ], [ [ [ -87.906004, 31.327998 ], [ -87.906001633642489, 31.327968090792798 ], [ -87.906004, 31.327998 ], [ -87.906087, 31.329628 ], [ -87.906004, 31.327998 ] ] ], [ [ [ -87.915952, 31.324065 ], [ -87.916603527239431, 31.325188499727833 ], [ -87.915952, 31.324065 ], [ -87.914355, 31.322881 ], [ -87.915952, 31.324065 ] ] ], [ [ [ -87.91682, 31.328202 ], [ -87.915854, 31.329081 ], [ -87.91682, 31.328202 ], [ -87.917079, 31.326922 ], [ -87.91682, 31.328202 ] ] ], [ [ [ -87.914338, 31.329744 ], [ -87.913104, 31.330289 ], [ -87.911383, 31.331685 ], [ -87.913104, 31.330289 ], [ -87.914338, 31.329744 ], [ -87.915854, 31.329081 ], [ -87.914338, 31.329744 ] ] ], [ [ [ -87.910487, 31.332976 ], [ -87.910117, 31.334061 ], [ -87.910487, 31.332976 ], [ -87.911383, 31.331685 ], [ -87.910487, 31.332976 ] ] ], [ [ [ -87.911449, 31.337074 ], [ -87.912495, 31.338124 ], [ -87.914326, 31.339319 ], [ -87.912495, 31.338124 ], [ -87.911449, 31.337074 ], [ -87.91054, 31.335565 ], [ -87.911449, 31.337074 ] ] ], [ [ [ -87.923226, 31.334568 ], [ -87.923214616326874, 31.334508498784189 ], [ -87.923226, 31.334568 ], [ -87.923232, 31.335706 ], [ -87.923226, 31.334568 ] ] ], [ [ [ -87.935894, 31.310655 ], [ -87.936941, 31.311576 ], [ -87.938214258607019, 31.312932684584453 ], [ -87.936941, 31.311576 ], [ -87.935894, 31.310655 ], [ -87.93495741964712, 31.310085752230524 ], [ -87.935894, 31.310655 ] ] ], [ [ [ -87.940211, 31.314638 ], [ -87.941518992671675, 31.31494307389703 ], [ -87.940211, 31.314638 ], [ -87.93956, 31.314269 ], [ -87.940211, 31.314638 ] ] ], [ [ [ -87.960757, 31.304431 ], [ -87.959702, 31.303373 ], [ -87.958421, 31.30237 ], [ -87.959702, 31.303373 ], [ -87.960757, 31.304431 ], [ -87.961874, 31.305804 ], [ -87.960757, 31.304431 ] ] ], [ [ [ -87.95415, 31.300017 ], [ -87.952935, 31.299789 ], [ -87.951813, 31.299633 ], [ -87.952935, 31.299789 ], [ -87.95415, 31.300017 ], [ -87.954942, 31.300347 ], [ -87.95415, 31.300017 ] ] ], [ [ [ -87.949862, 31.299164 ], [ -87.949119, 31.298569 ], [ -87.948307, 31.297537 ], [ -87.949119, 31.298569 ], [ -87.949862, 31.299164 ], [ -87.950795, 31.299463 ], [ -87.949862, 31.299164 ] ] ], [ [ [ -87.946947, 31.293742 ], [ -87.946947, 31.293742 ], [ -87.947176, 31.29497 ], [ -87.946947, 31.293742 ] ] ], [ [ [ -87.957383, 31.279647 ], [ -87.956892, 31.278409 ], [ -87.957383, 31.279647 ], [ -87.957384362872276, 31.279666659432653 ], [ -87.957383, 31.279647 ] ] ], [ [ [ -87.954653, 31.274436 ], [ -87.953622, 31.272967 ], [ -87.953552774136369, 31.272839806458187 ], [ -87.953622, 31.272967 ], [ -87.954653, 31.274436 ], [ -87.955685, 31.275881 ], [ -87.954653, 31.274436 ] ] ], [ [ [ -87.952851, 31.27079 ], [ -87.952851, 31.27079 ], [ -87.952859005367358, 31.270836248624931 ], [ -87.952851, 31.27079 ] ] ], [ [ [ -87.959692, 31.267802 ], [ -87.961336, 31.268938 ], [ -87.959692, 31.267802 ], [ -87.959007236306121, 31.267567190827947 ], [ -87.959692, 31.267802 ] ] ], [ [ [ -87.966344, 31.271402 ], [ -87.967439, 31.271444 ], [ -87.966344, 31.271402 ], [ -87.96578231852726, 31.271258419857553 ], [ -87.966344, 31.271402 ] ] ], [ [ [ -87.982901, 31.255196 ], [ -87.981963, 31.255373 ], [ -87.982901, 31.255196 ], [ -87.983902, 31.255229 ], [ -87.982901, 31.255196 ] ] ], [ [ [ -87.980657, 31.255838 ], [ -87.979423, 31.256521 ], [ -87.980657, 31.255838 ], [ -87.981963, 31.255373 ], [ -87.980657, 31.255838 ] ] ], [ [ [ -87.976768, 31.258651 ], [ -87.975713, 31.259207 ], [ -87.976768, 31.258651 ], [ -87.977834, 31.257959 ], [ -87.976768, 31.258651 ] ] ], [ [ [ -87.971759, 31.259616 ], [ -87.971759, 31.259616 ], [ -87.972362001046235, 31.259688318503386 ], [ -87.971759, 31.259616 ] ] ], [ [ [ -87.95152, 31.24724 ], [ -87.947499, 31.246565 ], [ -87.946013, 31.245733 ], [ -87.944034, 31.244291 ], [ -87.943105, 31.243329 ], [ -87.944034, 31.244291 ], [ -87.946013, 31.245733 ], [ -87.947499, 31.246565 ], [ -87.95152, 31.24724 ], [ -87.957408, 31.247805 ], [ -87.95152, 31.24724 ] ] ], [ [ [ -87.941952, 31.241312 ], [ -87.941163, 31.239087 ], [ -87.94091, 31.238699 ], [ -87.941163, 31.239087 ], [ -87.941952, 31.241312 ], [ -87.943105, 31.243329 ], [ -87.941952, 31.241312 ] ] ] ] } }]}
example of the API return:
[{"ZIPCODE":"36585","COLOR":"#3DE170"}]
from Google Maps Javascript API not setting style using function(feature) element
No comments:
Post a Comment