How to add layer over full map in apple mapkit JS - mapkit-js

Question

I am trying to customize my apple map on web (Mapkit JS). I know you can set the maps colorScheme (Light or Dark). But is there a better way to customize it with more colors?

Answer 1

Yes, you can use a PolygonOverlay and set a custom color to it. Your map will then appear in your desired color.
// init mapkit
mapkit.init({...});
// init map
const map = new mapkit.Map("mapId", {
colorScheme: mapkit.Map.ColorSchemes.Light, // mapkit.Map.ColorSchemes.Dark
});
// polygon points
const points = [
[89.9,90],
[89.9,0.1],
[89.9,-90],
[89.9,-179.999],
[0,-179.999],
[-89.9,-179.999],
[-89.9,-90],
[-89.9,0.1],
[-89.9,90],
[-89.9,179.999],
[0,179.999],
[89.9,179.999]
];
// Map the coordinate points to Coordinates:
const coordinates = points.map((point) => new mapkit.Coordinate(point[0], point[1]));
const polygon = new mapkit.PolygonOverlay(coordinates, {
style: new mapkit.Style({
lineWidth: 0,
strokeColor: "transparent", // you can define HEX values as you wish
fillColor: "#F00F00", // red overlay
}),
selected: true
})
// add overlay over the whole map
map.addOverlay(polygon);