Stylistic map UIs and MapBox styles

Fancied up the map in the onroad UI and added toggles to use a custom MapBox style when using "Navigate on openpilot",

Co-Authored-By: mike8643 <98910897+mike8643@users.noreply.github.com>
Co-Authored-By: pencilpusher <83676301+jakethesnake420@users.noreply.github.com>
Co-Authored-By: multikyd <72329880+multikyd@users.noreply.github.com>

common/params.cc

@@ -323,6 +323,7 @@ std::unordered_map<std::string, uint32_t> keys = {
     {"MapboxSecretKey", PERSISTENT},
     {"MapsSelected", PERSISTENT},
     {"MapSpeedLimit", PERSISTENT},
+    {"MapStyle", PERSISTENT},
     {"MapTargetLatA", PERSISTENT},
     {"MapTargetVelocities", PERSISTENT},
     {"Model", PERSISTENT},

selfdrive/frogpilot/ui/qt/offroad/visual_settings.cc

@@ -50,6 +50,7 @@ FrogPilotVisualsPanel::FrogPilotVisualsPanel(SettingsWindow *parent) : FrogPilot
     {"CameraView", tr("Camera View"), tr("Choose your preferred camera view for the onroad UI. This is purely a visual change and doesn't impact how openpilot drives."), ""},
     {"DriverCamera", tr("Driver Camera On Reverse"), tr("Show the driver camera feed when in reverse."), ""},
     {"HideSpeed", tr("Hide Speed"), tr("Hide the speed indicator in the onroad UI. Additional toggle allows it to be hidden/shown via tapping the speed itself."), ""},
+    {"MapStyle", tr("Map Style"), tr("Select a map style to use with navigation."), ""},
     {"NumericalTemp", tr("Numerical Temperature Gauge"), tr("Replace the 'GOOD', 'OK', and 'HIGH' temperature statuses with a numerical temperature gauge based on the highest temperature between the memory, CPU, and GPU."), ""},
 
     {"ScreenManagement", tr("Screen Management"), tr("Manage your screen's brightness, timeout settings, and hide onroad UI elements."), "../frogpilot/assets/toggle_icons/icon_light.png"},
@@ -189,6 +190,7 @@ FrogPilotVisualsPanel::FrogPilotVisualsPanel(SettingsWindow *parent) : FrogPilot
         for (auto &[key, toggle] : toggles) {
           toggle->setVisible(qolKeys.find(key.c_str()) != qolKeys.end());
         }
+        mapStyleButton->setVisible(true);
       });
       toggle = qolToggle;
     } else if (param == "CameraView") {
@@ -203,6 +205,39 @@ FrogPilotVisualsPanel::FrogPilotVisualsPanel(SettingsWindow *parent) : FrogPilot
       std::vector<QString> hideSpeedToggles{"HideSpeedUI"};
       std::vector<QString> hideSpeedToggleNames{tr("Control Via UI")};
       toggle = new FrogPilotParamToggleControl(param, title, desc, icon, hideSpeedToggles, hideSpeedToggleNames);
+    } else if (param == "MapStyle") {
+      QMap<int, QString> styleMap = {
+        {0, tr("Stock openpilot")},
+        {1, tr("Mapbox Streets")},
+        {2, tr("Mapbox Outdoors")},
+        {3, tr("Mapbox Light")},
+        {4, tr("Mapbox Dark")},
+        {5, tr("Mapbox Satellite")},
+        {6, tr("Mapbox Satellite Streets")},
+        {7, tr("Mapbox Navigation Day")},
+        {8, tr("Mapbox Navigation Night")},
+        {9, tr("Mapbox Traffic Night")},
+        {10, tr("mike854's (Satellite hybrid)")},
+      };
+
+      QStringList styles = styleMap.values();
+
+      mapStyleButton = new ButtonControl(title, tr("SELECT"), desc);
+      QObject::connect(mapStyleButton, &ButtonControl::clicked, this, [this, styleMap]() {
+        QStringList styles = styleMap.values();
+        QString selection = MultiOptionDialog::getSelection(tr("Select a map style"), styles, "", this);
+        if (!selection.isEmpty()) {
+          int selectedStyle = styleMap.key(selection);
+          params.putInt("MapStyle", selectedStyle);
+          mapStyleButton->setValue(selection);
+          updateToggles();
+        }
+      });
+
+      int currentStyle = params.getInt("MapStyle");
+      mapStyleButton->setValue(styleMap[currentStyle]);
+
+      addItem(mapStyleButton);
     } else if (param == "NumericalTemp") {
       std::vector<QString> temperatureToggles{"Fahrenheit"};
       std::vector<QString> temperatureToggleNames{tr("Fahrenheit")};
@@ -340,6 +375,8 @@ void FrogPilotVisualsPanel::updateMetric() {
 }
 
 void FrogPilotVisualsPanel::hideToggles() {
+  mapStyleButton->setVisible(false);
+
   for (auto &[key, toggle] : toggles) {
     bool subToggles = alertVolumeControlKeys.find(key.c_str()) != alertVolumeControlKeys.end() ||
                       customAlertsKeys.find(key.c_str()) != customAlertsKeys.end() ||

selfdrive/frogpilot/ui/qt/offroad/visual_settings.h

@@ -23,12 +23,14 @@ private:
   void updateState(const UIState &s);
   void updateToggles();
 
+  ButtonControl *mapStyleButton;
+
   std::set<QString> alertVolumeControlKeys = {"DisengageVolume", "EngageVolume", "PromptDistractedVolume", "PromptVolume", "RefuseVolume", "WarningImmediateVolume", "WarningSoftVolume"};
   std::set<QString> customAlertsKeys = {"GreenLightAlert", "LeadDepartingAlert", "LoudBlindspotAlert"};
   std::set<QString> customOnroadUIKeys = {"Compass", "CustomPaths", "DeveloperUI", "FPSCounter", "LeadInfo", "PedalsOnUI", "RoadNameUI", "WheelIcon"};
   std::set<QString> customThemeKeys = {"CustomColors", "CustomIcons", "CustomSignals", "CustomSounds", "HolidayThemes"};
   std::set<QString> modelUIKeys = {"DynamicPathWidth", "HideLeadMarker", "LaneLinesWidth", "PathEdgeWidth", "PathWidth", "RoadEdgesWidth", "UnlimitedLength"};
-  std::set<QString> qolKeys = {"BigMap", "CameraView", "DriverCamera", "FullMap", "HideSpeed", "NumericalTemp"};
+  std::set<QString> qolKeys = {"BigMap", "CameraView", "DriverCamera", "FullMap", "HideSpeed", "MapStyle", "NumericalTemp"};
   std::set<QString> screenKeys = {"HideUIElements", "ScreenBrightness", "ScreenBrightnessOnroad", "ScreenRecorder", "ScreenTimeout", "ScreenTimeoutOnroad", "StandbyMode"};
 
   std::map<std::string, ParamControl*> toggles;

selfdrive/ui/qt/maps/map.cc

@@ -109,6 +109,49 @@ void MapWindow::initLayers() {
     // TODO: remove, symbol-sort-key does not seem to matter outside of each layer
     m_map->setLayoutProperty("carPosLayer", "symbol-sort-key", 0);
   }
+  if (!m_map->layerExists("buildingsLayer")) {
+    qDebug() << "Initializing buildingsLayer";
+    QVariantMap buildings;
+    buildings["id"] = "buildingsLayer";
+    buildings["source"] = "composite";
+    buildings["source-layer"] = "building";
+    buildings["type"] = "fill-extrusion";
+    buildings["minzoom"] = 15;
+    m_map->addLayer("buildingsLayer", buildings);
+    m_map->setFilter("buildingsLayer", QVariantList({"==", "extrude", "true"}));
+
+    QVariantList fillExtrusionHight = {
+      "interpolate",
+      QVariantList{"linear"},
+      QVariantList{"zoom"},
+      15, 0,
+      15.05, QVariantList{"get", "height"}
+    };
+
+    QVariantList fillExtrusionBase = {
+      "interpolate",
+      QVariantList{"linear"},
+      QVariantList{"zoom"},
+      15, 0,
+      15.05, QVariantList{"get", "min_height"}
+    };
+
+    QVariantList fillExtrusionOpacity = {
+      "interpolate",
+      QVariantList{"linear"},
+      QVariantList{"zoom"},
+      15, 0,
+      15.5, .6,
+      17, .6,
+      20, 0
+    };
+
+    m_map->setPaintProperty("buildingsLayer", "fill-extrusion-color", QColor("grey"));
+    m_map->setPaintProperty("buildingsLayer", "fill-extrusion-opacity", fillExtrusionOpacity);
+    m_map->setPaintProperty("buildingsLayer", "fill-extrusion-height", fillExtrusionHight);
+    m_map->setPaintProperty("buildingsLayer", "fill-extrusion-base", fillExtrusionBase);
+    m_map->setLayoutProperty("buildingsLayer", "visibility", "visible");
+  }
 }
 
 void MapWindow::updateState(const UIState &s) {
@@ -152,6 +195,18 @@ void MapWindow::updateState(const UIState &s) {
     }
   }
 
+  // Credit to jakethesnake420
+  if (loaded_once && (sm.rcv_frame("uiPlan") != model_rcv_frame)) {
+    auto locationd_location = sm["liveLocationKalman"].getLiveLocationKalman();
+    auto model_path = model_to_collection(locationd_location.getCalibratedOrientationECEF(), locationd_location.getPositionECEF(), sm["uiPlan"].getUiPlan().getPosition());
+    QMapLibre::Feature model_path_feature(QMapLibre::Feature::LineStringType, model_path, {}, {});
+    QVariantMap modelV2Path;
+    modelV2Path["type"] =  "geojson";
+    modelV2Path["data"] = QVariant::fromValue<QMapLibre::Feature>(model_path_feature);
+    m_map->updateSource("modelPathSource", modelV2Path);
+    model_rcv_frame = sm.rcv_frame("uiPlan");
+  }
+
   if (sm.updated("navRoute") && sm["navRoute"].getNavRoute().getCoordinates().size()) {
     auto nav_dest = coordinate_from_param("NavDestination");
     bool allow_open = std::exchange(last_valid_nav_dest, nav_dest) != nav_dest &&
@@ -237,6 +292,30 @@ void MapWindow::updateState(const UIState &s) {
     route_rcv_frame = sm.rcv_frame("navRoute");
     updateDestinationMarker();
   }
+
+  // Map Styling - Credit goes to OPKR!
+  int map_style = uiState()->scene.map_style;
+
+  if (map_style != previous_map_style) {
+    std::unordered_map<int, std::string> styleUrls = {
+      {0, "mapbox://styles/commaai/clkqztk0f00ou01qyhsa5bzpj"},  // Stock openpilot
+      {1, "mapbox://styles/mapbox/streets-v11"},  // Mapbox Streets
+      {2, "mapbox://styles/mapbox/outdoors-v11"},  // Mapbox Outdoors
+      {3, "mapbox://styles/mapbox/light-v10"},  // Mapbox Light
+      {4, "mapbox://styles/mapbox/dark-v10"},  // Mapbox Dark
+      {5, "mapbox://styles/mapbox/satellite-v9"},  // Mapbox Satellite
+      {6, "mapbox://styles/mapbox/satellite-streets-v11"},  // Mapbox Satellite Streets
+      {7, "mapbox://styles/mapbox/navigation-day-v1"},  // Mapbox Navigation Day
+      {8, "mapbox://styles/mapbox/navigation-night-v1"},  // Mapbox Navigation Night
+      {9, "mapbox://styles/mapbox/traffic-night-v2"},  // Mapbox Traffic Night
+      {10, "mapbox://styles/mike854/clt0hm8mw01ok01p4blkr27jp"},  // mike854's (Satellite hybrid)
+    };
+
+    std::unordered_map<int, std::string>::iterator it = styleUrls.find(map_style);
+    m_map->setStyleUrl(QString::fromStdString(it->second));
+  }
+
+  previous_map_style = map_style;
 }
 
 void MapWindow::setError(const QString &err_str) {

selfdrive/ui/qt/maps/map.h

@@ -81,6 +81,10 @@ private:
   // FrogPilot variables
   Params params;
 
+  int previous_map_style;
+
+  uint64_t model_rcv_frame = 0;
+
 private slots:
   void updateState(const UIState &s);
 

selfdrive/ui/ui.cc

@@ -373,6 +373,7 @@ void ui_update_frogpilot_params(UIState *s) {
   scene.driver_camera = quality_of_life_visuals && params.getBool("DriverCamera");
   scene.hide_speed = quality_of_life_visuals && params.getBool("HideSpeed");
   scene.hide_speed_ui = scene.hide_speed && params.getBool("HideSpeedUI");
+  scene.map_style = quality_of_life_visuals ? params.getInt("MapStyle") : 0;
   scene.numerical_temp = quality_of_life_visuals && params.getBool("NumericalTemp");
   scene.fahrenheit = scene.numerical_temp && params.getBool("Fahrenheit");
 

selfdrive/ui/ui.h

@@ -272,6 +272,7 @@ typedef struct UIScene {
   int custom_signals;
   int desired_follow;
   int driver_camera_timer;
+  int map_style;
   int obstacle_distance;
   int obstacle_distance_stock;
   int screen_brightness;