If i first draw a map and then add more metadata to display an additional value of the data, the newly configured colors for the new metadata are not taken for the display. They fall back to the default colors. And it is the same with number formating and the definition of a domain.
Here is a simplified example:
The html code:
Change displayed value:
<select id="menu_farbgebung" onchange="changeMap(this.value)"></select>
<div class="map-wrapper"> <svg width="800" height="400"></svg> </div>
The javascript code:
var select = document.getElementById("menu_farbgebung");
select.innerHTML = '';
var el = document.createElement("option");
el.textContent = 'population';
el.value = 'population';
select.appendChild(el);
var e2 = document.createElement("option");
e2.textContent = 'pop_density';
e2.value = 'pop_density';
select.appendChild(e2);
var map = mapmap(mapEl())
.geometry('data/austria.topojson', 'iso')
.data('data/places-AT.csv', 'code')
.meta({
population: {
label: "District Population",
domain: [100000,200000,500000],
color: colorbrewer.YlOrRd[5]
}
})
.select('districts')
.choropleth('population')
.legend(mapmap.legend.html())
.hoverInfo(['name','population'])
;
function changeMap(value){
map.meta({
value:{
label: "Density of Population",
scale: 'threshold',
color: colorbrewer.YlOrRd[5]
}
})
.choropleth(value);
}
If i first draw a map and then add more metadata to display an additional value of the data, the newly configured colors for the new metadata are not taken for the display. They fall back to the default colors. And it is the same with number formating and the definition of a domain.
Here is a simplified example:
The html code:
The javascript code: