modelcontextprotocol · ochafik · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026
diff --git a/examples/basic-server-react/grid-cell.png b/examples/basic-server-react/grid-cell.png
diff --git a/examples/basic-server-react/screenshot.png b/examples/basic-server-react/screenshot.png
diff --git a/examples/cohort-heatmap-server/grid-cell.png b/examples/cohort-heatmap-server/grid-cell.png
diff --git a/examples/cohort-heatmap-server/screenshot.png b/examples/cohort-heatmap-server/screenshot.png
diff --git a/examples/customer-segmentation-server/grid-cell.png b/examples/customer-segmentation-server/grid-cell.png
diff --git a/examples/customer-segmentation-server/screenshot.png b/examples/customer-segmentation-server/screenshot.png
diff --git a/examples/map-server/README.md b/examples/map-server/README.md
@@ -2,13 +2,14 @@
 
 ![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.
 
 ## Features
 
 - **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
@@ -53,11 +54,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
 
@@ -66,18 +71,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/grid-cell.png b/examples/map-server/grid-cell.png
diff --git a/examples/map-server/mcp-app.html b/examples/map-server/mcp-app.html
@@ -21,10 +21,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);
@@ -37,14 +36,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%;
@@ -61,7 +66,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/screenshot.png b/examples/map-server/screenshot.png
diff --git a/examples/map-server/server.ts b/examples/map-server/server.ts
@@ -97,15 +97,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",
         ],
@@ -172,14 +174,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}]`,
         },
       ],
     }),