Это базовая карта Google с наложением JSON
Переключатель COLOR просто извлекает цвета из файлов JSON.
Переключатель ДОХОД - это карта хлороплетов, в которой цвет или каждый отдельный многоугольник зависит от диапазона, в который попадает доход.
Я хочу изменить заливку цвета наложения JSON для карты ДОХОД .
У меня есть два переключателя, которые определяют цвета хлороплетов
Первый переключатель подключен к
переменный доходColorArea1
Второй переключатель подключен к
переменный доходColorArea2
У меня также есть два отдельных файла JSON var area1 и var area2
Я хочу, чтобы первый переключатель был связан с var area1 , и я хочу, чтобы второй переключатель был связан с var area2
Я попытался добавить простой оператор if then:
if (area1.checked) {
var incomeColor = incomeColorArea1;
} else if (area2.checked) {
var incomeColor = incomeColorArea2;
}
Не работает.
Единственное, что работает, это вручную изменить:
доходЦвет до доходЦветАреа1 или доходЦветАреа2
в коде ниже:
if (color.checked) {
return {
fillColor: feature.getProperty('COLOR'),
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.4,
strokeOpacity: 1,
zIndex: 0
};
} else if (income.checked) {
return {
fillColor: incomeColor,
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.8,
strokeOpacity: 1,
zIndex: 0
};
}
}
Полный код ниже:
var map;
//COLORS
// Income Map Color
var incomeColor1 = '#f2f0f7';
var incomeColor2 = '#cbc9e2';
var incomeColor3 = '#9e9ac8';
var incomeColor4 = '#756bb1';
var incomeColor5 = '#54278f';
// LEGEND SCORES
// Income Map Score
//Area 1 incomeScore
var incomeScore1 = 20000;
var incomeScore2 = 50000;
var incomeScore3 = 80000;
var incomeScore4 = 110000;
var incomeScore5 = 140000;
//Area 2 incomeScore
var incomeScore6 = 40000;
var incomeScore7 = 60000;
var incomeScore8 = 100000;
var incomeScore9 = 160000;
var incomeScore10 = 500000;
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 40.656963,lng: -112.506664},
gestureHandling: 'greedy',
mapTypeControl: false
});
var area1 = createArea('https://api.myjson.com/bins/t1mhs');
var area2 = createArea('https://api.myjson.com/bins/zle5c');
function changeMap(feature) {
var incomeScore = feature.getProperty('INCOME');
var incomeColorArea1 = ""; // polygon fill color
//Area 1 Income Switch
switch (true) {
case ( incomeScore == 0 || incomeScore === null ): // in case of no value
incomeColor = '#d4d4d4'; break;
case ( incomeScore <= incomeScore1): incomeColorArea1 = incomeColor1; break;
case ( incomeScore <= incomeScore2): incomeColorArea1 = incomeColor2; break;
case ( incomeScore <= incomeScore3): incomeColorArea1 = incomeColor3; break;
case ( incomeScore <= incomeScore4): incomeColorArea1 = incomeColor4; break;
case ( incomeScore <= incomeScore5): incomeColorArea1 = incomeColor5; break;
default: incomeColor = '#d4d4d4'; break;
}
var incomeColorArea2 = ""; // polygon fill color
//Area 2 Income Switch
switch (true) {
case ( incomeScore == 0 || incomeScore === null ): // in case of no value
incomeColor = '#d4d4d4'; break;
case ( incomeScore <= incomeScore6): incomeColorArea2 = incomeColor1; break;
case ( incomeScore <= incomeScore7): incomeColorArea2 = incomeColor2; break;
case ( incomeScore <= incomeScore8): incomeColorArea2 = incomeColor3; break;
case ( incomeScore <= incomeScore9): incomeColorArea2 = incomeColor4; break;
case ( incomeScore <= incomeScore10): incomeColorArea2 = incomeColor5; break;
default: incomeColor = '#d4d4d4'; break;
}
if (area1.checked) {
var incomeColor = incomeColorArea1;
} else if (area2.checked) {
var incomeColor = incomeColorArea2;
}
if (color.checked) {
return {
fillColor: feature.getProperty('COLOR'),
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.4,
strokeOpacity: 1,
zIndex: 0
};
} else if (income.checked) {
return {
fillColor: incomeColor,
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.8,
strokeOpacity: 1,
zIndex: 0
};
}
}
// Infowindow
var infoWindow = new google.maps.InfoWindow({
zIndex: 2
});
map.addListener('click', function() {
area1.revertStyle();
area2.revertStyle();
infoWindow.close();
})
function clickFunc(event) {
this.revertStyle();
this.overrideStyle(event.feature, {
strokeWeight: 2,
strokeColor: 'black',
zIndex: 1
});
}
function mouseFunc(event) {
this.revertStyle();
this.overrideStyle(event.feature, {
strokeWeight: 2,
strokeColor: 'black',
zIndex: 1
});
}
function createArea(url) {
var area = new google.maps.Data();
area.loadGeoJson(url);
area.setStyle(changeMap);
area.addListener('click', clickFunc);
area.addListener('mouseover', mouseFunc);
return area;
}
setArea();
function setArea() {
infoWindow.close();
area1.setMap(document.getElementById('area1').checked ? map : null);
area2.setMap(document.getElementById('area2').checked ? map : null);
}
google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('color'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('income'), 'click', setArea);
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="content">
<form class="form"">
<div class="switch-field">
<input type="radio" id="area1" name="switch-two" checked/>
<label for="area1">Area 1</label>
<input type="radio" id="area2" name="switch-two"/>
<label for="area2">Area 2</label>
</div>
<label class="container" style="margin-top: 12px;">COLOR
<input type="radio" checked="checked" name="radio" id="color">
<span class="checkmark"></span>
</label>
</br>
<label class="container">INCOME
<input type="radio" name="radio" id="income">
<span class="checkmark"></span>
</label>
</form>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>