Getting Started

pitchmappr is a browser-based mapping tool built for finance, legal, and investment banking professionals who need clean, presentation-ready maps. The core workflow is straightforward: add locations to a map, style the map to match your presentation aesthetic, then export high-resolution images that drop directly into PowerPoint, Keynote, or print layouts.

The tool runs entirely in your browser. There's no account to create, no server storing your data, and no subscription required to use the core features. Your project data lives in a JSON file that you export and re-import as needed.

How the Interface Is Organized

pitchmappr uses a six-tab sidebar layout, accessed from the icon rail on the left side of the screen. Each tab groups related controls together:

Project — Metadata about your project (name, client, job number) and file info. Think of this as the "properties" panel for your map file.

Map — Everything that controls how the base map looks, from theme selection to individual layer visibility. This tab has two modes: Regular Mode (standard interactive map) and Focus Mode (single-country isolation view). A toggle at the top of the panel switches between them.

Data — Where you add, import, and manage location markers. This is your data entry point.

Markers & Labels — Visual styling for your location markers (color, shape, size) and their text labels (font, position, color). Controls how your data points look on the map.

Views — Save specific map positions with crop framing so you can consistently export the same view. Essential for producing multiple versions of the same map.

Export — Output controls for PNG, Hi-Res PNG, SVG, and JSON files. Also includes the d3-geo projection export system for non-Mercator map projections.

Header Bar

The top navigation bar displays at-a-glance project information and is always visible while you work.

Map Controls

Controls that appear directly on the map canvas, outside the sidebar.

Geolocation

When you first open pitchmappr, it requests your browser's location permission. If granted, the map automatically centers on your approximate geographic area at zoom level 5. If denied or timed out (5-second limit), the map defaults to a world view centered at coordinates [10, 25] at zoom level 2. This initial positioning is a convenience feature only and does not affect any project data or exports.

Toast Notifications

Brief status messages appear at the bottom center of the screen to confirm actions or report errors. Toasts auto-dismiss after about 2.5 seconds. They're color-coded by type: blue border for general info ("Map style: Light"), green for success ("Project loaded"), yellow for warnings, and red for errors ("Max locations reached"). You don't need to interact with toasts; they're informational only.

Quick Start Guide

This walkthrough takes you from a blank map to an exported presentation image. It covers the core workflow that most users will follow on every project.

Step 1 — Open pitchmappr. Navigate to the app URL in your browser. The map loads centered on your approximate location (if you allow browser geolocation) or on a default world view. The sidebar is on the left with six tab icons.

Step 2 — Name your project. Click the Project tab (document icon, top of the rail). Enter a Project Name (e.g. "Acme Corp — US Offices") and optionally a Job/Ref Number. The Job Number becomes your export filename prefix, so something like "PRJ-2026-042" keeps exports organized automatically.

Step 3 — Add locations. Click the Data tab (pin icon). In the Add Location section, type a city name, address, or place into the search field and press Enter. A marker appears on the map immediately. Repeat for each location. For bulk entry, expand the Import Locations section and use "One per line" to paste a list, or "CSV file" to upload a spreadsheet with your data.

Step 4 — Organize into datasets (optional). If your locations fall into distinct groups (e.g. "Current Offices" vs. "Target Acquisitions"), expand Dataset Settings in the Data tab and create additional datasets. When adding locations, select the appropriate dataset from the dropdown. Each dataset gets its own color and shape.

Step 5 — Choose a base theme. Click the Map tab (map icon). The Base Map Theme dropdown at the top sets the overall look. For a clean presentation map, try "Clean Minimal" or "Slate Finance." For dark slide backgrounds, try "Dark Boardroom" or "Midnight Blue." You can always change this later.

Step 6 — Clean up layers (optional). Still in the Map tab, expand Base Map Layers. For most presentation maps, consider hiding Minor Roads, Railways, all Road Labels, all Water Labels, and Points of Interest. This removes visual noise and keeps the audience focused on your markers.

Step 7 — Style your markers. Click the Markers tab (circles icon). Set marker colors for each dataset (use the color swatches or enter hex codes for brand colors). Choose shapes if needed (circle, diamond, star). Adjust marker size and label settings to taste.

