How to add layer over full map in apple 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);