Changing data to be visualized in jvector Map - jvectormap

Question

I have two types of maps of Nepal (districts map of Nepal and ecological map of Nepal). I have two data sets for each of the above type. I am trying to create a visualization where users can first choose what type of map they want and then later what data they want to be visualized. (using dropdowns).
These are the codes for dropdowns.
<select id="changeMap">
<option>Change Map</option>
<option value="ecoMap">Ecological Region</option>
<option value="world_mill_en">Districts</option>
</select>
<select id="changedata">
<option>Change Data</option>
<option value="Caste 1">CASTE 1</option>
<option value="Caste 2">CASTE 2</option>
</select>
This is the jvector Map function.
<div id="container"></div>
<script>
var vmap = '<div id="vmap" style="width: 600px; height: 400px;"></div>';
$('#changeMap').on('change', function () {
var _map = $(this).val();
$('#vmap').remove();
$('#container').append(vmap);
$('#vmap').vectorMap({
map: _map,
backgroundColor: '#000000',
enableZoom: true,
regionsSelectable : false,
series: {
regions: [{
values: data,
scale: ['#fffad6', '#d05300'],
normalizeFunction: 'polynomial'
}]
}});
});
</script>
Now, how do I make this drop- drop down combination work to visualize?
Thanks!

Answer 1

I guess u want a complete dynamic implementation of the map. I used the same for creating Australia's map with dynamic regions plotted on it on the fly.
Initially create the jvectormap object with path attribute left empty as shown below:
var auJSON = {
"insets": [
{
"width": 900.0,
"top": 0,
"height": 850.8001894248416,
"bbox": [
{
"y": 1125139.6460741498,
"x": 12575140.762771795
},
{
"y": 5412845.645305354,
"x": 17110794.900221862
}],
"left": 0
}
],
"paths": {
},
"height": 850.8001894248416,
"projection":
{
"type": "merc",
"centralMeridian": 0.0
},
"width": 900.0
};
Now, on click on any of the option you have to insert the objects in the path attribute dynamically and finally render the map. I created an array of objects below.
d3.select("#regionSVG").selectAll("path")
.each(function () {
var obj = {
"path": $(this).attr("d"),
"name": $(this).attr("name"),
"id": this.id
}
that.regionPathArray.push(obj);
});
Now i passed on this array to fill in the empty path attribute as below.
initRegionLoading(that.regionPathArray);
function initRegionLoading(arr) {
var initialJSON = auJSON;
for (var i = 0; i < arr.length; i++) {
initialJSON.paths[arr[i].name] = arr[i];
}
$.fn.vectorMap('addMap', 'au_reg_en', initialJSON);
}
And then i displayed the map.
this.ausie_map = new jvm.WorldMap({
map: 'au_reg_en',
container: $('#auMap_' + that.zoomLevel),
});
That solves my problem. Hope it does yours too.