Bing Maps - Can't set a custom map style - maps

Question

I'm trying to use a custom style on my map, but no matter what I do, I can't them them working. My initialize function is:
this.init = (mapSelector, api, title = '', poi = false, prefix = '', cache = true) => {
return new Promise((r, j) => {
if (api.slice(-1) !== '/')
this.setPrefix(prefix);
this.setCache(cache);
this.setPOI(poi);
this.setTitle(title);
try {
getMapKey().then(key => {
if(mapSelector) {
_map = new Microsoft.Maps.Map(mapSelector, {
credentials: key,
center: new Microsoft.Maps.Location(_latitude, _longitude),
zoom: 13,
disableBirdseye: true,
disableStreetside: true,
showDashboard: false,
customMapStyle: JSON.parse(sampleStyle),
});
} else {
j('error');
}
});
} catch (error) {
console.log(error);
}
});
};
It currently renders the standard map just fine. but no matter what I pass into customMapStyle nothing works, JSON.parse was added to make sure the data was in JSON format, because I'm running out of ideas.. I've copied the JSON from the examples on:
https://bingmapsv8samples.azurewebsites.net/#Set%20Custom%20Map%20Style
Some of the styles I've tried to use are:
const darkMode = {
"version": "1.0",
"settings": {
"landColor": "#0B334D"
},
"elements": {
"mapElement": {
"labelColor": "#FFFFFF",
"labelOutlineColor": "#000000"
},
"political": {
"borderStrokeColor": "#144B53",
"borderOutlineColor": "#00000000"
},
"point": {
"iconColor": "#0C4152",
"fillColor": "#000000",
"strokeColor": "#0C4152"
},
"transportation": {
"strokeColor": "#000000",
"fillColor": "#000000"
},
"highway": {
"strokeColor": "#158399",
"fillColor": "#000000"
},
"controlledAccessHighway": {
"strokeColor": "#158399",
"fillColor": "#000000"
},
"arterialRoad": {
"strokeColor": "#157399",
"fillColor": "#000000"
},
"majorRoad": {
"strokeColor": "#157399",
"fillColor": "#000000"
},
"railway": {
"strokeColor": "#146474",
"fillColor": "#000000"
},
"structure": {
"fillColor": "#115166"
},
"water": {
"fillColor": "#021019"
},
"area": {
"fillColor": "#115166"
}
}
};
const sampleStyle = {
"elements": {
"park": { "fillColor": "#A9A9D4BE" },
"controlledAccessHighway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
"highway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
"water": { "fillColor": "#B7CDDE" },
"medicalBuilding": { "fillColor": "#fceced" },
"majorRoad": { "fillColor": "#f0d85a" },
"education": { "fillColor": "#f0e8f8" },
"arterialRoad": { "fillColor": "#ffed91" },
"structure": { "fillColor": "#faf8ed" },
"buildinglobal": { "fillColor": "#e5e0d8" },
"forest": { "fillColor": "#deebdd" },
"vegetation": { "fillColor": "#deebdd" },
"reserve": { "fillColor": "#deebdd" },
"street": { "fillColor": "#ffffff", "strokeColor": "#e6e3df" },
"roadShield": { "fillColor": "#ffffff" },
"medical": { "fillColor": "#ffddee" },
"educationBuildinglobal": { "fillColor": "#f6f0f1" },
"golfCourse": { "fillColor": "#c5dabb" }
},
"settings": { "landColor": "#F6F4E3" }
};
Does anyone know how to get a custom style activated? If that's not possible, is there a dark mode that I can activate, which is what I'm trying to do.
Thanks

Answer 1

I would suggest taking a look at the map style sheet editor app - it will allow you to interactively adjust the style and shows sample code for how to initialize that style in all of the Bing maps controls (HTML, UWP and Static maps).
https://www.microsoft.com/en-us/p/map-style-sheet-editor/9nbhtcjt72ft

Answer 2

I had to set setOption, it had nothing to do with the map style I was trying to apply.