diff --git a/examples/map-server/README.md b/examples/map-server/README.md
index 38a4f383..67a4ecd8 100644
--- a/examples/map-server/README.md
+++ b/examples/map-server/README.md
@@ -2,7 +2,7 @@
 
 ![Screenshot](screenshot.png)
 
-Interactive 3D globe viewer using CesiumJS with OpenStreetMap tiles. Demonstrates geocoding integration and full MCP App capabilities.
+Interactive 3D globe viewer using CesiumJS with multiple tile provider options. Demonstrates geocoding integration and full MCP App capabilities.
 
 ## MCP Client Configuration
 
@@ -29,7 +29,8 @@ Add to your MCP client configuration (stdio transport):
 
 - **3D Globe Rendering**: Interactive CesiumJS globe with rotation, zoom, and 3D perspective
 - **Geocoding**: Search for places using OpenStreetMap Nominatim (no API key required)
-- **OpenStreetMap Tiles**: Uses free OSM tile server (no Cesium Ion token needed)
+- **Multiple Tile Styles**: Choose between Carto Voyager (smooth, with retina support) or classic OpenStreetMap tiles
+- **Retina Support**: Automatic @2x tile loading on high-DPI displays for sharper rendering
 - **Dynamic Loading**: CesiumJS loaded from CDN at runtime for smaller bundle size
 
 ## Running
@@ -74,11 +75,15 @@ Display the 3D globe zoomed to a bounding box.
   "south": 48.85,
   "east": 2.3,
   "north": 48.86,
