Custom Bing Map Type Issue - bing-maps

Question

I'm having a problem trying to correct for this. I have created 2 custom Bing map types. The user can change the map type through a custom drop box. When the user changes from Default to Road. A majority of the time if the user changes back to Default, the roads stay. Am I missing something so obvious. I've included my code.
Map Types
var defaultMapColors =
{
"version": "1.0",
"settings":
{
"landColor": "#686868"
},
"elements":
{
"mapElement": { "labelVisible": false },
"area": { "visible": false },
"transportation": { "visible": false },
"countryRegion": { //country
"borderStrokeColor": "#444444",
"borderOutlineColor": "#00000000",
"borderWidthScale": 3,
"fillColor": "#888888",
"visible": true
},
"adminDistrict": { //states
"borderVisible": true,
"borderStrokeColor": "#444444",
"borderOutlineColor": "#00000000",
"borderWidthScale": 3,
"fillColor": "#888888",
},
"water": { "fillColor": "#4E5E6D" },
"point": { "visible": false }
}
};
var defaultMapColorsWithRoads =
{
"version": "1.0",
"settings":
{
"landColor": "#686868"
},
"elements":
{
"mapElement": { "labelVisible": false },
"area": { "visible": false },
"transportation": {
"visible": true,
"strokeColor": "#ffffff",
},
"countryRegion": { //country
"borderStrokeColor": "#444444",
"borderOutlineColor": "#00000000",
"borderWidthScale": 3,
"fillColor": "#888888",
"visible": true
},
"adminDistrict": { //states
"borderVisible": true,
"borderStrokeColor": "#444444",
"borderOutlineColor": "#00000000",
"borderWidthScale": 3,
"fillColor": "#888888",
},
"water": { "fillColor": "#4E5E6D" },
"point": { "visible": false }
}
};
Drop Down
<div class="form-group">
<select id="customNavSelector" class="form-control selectpicker show-tick">
<option value="Default" onclick="map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.road, customMapStyle: defaultMapColors });">Default</option>
<option value="Road" onclick="map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.road, customMapStyle: defaultMapColorsWithRoads });">Road</option>
<option value="Aerial" onclick="map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.aerial, customMapStyle: '' });">Aerial</option>
</select>
</div>
Map Object
map = new Microsoft.Maps.Map(mapDiv,
{
credentials: "#ViewBag.BingMapKey",
center: new Microsoft.Maps.Location(#ConfigurationManager.AppSettings["CenterLatitude"], #ConfigurationManager.AppSettings["CenterLongitude"]),
customMapStyle: defaultMapColors,
mapTypeId: Microsoft.Maps.MapTypeId.road, //grayscale, aerial, road, canvasLight, canvasDark
//liteMode: true,
showMapTypeSelector: false, //set to true to show default bing map selector
disableStreetside: false,
disableStreetsideAutoCoverage: true,
zoom: zoom,
backgroundColor: 'black',
//showBreadcrumb: true,
//showLocateMeButton: locator,
enableInertia: false,
enableClickableLogo: false,
navigationBarMode: Microsoft.Maps.NavigationBarMode.compact //compact, default, minified
});

Answer 1

There is a known issue where setting the map style merges the new style with the old style instead of overwriting it completely. The team plans to fix this. In the mean time, if you dispose the current map and create a new instance of the map with the map style it will work as expected.