Map theme light/dark unpredictable and unchangable

[tringuyen-yw]

Using Road Registration Tool current as of 2026-04-21:

• The self-hosted version show map with dark theme. Please note the route project was imported from a project saved on 2026-03-16 using a hosted version.
• The hosted version show map with light theme

In the UI, there is no way to change the map theme. Ideally it would be preferable if the map theme is similar to that of the public version of Google Maps: https://www.google.com/maps

How to reproduce?

Restrict the Maps API Key to block the modern Maps API (routes, roads, places):

# MAP_APIKEY_RESOURCE_ID='projects/<project_number>/locations/global/keys/<uuid>'

gcloud services api-keys update "$MAP_APIKEY_RESOURCE_ID" \
  --api-target=service=maps-backend.googleapis.com \
  --api-target=service=places-backend.googleapis.com \
  --api-target=service=directions-backend.googleapis.com \
  --api-target=service=geocoding-backend.googleapis.com \
  #--api-target=service=routes.googleapis.com \
  #--api-target=service=roads.googleapis.com \
  #--api-target=service=places.googleapis.com

# Verif
gcloud services api-keys describe "$MAP_APIKEY_RESOURCE_ID"

[tringuyen-yw]

After applying the fix mentioned in issue #59

The map now switches to light theme. Maybe this is a happy confounding factor which switches map theme unintentionally. The proper fix would be to offer an option for the user to select light/dark theme.

[n0531m]

The code has set ColorScheme to LIGHT which explains the light theme.

To fully control the map theme, suggest creating and new "Map ID", and apply Cloud Based map styling where you can choose the visibility/styling of various map elements.

Ref:

• roads-management-insights-samples/route-registration-tool/ui/src/components/map/UnifiedProjectMap.tsx

  Line 873 in cc766ee

  colorScheme={"LIGHT"}

• https://developers.google.com/maps/documentation/javascript/mapcolorscheme
• https://developers.google.com/maps/documentation/javascript/map-ids/get-map-id
• https://developers.google.com/maps/documentation/javascript/cloud-customization