-  "label": "Eiffel Tower"
+  "label": "Eiffel Tower",
+  "style": "carto"
 }
 ```
 
-Defaults to London if no coordinates provided.
+Parameters:
+- `west`, `south`, `east`, `north`: Bounding box coordinates (defaults to London)
+- `label`: Optional label to display
+- `style`: Tile style - `"carto"` (default, smooth with retina) or `"osm"` (classic, more detailed)
 
 ## Architecture
 
@@ -87,18 +92,19 @@ Defaults to London if no coordinates provided.
 Exposes two tools:
 
 - `geocode` - Queries OpenStreetMap Nominatim API with rate limiting
-- `show-map` - Renders the CesiumJS globe UI at a specified location
+- `show-map` - Renders the CesiumJS globe UI at a specified location with configurable tile style
 
-Configures Content Security Policy to allow fetching tiles from OSM and Cesium CDN.
+Configures Content Security Policy to allow fetching tiles from Carto, OSM, and Cesium CDN.
 
 ### App (`src/mcp-app.ts`)
 
 Vanilla TypeScript app that:
 
 - Dynamically loads CesiumJS from CDN
-- Initializes globe with OpenStreetMap imagery (no Ion token)
+- Supports multiple tile providers (Carto Voyager with @2x retina, classic OSM)
 - Receives tool inputs via the MCP App SDK
 - Handles camera navigation to specified bounding boxes
+- Switches tile styles at runtime based on tool input
 
 ## Key Files
 
diff --git a/examples/map-server/mcp-app.html b/examples/map-server/mcp-app.html
index 8cba8394..d7823569 100644
--- a/examples/map-server/mcp-app.html
+++ b/examples/map-server/mcp-app.html
@@ -22,10 +22,9 @@
             border-radius: .75rem;
             overflow: hidden;
         }
-        #fullscreen-btn {
+        .map-btn {
             position: absolute;
             top: 10px;
-            right: 10px;
             width: 36px;
             height: 36px;
             background: rgba(0, 0, 0, 0.7);
@@ -38,14 +37,20 @@
             justify-content: center;
             transition: background 0.2s;
         }
-        #fullscreen-btn:hover {
+        .map-btn:hover {
             background: rgba(0, 0, 0, 0.85);
         }
-        #fullscreen-btn svg {
+        .map-btn svg {
             width: 20px;
             height: 20px;
             fill: white;
         }
+        #home-btn {
+            left: 10px;
+        }
+        #fullscreen-btn {
+            right: 10px;
+        }
         #loading {
             position: absolute;
             top: 50%;
@@ -62,7 +67,11 @@
 </head>
 <body>
     <div id="cesiumContainer"></div>
-    <button id="fullscreen-btn" title="Toggle fullscreen">
+    <button id="home-btn" class="map-btn" title="Return to initial view">
+        <!-- Home icon -->
+        <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+    </button>
+    <button id="fullscreen-btn" class="map-btn" title="Toggle fullscreen">
         <!-- Expand icon (shown when inline) -->
         <svg id="expand-icon" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
         <!-- Compress icon (shown when fullscreen) -->
diff --git a/examples/map-server/server.ts b/examples/map-server/server.ts
index dbe2154e..67647043 100644
--- a/examples/map-server/server.ts
+++ b/examples/map-server/server.ts
@@ -99,15 +99,17 @@ export function createServer(): McpServer {
   const cspMeta = {
     ui: {
       csp: {
-        // Allow fetching tiles from OSM (tiles + geocoding) and Cesium assets
+        // Allow fetching tiles from Carto, OSM, and Cesium assets
         connectDomains: [
+          "https://*.basemaps.cartocdn.com", // Carto basemap tiles (retina support)
           "https://*.openstreetmap.org", // OSM tiles + Nominatim geocoding
           "https://cesium.com",
           "https://*.cesium.com",
         ],
         // Allow loading tile images, scripts, and Cesium CDN resources
         resourceDomains: [
-          "https://*.openstreetmap.org", // OSM map tiles (covers tile.openstreetmap.org)
+          "https://*.basemaps.cartocdn.com", // Carto basemap tiles (retina support)
+          "https://*.openstreetmap.org", // OSM map tiles
           "https://cesium.com",
           "https://*.cesium.com",
         ],
@@ -174,14 +176,28 @@ export function createServer(): McpServer {
           .string()
           .optional()
           .describe("Optional label to display on the map"),
+        style: z
+          .enum(["carto", "osm"])
+          .optional()
+          .default("carto")
+          .describe(
+            "Map tile style: 'carto' for smooth Carto Voyager tiles with retina support (default), 'osm' for classic OpenStreetMap tiles with more detail",
+          ),
       },
       _meta: { [RESOURCE_URI_META_KEY]: RESOURCE_URI },
     },
-    async ({ west, south, east, north, label }): Promise<CallToolResult> => ({
+    async ({
+      west,
+      south,
+      east,
+      north,
+      label,
+      style,
+    }): Promise<CallToolResult> => ({
       content: [
         {
           type: "text",
-          text: `Displaying globe at: W:${west.toFixed(4)}, S:${south.toFixed(4)}, E:${east.toFixed(4)}, N:${north.toFixed(4)}${label ? ` (${label})` : ""}`,
+          text: `Displaying globe at: W:${west.toFixed(4)}, S:${south.toFixed(4)}, E:${east.toFixed(4)}, N:${north.toFixed(4)}${label ? ` (${label})` : ""} [style: ${style}]`,
         },
       ],
       _meta: {
diff --git a/examples/map-server/src/mcp-app.ts b/examples/map-server/src/mcp-app.ts
index 73d7aa16..d72d0019 100644
--- a/examples/map-server/src/mcp-app.ts
+++ b/examples/map-server/src/mcp-app.ts
@@ -58,6 +58,15 @@ interface BoundingBox {
   north: number;
 }
 
+// Map tile style: 'carto' for smooth retina tiles, 'osm' for classic detailed tiles
+type MapStyle = "carto" | "osm";
+
+// Current map style (set from tool input, defaults to 'carto')
+let currentMapStyle: MapStyle = "carto";
+
+// Initial bounding box from tool input (for home button)
+let initialBoundingBox: BoundingBox | null = null;
+
 // CesiumJS viewer instance
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let viewer: any = null;
@@ -135,7 +144,7 @@ function persistViewState(cesiumViewer: any): void {
     localStorage.setItem(viewUUID, value);
     log.info("Persisted view state:", viewUUID, value);
   } catch (e) {
-    log.warn("Failed to persist view state:", e);
+    log.warn("[localStorage] save failed:", e);
   }
 }
 
@@ -159,13 +168,13 @@ function loadPersistedViewState(): PersistedCameraState | null {
       typeof state.latitude !== "number" ||
       typeof state.height !== "number"
     ) {
-      log.warn("Invalid persisted view state, ignoring");
+      log.warn("Invalid persisted view state, ignoring:", state);
       return null;
     }
     log.info("Loaded persisted view state:", state);
     return state;
   } catch (e) {
-    log.warn("Failed to load persisted view state:", e);
+    log.warn("[localStorage] load failed:", e);
     return null;
   }
 }
@@ -483,54 +492,84 @@ async function initCesium(): Promise<any> {
   // Disable request render mode - helps with initial rendering
   cesiumViewer.scene.requestRenderMode = false;
 
-  // Fix pixelated rendering on high-DPI displays
-  // CesiumJS sets image-rendering: pixelated by default which looks bad on scaled displays
-  // Setting to "auto" allows the browser to apply smooth interpolation
+  // Log resolution info for debugging
+  log.info(
+    `Canvas: ${cesiumViewer.canvas.width}x${cesiumViewer.canvas.height}, ` +
+      `CSS: ${cesiumViewer.canvas.offsetWidth}x${cesiumViewer.canvas.offsetHeight}, ` +
+      `DPR: ${window.devicePixelRatio}, ` +
+      `resolutionScale: ${cesiumViewer.resolutionScale}`,
+  );
+
+  // Note: useBrowserRecommendedResolution: false (set above) should render at device
+  // pixel resolution. DO NOT set resolutionScale = devicePixelRatio as that would
+  // double the scaling.
+
+  // Allow browser to apply smooth interpolation when scaling down from device resolution
   cesiumViewer.canvas.style.imageRendering = "auto";
-  // Note: DO NOT set resolutionScale = devicePixelRatio here!
-  // When useBrowserRecommendedResolution: false, Cesium already uses devicePixelRatio.
-  // Setting resolutionScale = devicePixelRatio would double the scaling (e.g., 2x2=4x on Retina)
-  // which causes blurriness when scaled back down. Leave resolutionScale at default (1.0).
 
   // Disable FXAA anti-aliasing which can cause blurriness on high-DPI displays
   cesiumViewer.scene.postProcessStages.fxaa.enabled = false;
 
   log.info("Globe configured");
 
-  // Create and add map imagery layer
-  // Use standard OSM tiles - they render sharply with Cesium's settings
-  log.info("Creating OpenStreetMap imagery provider...");
+  // Create and add map imagery layer based on current style
+  log.info(`Creating imagery provider for style: ${currentMapStyle}`);
   try {
-    // Use standard OpenStreetMap tile server
-    // While these are 256x256 tiles, Cesium handles the rendering well
-    // with useBrowserRecommendedResolution: false
-    const osmProvider = new Cesium.UrlTemplateImageryProvider({
-      url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-      minimumLevel: 0,
-      maximumLevel: 19,
-      credit: new Cesium.Credit(
-        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        true,
-      ),
-    });
-    log.info("OSM provider created (256x256 tiles)");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let imageryProvider: any;
+
+    if (currentMapStyle === "osm") {
+      // Classic OpenStreetMap tiles - more detailed but 256px only
+      imageryProvider = new Cesium.UrlTemplateImageryProvider({
+        url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        minimumLevel: 0,
+        maximumLevel: 19,
+        credit: new Cesium.Credit(
+          '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+          true,
+        ),
+      });
+      log.info("OSM provider created (256px tiles)");
+    } else {
+      // Carto Voyager tiles - smoother style with @2x retina support
+      const isHighDPI = window.devicePixelRatio >= 1.5;
+      const retinaModifier = isHighDPI ? "@2x" : "";
+      const tileUrl = `https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${retinaModifier}.png`;
+
+      log.info(
+        `Using Carto ${isHighDPI ? "retina" : "standard"} tiles, devicePixelRatio: ${window.devicePixelRatio}`,
+      );
+
+      imageryProvider = new Cesium.UrlTemplateImageryProvider({
+        url: tileUrl,
+        minimumLevel: 0,
+        maximumLevel: 19,
+        credit: new Cesium.Credit(
+          '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>',
+          true,
+        ),
+      });
+      log.info(
+        `Carto provider created (${isHighDPI ? "@2x" : "standard"} tiles)`,
+      );
+    }
 
     // Log any imagery provider errors
-    osmProvider.errorEvent.addEventListener((error: any) => {
-      log.error("OSM imagery provider error:", error);
+    imageryProvider.errorEvent.addEventListener((error: any) => {
+      log.error("Imagery provider error:", error);
     });
 
     // Wait for provider to be ready
-    if (osmProvider.ready !== undefined && !osmProvider.ready) {
-      log.info("Waiting for OSM provider to be ready...");
-      await osmProvider.readyPromise;
-      log.info("OSM provider ready");
+    if (imageryProvider.ready !== undefined && !imageryProvider.ready) {
+      log.info("Waiting for imagery provider to be ready...");
+      await imageryProvider.readyPromise;
+      log.info("Imagery provider ready");
     }
 
     // Add the imagery layer to the viewer
-    cesiumViewer.imageryLayers.addImageryProvider(osmProvider);
+    cesiumViewer.imageryLayers.addImageryProvider(imageryProvider);
     log.info(
-      "OSM imagery layer added, layer count:",
+      "Imagery layer added, layer count:",
       cesiumViewer.imageryLayers.length,
     );
 
@@ -547,7 +586,7 @@ async function initCesium(): Promise<any> {
     cesiumViewer.scene.requestRender();
     log.info("Render requested");
   } catch (error) {
-    log.error("Failed to create OSM provider:", error);
+    log.error("Failed to create imagery provider:", error);
   }
 
   // Fly to default USA view - using Rectangle is most reliable
@@ -584,6 +623,64 @@ async function initCesium(): Promise<any> {
   return cesiumViewer;
 }
 
+/**
+ * Switch the map tile style by replacing the imagery layer
+ */
+async function switchMapStyle(
+  cesiumViewer: any,
+  newStyle: MapStyle,
+): Promise<void> {
+  if (newStyle === currentMapStyle) {
+    log.info(`Style already set to ${newStyle}, skipping`);
+    return;
+  }
+
+  log.info(`Switching map style from ${currentMapStyle} to ${newStyle}`);
+  currentMapStyle = newStyle;
+
+  // Remove all existing imagery layers
+  cesiumViewer.imageryLayers.removeAll();
+
+  // Create new imagery provider based on style
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let imageryProvider: any;
+
+  if (newStyle === "osm") {
+    imageryProvider = new Cesium.UrlTemplateImageryProvider({
+      url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+      minimumLevel: 0,
+      maximumLevel: 19,
+      credit: new Cesium.Credit(
+        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        true,
+      ),
+    });
+    log.info("Switched to OSM tiles (256px)");
+  } else {
+    const isHighDPI = window.devicePixelRatio >= 1.5;
+    const retinaModifier = isHighDPI ? "@2x" : "";
+    imageryProvider = new Cesium.UrlTemplateImageryProvider({
+      url: `https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${retinaModifier}.png`,
+      minimumLevel: 0,
+      maximumLevel: 19,
+      credit: new Cesium.Credit(
+        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>',
+        true,
+      ),
+    });
+    log.info(`Switched to Carto tiles (${isHighDPI ? "@2x" : "standard"})`);
+  }
+
+  // Wait for provider to be ready
+  if (imageryProvider.ready !== undefined && !imageryProvider.ready) {
+    await imageryProvider.readyPromise;
+  }
+
+  // Add the new imagery layer
+  cesiumViewer.imageryLayers.addImageryProvider(imageryProvider);
+  cesiumViewer.scene.requestRender();
+}
+
 /**
  * Calculate camera destination for a bounding box
  */
@@ -696,6 +793,54 @@ const app = new App(
   { autoResize: false },
 );
 
+// Default bounding box (USA) for home button fallback
+const DEFAULT_BOUNDING_BOX: BoundingBox = {
+  west: -130,
+  south: 20,
+  east: -60,
+  north: 55,
+};
+
+/**
+ * Show home button and set up click handler
+ */
+function setupHomeButton(cesiumViewer: any): void {
+  const btn = document.getElementById("home-btn");
+  if (!btn) {
+    log.warn("Home button element not found");
+    return;
+  }
+
+  log.info("Setting up home button");
+  btn.style.display = "flex";
+  btn.addEventListener("click", () => {
+    // Use initial bbox from tool input, or default to USA view
+    const targetBbox = initialBoundingBox || DEFAULT_BOUNDING_BOX;
+    log.info("Flying to home view:", targetBbox);
+    flyToBoundingBox(cesiumViewer, targetBbox);
+  });
+}
+
+/**
+ * Fly camera to view a bounding box with animation
+ */
+function flyToBoundingBox(cesiumViewer: any, bbox: BoundingBox): void {
+  const { destination, centerLon, centerLat, height } =
+    calculateDestination(bbox);
+
+  log.info("flyTo destination:", centerLon, centerLat, "height:", height);
+
+  cesiumViewer.camera.flyTo({
+    destination,
+    orientation: {
+      heading: 0,
+      pitch: Cesium.Math.toRadians(-90),
+      roll: 0,
+    },
+    duration: 1.5,
+  });
+}
+
 /**
  * Update fullscreen button visibility and icon based on current state
  */
@@ -825,10 +970,17 @@ app.ontoolinput = async (params) => {
         east?: number;
         north?: number;
         label?: string;
+        style?: MapStyle;
       }
     | undefined;
 
   if (args && viewer) {
+    // Apply map style if specified (defaults to 'carto')
+    const requestedStyle = args.style || "carto";
+    if (requestedStyle !== currentMapStyle) {
+      await switchMapStyle(viewer, requestedStyle);
+    }
+
     // Handle both nested boundingBox and flat format
     let bbox: BoundingBox | null = null;
 
@@ -849,12 +1001,22 @@ app.ontoolinput = async (params) => {
     }
 
     if (bbox) {
-      // Mark that we received explicit tool input (overrides persisted state)
       hasReceivedToolInput = true;
-      log.info("Positioning camera to bbox:", bbox);
 
-      // Position camera instantly (no animation)
-      setViewToBoundingBox(viewer, bbox);
+      // Store tool input bbox for home button (first tool input becomes the "home" view)
+      if (!initialBoundingBox) {
+        initialBoundingBox = bbox;
+      }
+
+      // Check if we have a persisted view state - if so, use it instead of tool input
+      const persistedState = loadPersistedViewState();
+      if (persistedState) {
+        log.info("[localStorage] using persisted view instead of tool input");
+        restorePersistedView(viewer);
+      } else {
+        log.info("Positioning camera to tool input bbox:", bbox);
+        setViewToBoundingBox(viewer, bbox);
+      }
 
       // Wait for tiles to load at this location
       await waitForTilesLoaded(viewer);
@@ -976,6 +1138,9 @@ async function initialize() {
       fullscreenBtn.addEventListener("click", toggleFullscreen);
     }
 
+    // Set up home button
+    setupHomeButton(viewer);
+
     // Set up keyboard shortcuts for fullscreen (Escape to exit, Ctrl/Cmd+Enter to toggle)
     document.addEventListener("keydown", handleFullscreenKeyboard);
 
