Map Tab — Focus Mode
Focus Mode isolates a single country or US state as the primary subject of your map. When activated, a mask overlay covers everything outside the selected region, creating a clean presentation-ready view of one geography. This is the mode you'd use for maps like "Germany — Office Locations" or "California — Portfolio Companies" where the audience should be focused on a single region.
Focus Mode has its own set of themes (separate from regular themes) that are optimized for the isolated-country presentation style. It also provides controls for internal boundaries (state/province lines within the focused country), neighboring country visibility, local city markers, and the ability to selectively show base map features through the focus overlay.
SVG export (vector output for editing in Illustrator or Figma) is only available in Focus Mode.
💡
You can switch between Regular and Focus modes freely without losing data. Your location markers, datasets, and saved views are preserved when toggling modes.
Country / Region
| Feature | Control | Description |
|---|---|---|
| Country dropdown | Dropdown | Selects the country or territory to focus on. When you select a country, the map automatically zooms to fit that country's boundaries, and a mask overlay is drawn that dims everything outside the selected region. The dropdown lists 60 countries (the United States appears first, followed by the remaining countries in alphabetical order). Selecting a country triggers loading of high-resolution (10m) boundary data for precise border rendering. To return to Regular Mode, use the mode toggle at the top of the Map panel. |
| US Region buttons | Radio buttons (US only) | When the United States is selected, three region buttons appear: CONUS (the contiguous 48 states, the default), Alaska, and Hawaii. Each button focuses the map on that region's geographic bounds and adjusts the mask geometry accordingly. This lets you create separate maps for Alaska or Hawaii without showing the entire continental US. Only available when the US is selected as the country. |
| US State dropdown | Dropdown (US only) | When the United States is selected, a state dropdown appears below the region buttons. Selecting a state zooms to that state's bounds and loads county-level boundaries for display within the state. The "Whole country" option at the top of the list returns to the national view. This is useful for creating state-level maps (e.g. "Texas — Regional Offices"). Only available when the US is the selected country. |
Focus Theme
| Feature | Control | Description |
|---|---|---|
| Focus theme dropdown | Dropdown | Selects the visual style for the focus mode overlay. Focus themes control the mask color, focused country fill and border colors, neighboring country styling, and internal boundary appearance. These themes are separate from Regular Mode themes and are specifically optimized for the single-country presentation format. The default is "Focus White," which creates a clean white mask with grey boundaries that works well in most presentation contexts. 11 built-in focus themes are available (see Section 10.2), plus any custom focus themes you've created in the Theme Editor. |
Internal Boundaries
| Feature | Control | Description |
|---|---|---|
| Show low zoom boundaries | Checkbox | Toggles internal state/province boundaries inside the focused country, rendered from high-resolution Natural Earth 10m GeoJSON data. These boundaries are visible at zoom levels 1–8 and provide clean, smooth subdivision lines at continental and national scale. Because they come from pre-loaded geometry data rather than vector tiles, they render with consistent quality at all zoom levels. Best for maps where you want to see state or province divisions at a zoomed-out national view. |
| Show high zoom boundaries | Checkbox | Toggles internal boundaries sourced from the basemap's vector tiles, which provide detailed administrative subdivision lines at all zoom levels (especially z8 and above). These boundaries come from the PMTiles data and can show more detailed divisions than the Natural Earth data at high zoom. You can use this simultaneously with or independently from the low-zoom boundaries toggle. Use this when you're zoomed in and want fine-grained administrative detail. |
Surrounding Boundaries
| Feature | Control | Description |
|---|---|---|
| Show surrounding boundaries | Checkbox | Toggles visibility of neighboring country borders outside the focused region. When enabled, countries adjacent to the focused country show their outlines through the mask, providing geographic context that helps viewers orient themselves (e.g. seeing France's neighbors when France is the focus). This is the master toggle — the "Show internal surrounding boundaries" control below is disabled until this checkbox is checked. |
| Show internal surrounding boundaries | Checkbox | Toggles state/province boundaries within neighboring countries. Only becomes active when "Show surrounding boundaries" is enabled. This adds administrative detail to the surrounding countries, which can be useful when neighboring regions are relevant to your presentation (e.g. showing US state borders when focusing on a Canadian province near the border). |
Customize Focus Theme
This section provides fine-grained control over the visual appearance of the focus mode overlay. Each control lets you adjust a specific aspect of how the focused country, its mask, and neighboring countries are rendered. Changes here are saved with your project.
Mask
| Feature | Control | Description |
|---|---|---|
| Mask color | Color picker + hex | Sets the color of the overlay that covers everything outside the focused country. The mask is drawn as a full-screen polygon with a cutout for the focused country's shape. Default is white (#FFFFFF), which "washes out" the surrounding area and creates a clean, isolated appearance. A light grey softens the contrast between the focused country and its surroundings. A dark color (navy, charcoal) can create dramatic focus effects for dark-themed presentations. This directly affects PNG and SVG exports. |
Focus Country
| Feature | Control | Description |
|---|---|---|
| Fill | Color picker + hex | Sets the fill color inside the focused country boundary. Default is transparent, which allows the base map to show through so you see terrain, roads, and other geographic features within the country. Setting a solid color (e.g. light blue, pale yellow) overlays the entire country area with that color, hiding the base map detail beneath it. This creates a choropleth-style appearance where the country is a flat colored shape. Useful for stylized presentations where geographic detail inside the country isn't needed. |
| Outline | Color picker + hex | Sets the border/outline color around the focused country. This is the prominent line that defines the country's shape and is one of the most visually important elements in Focus Mode. Default is medium grey (#AAAAAA). Darker or brighter colors make the country boundary more visible and definitive. This line is rendered as a MapLibre line layer and appears in all exports. |
| Outline width | Slider (0.5–4.0px) | Controls the stroke width of the focused country's border outline. Default is 1.5px. Higher values create a bolder, more prominent border. A thicker outline is particularly useful for presentation slides where the audience is viewing from a distance and needs to clearly see the country's shape. |
| Internal | Color picker + hex | Sets the color of state/province boundary lines inside the focused country. These lines only appear when one of the internal boundaries toggles (low zoom or high zoom) is turned on. Default is light grey (#BBBBBB). Lighter colors create subtle, understated subdivisions; darker colors emphasize internal political geography and make state/province borders more prominent. |
| Internal width | Slider (0.3–3.0px) | Controls the stroke width of internal state/province boundaries within the focused country. Default is 1.0px. Thinner lines create subtle divisions that are present but not dominant; thicker lines make state borders a prominent visual element. |
| Internal style | Dropdown | Chooses between solid or dashed line rendering for internal boundaries. Dashed is the default — it visually differentiates internal subdivision boundaries from the solid country outline, creating a clear visual hierarchy (solid = national border, dashed = state/province border). Solid creates a more uniform appearance where all boundaries look the same. The dash pattern is [6,4] pixels (6px line, 4px gap). |
Neighboring Countries
| Feature | Control | Description |
|---|---|---|
| Fill | Color picker + hex | Sets the fill color for neighboring countries visible through the mask. Default is very light grey (#F2F2F2), which provides subtle distinction between the masked background area and the visible neighbor territories. Only has a visible effect when "Show surrounding boundaries" is enabled in Section 3.2. |
| Outline | Color picker + hex | Sets the border line color for neighboring country outlines. Default is light grey (#DDDDDD). Creates the visual boundary between adjacent countries. This should typically be lighter or more subtle than the focused country's outline color to maintain a clear visual hierarchy where the primary country stands out. |
| Internal | Color picker + hex | Sets the color of state/province boundaries within neighboring countries. Default is light grey (#CCCCCC). Only visible when both "Show surrounding boundaries" and "Show internal surrounding boundaries" are enabled in Section 3.2. |
Local Cities
The Local Cities system adds small city markers and labels within the focused country to provide geographic reference points. These are separate from your data markers (which appear across all modes) — Local Cities are specifically designed to help orient viewers by showing familiar city names on the map.
Cities are sourced from Natural Earth 10m populated places data, filtered to the focused country. You can also add custom cities by name or import them from a CSV file.
| Feature | Control | Description |
|---|---|---|
| Show Local Cities | Checkbox (master) | Master toggle for the entire Local Cities system. When enabled, small circle markers and labels appear for cities within the focused country. All controls below are disabled until this is checked. Local Cities render independently from your data markers and have their own styling controls. |
| Source mode | Dropdown | Controls which cities are displayed. Default shows the built-in curated city list for the focused country (sourced from Natural Earth data). Custom shows only cities you've manually added or imported. Both combines the default list with your custom additions. This is useful when the default city list is mostly right but you need to add a few specific locations. |
| Per-city toggle | Checkbox (per city) | Individual on/off toggles for each city in the list. Allows you to hide specific cities that overlap with your data markers or clutter the view, while keeping other reference cities visible. Disabled cities are remembered across sessions (stored in focusMode.disabledCities[]). |
| Add custom city | Text input + button | Adds a custom city by name. Enter a city name (max 100 characters), and it will be geocoded to get coordinates, then added to the custom cities list. Custom cities appear with a "custom" tag in the city list and can be individually toggled like default cities. Use this to add smaller towns or specific locations that aren't in the default list. |
| Import CSV | File upload button | Batch-imports cities from a CSV, TSV, or TXT file. Each row should contain at minimum a city name (which gets geocoded automatically) or columns for name, latitude, and longitude (which skips geocoding). Imported cities are added to the custom cities list. Useful for adding a large number of reference cities at once. |
| Marker size | Slider (1–8px) | Controls the circle radius for city markers. Default is 2px, which creates small, subtle dots that mark city positions without dominating the map. Larger values (4–8px) make city locations more visually prominent. Note that city markers are always simple circles, not the marker shapes (diamonds, stars) available for data markers. |
| Marker color | Color picker | Sets the fill color of city marker circles. Default is transparent (outline-only circles). Setting a solid color fills the circles. Works in combination with the outline toggle for visual flexibility — you can have filled circles, outline-only circles, or filled circles with outlines. |
| Transparent fill | Checkbox | When checked, the city marker fill is set to transparent, creating outline-only circle markers. This is the default style — cities appear as small rings rather than filled dots, which is subtler and less likely to be confused with data markers. Unchecking this enables the marker color picker above. |
| Outline color | Color picker | Sets the stroke/outline color of city marker circles. Default is medium grey (#999999). This is the primary visual element when transparent fill is enabled (which it is by default). Darker outlines make cities more prominent; lighter outlines keep them subtle. |
| Show outline | Checkbox | Toggles the circle outline stroke on or off. Default is ON. When turned off and transparent fill is also enabled, city markers become invisible (only the text labels remain, which can be a useful effect). |
| Label size | Slider (7–16px) | Controls the font size for city name labels. Default is 9px, which is small and subtle text. Larger sizes (12–16px) make city names more readable in presentations but may cause more label overlap in dense urban areas. Labels are rendered as MapLibre text symbols with automatic collision detection that hides overlapping labels. |
| Label color | Color picker | Sets the text color for city name labels. Default is medium grey (#888888). Darker colors make labels more prominent; lighter colors keep them subtle and secondary to your data markers. |
| Label halo width | Slider (0–3.0) | Controls the width of the white outline around city label text. Default is 1 (a subtle halo). Higher values improve readability when labels sit on top of complex backgrounds (boundaries, roads). Set to 0 to remove the halo entirely for a cleaner look. |
| Label halo color | Color picker | Sets the halo color for city labels. Default is white (#FFFFFF). The halo creates a text outline that improves readability by separating the label text from the map background beneath it. |
| Label position | Dropdown | Controls where city labels appear relative to their marker dot. Above places the label centered above the marker (the default). Right places the label to the right of the marker. Right positioning can reduce overlap when cities are close together vertically, since labels extend horizontally instead of stacking. |
Enhance with Base Map
This section controls how much of the underlying base map is visible through the focus mode overlay. It has two levels of control:
The top half lets you selectively show individual base map features (labels, highway shields, roads) through the focus overlay, with dedicated style controls for each. This is the most common approach — you might want city labels and highway shields visible through the focus overlay without showing the full road network.
The bottom half enables full base map rendering within the focus area, revealing everything (terrain, roads, buildings, water detail) with complete theme customization. This provides maximum geographic detail but removes the clean, isolated look that makes Focus Mode distinctive.
Both halves modify the same underlying base map — the difference is the granularity of control.
Show Base Map Layers
| Feature | Control | Description |
|---|---|---|
| Country labels | Checkbox | Toggles country name labels from the base map within the focus area. Default is ON. These are the large country name text labels from the vector tiles (e.g. "UNITED STATES"). Shows independently from the focus theme's own label rendering. Useful for orienting viewers, especially on maps that include neighboring countries. |
| State / region labels | Checkbox | Toggles state and region name labels from the base map. Default is ON. Shows state/province names within the focused country and surrounding area. Useful for providing administrative context, especially in large countries where state names help viewers locate themselves. |
| City & other labels | Checkbox | Toggles city name labels, POI labels, and other text from the base map. Default is OFF. When enabled, the base map's built-in city and town labels appear through the focus overlay. This supplements (or can replace) the Local Cities system from Section 3.4, with the difference being that base map labels come from vector tile data and follow standard map labeling rules. |
| Highway shields | Checkbox | Toggles highway route number shields from the base map. Default is OFF. When enabled, Interstate shield icons and generic route markers appear on highways within the focus area. Turning this on also reveals additional controls (below) for customizing shield appearance. |
| Roads | Checkbox | Toggles base map road lines through the focus overlay. Default is OFF. When enabled, the transportation network (highways, major roads, minor roads) becomes visible within the focused country. Turning this on also reveals road style controls (below) for customizing road appearance. |
Road Style (shown when Roads is ON)
| Feature | Control | Description |
|---|---|---|
| Color | Color picker + hex | Sets the color for all road lines visible through the focus overlay. Default is light grey (#CCCCCC). This applies uniformly to all road types (highways, major, minor, links, other). Light grey roads provide transportation context without competing with your data markers. |
| Width | Slider (0.2–3.0x) | Multiplies the width of all road lines through the focus overlay. At 0.2x, roads are barely visible thin lines. At 3.0x, roads are very prominent thick lines. Properly handles the complex interpolation expressions in road line-width definitions, so width scaling works correctly at all zoom levels. |
Shield Style (shown when Highway shields is ON)
| Feature | Control | Description |
|---|---|---|
| Text color | Color picker + hex | Sets the text color for highway shield route numbers within the focus area. Default is muted rose-grey (#938a8d). |
| Size | Slider (0.5–2.0x) | Scales both the shield text and icon simultaneously. Applies the multiplier to both text size (base 8px) and icon size (base 0.8). Larger values make shields more prominent and readable at lower zoom levels. |
Label Style
| Feature | Control | Description |
|---|---|---|
| Label size | Slider (0.5–2.0x) | Scales all base map label text visible through the focus overlay. At 1.0x, labels render at their default size. Adjust this to match the visual weight you want for the focus presentation. |
| Label halo | Slider (0–4.0) | Controls the text outline width around all base map labels in the focus area. Higher values improve readability when labels sit on top of complex focus backgrounds (boundaries, colored fills). |
Full Base Map
| Feature | Control | Description |
|---|---|---|
| Show base map through focus | Checkbox | Master toggle that reveals the complete base map within the focused country's boundary. When enabled, the target country fill is removed so the full base map (earth, water, roads, parks, buildings — everything) shows through inside the country's outline. This provides maximum geographic detail but sacrifices the clean, isolated look of standard Focus Mode. All customization controls below become active when checked. Use this when your audience needs to see full geographic context within the focused country. |
| Base Map Theme | Dropdown | Selects an independent base theme for the focus mode base map, separate from the regular mode theme. This means you can use a different visual style in Focus Mode (e.g. a Dark base with a Focus White overlay). Same theme options as Regular Mode: Light, White, Grayscale, Dark, Black, plus any custom themes. |
| Colors (8 keys) | Color picker + hex | Same 8 color controls as the regular mode Customize Theme (Earth, Water, Parks, Roads, Buildings, Boundaries, Label text, Label halo). These modify the base map colors within the focus area only and don't affect your regular mode customizations. |
| Road width | Slider (0.2–3.0x) | Multiplies all road line widths in the focus base map. Works identically to the regular mode road width control but only affects the focus mode view. |
| Boundary width | Slider (0.2–3.0x) | Multiplies all boundary line widths in the focus base map. |
| Reset to defaults | Button | Clears all full-base-map customizations, turns off "Show base map through focus", removes any live theme modifications, and restores the focus theme's default appearance. |