Step 8 — Frame and save a view. Click the Views tab (eye icon). Select a crop ratio (16:9 for widescreen slides is most common). Check "Preview crop frame" to see the export boundaries overlaid on the map. Pan and zoom until your locations are framed the way you want them. Enter a view name (e.g. "US Overview") and click Save.

Step 9 — Export. Click the Export tab (download icon). In the Export Views section, click "Hi-Res PNG" next to your saved view. A high-resolution, precisely cropped image downloads to your computer. For transparent backgrounds (so the map sits cleanly on any slide color), check "Transparent background" before exporting.

Step 10 — Save your project. In the Export tab, scroll to the JSON section and click "Export JSON." This downloads a .json file containing your entire project. To resume work later, use "Import JSON" to reload the file.

That's it. The exported PNG drops directly into PowerPoint or Keynote. For Focus Mode maps (single-country isolation), use the mode toggle at the top of the Map panel to switch to Focus Mode, select a country, and follow the same save/export workflow.

Table of Contents

1. Project Tab
2. Map Tab — Regular Mode
3. Map Tab — Focus Mode
4. Data Tab
5. Markers Tab
6. Views Tab
7. Export Tab
8. Theme System
9. Theme Editor (mapprstyle.html)
10. Built-in Themes
11. Marker Color Schemes
12. Data Models
13. System Constants

10-Step Quick Start

This walkthrough takes you from a blank map to an exported presentation image. It covers the core workflow that most users will follow on every project.

Step 1 — Open pitchmappr. Navigate to the app URL in your browser. The map loads centered on your approximate location (if you allow browser geolocation) or on a default world view. The sidebar is on the left with six tab icons.

Step 2 — Name your project. Click the Project tab (document icon, top of the rail). Enter a Project Name (e.g. "Acme Corp — US Offices") and optionally a Job/Ref Number. The Job Number becomes your export filename prefix, so something like "PRJ-2026-042" keeps exports organized automatically.

Step 3 — Add locations. Click the Data tab (pin icon). In the Add Location section, type a city name, address, or place into the search field and press Enter. A marker appears on the map immediately. Repeat for each location. For bulk entry, expand the Import Locations section and use "One per line" to paste a list, or "CSV file" to upload a spreadsheet with your data.

Step 4 — Organize into datasets (optional). If your locations fall into distinct groups (e.g. "Current Offices" vs. "Target Acquisitions"), expand Dataset Settings in the Data tab and create additional datasets. When adding locations, select the appropriate dataset from the dropdown. Each dataset gets its own color and shape.

Step 5 — Choose a base theme. Click the Map tab (map icon). The Base Map Theme dropdown at the top sets the overall look. For a clean presentation map, try "Clean Minimal" or "Slate Finance." For dark slide backgrounds, try "Dark Boardroom" or "Midnight Blue." You can always change this later.

Step 6 — Clean up layers (optional). Still in the Map tab, expand Base Map Layers. For most presentation maps, consider hiding Minor Roads, Railways, all Road Labels, all Water Labels, and Points of Interest. This removes visual noise and keeps the audience focused on your markers.

Step 7 — Style your markers. Click the Markers tab (circles icon). Set marker colors for each dataset (use the color swatches or enter hex codes for brand colors). Choose shapes if needed (circle, diamond, star). Adjust marker size and label settings to taste.

Step 8 — Frame and save a view. Click the Views tab (eye icon). Select a crop ratio (16:9 for widescreen slides is most common). Check "Preview crop frame" to see the export boundaries overlaid on the map. Pan and zoom until your locations are framed the way you want them. Enter a view name (e.g. "US Overview") and click Save.

Step 9 — Export. Click the Export tab (download icon). In the Export Views section, click "Hi-Res PNG" next to your saved view. A high-resolution, precisely cropped image downloads to your computer. For transparent backgrounds (so the map sits cleanly on any slide color), check "Transparent background" before exporting.

Step 10 — Save your project. In the Export tab, scroll to the JSON section and click "Export JSON." This downloads a .json file containing your entire project. To resume work later, use "Import JSON" to reload the file.

That's it. The exported PNG drops directly into PowerPoint or Keynote. For Focus Mode maps (single-country isolation), use the mode toggle at the top of the Map panel to switch to Focus Mode, select a country, and follow the same save/export workflow.