PortalJS Add Map
FreeRender GeoJSON datasets on interactive Leaflet maps.
Free · Opens the source repo
What PortalJS Add Map does
PortalJS Add Map is a skill designed to enhance your dataset showcases by integrating interactive Leaflet maps. This skill works within a portaljs-catalog portal, allowing you to display geographic data visually. It installs the necessary dependencies, including react-leaflet and leaflet, and creates a reusable Map component that can be rendered in the Views section of your dataset's showcase. The skill is particularly useful when you have datasets that contain geographic information formatted as GeoJSON.
To use this skill effectively, you need to have a scaffolded PortalJS portal and a dataset registered in datasets.json with the correct format. The skill facilitates the registration of new GeoJSON datasets if they are not already present, ensuring that your data is ready for visualization. Once set up, the skill will render the map under the Views heading for the specified dataset, providing an interactive experience for users to explore geographic data alongside the default metadata and download options.
This skill is particularly beneficial for developers and designers who work with geographic data and want to provide a more engaging way for users to interact with that data. By leveraging the capabilities of Leaflet, you can create dynamic and responsive maps that enhance the usability of your datasets. The skill also includes error handling to guide users through common issues, ensuring a smoother implementation process.
Overall, PortalJS Add Map is an essential tool for anyone looking to add geographic visualizations to their datasets, making it easier to communicate complex data in an accessible format.
When to use it
Use this skill when you need to visualize geographic data in a dataset showcase, particularly when the data is in GeoJSON format.
When not to use it
This skill is not suitable for datasets that do not contain geographic data or are not formatted as GeoJSON.
What you can build with it
Visualizing Park Boundaries
Easily add an interactive map to showcase park boundaries using an existing GeoJSON dataset.
Registering and Mapping Local Data
Register a local GeoJSON file for bike routes and visualize it in your dataset showcase.
Mapping Remote GeoJSON Sources
Integrate a remote GeoJSON URL to display district boundaries interactively in your portal.
How to install PortalJS Add Map
View source1. Install with the skills CLI
npx skills add jeremylongshore/claude-code-plugins-plus-skills/portaljs-add-map --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by jeremylongshorePortalJS — Add Map
Overview
Add an interactive Leaflet map as a view on a dataset's showcase in a
portaljs-catalog portal. The skill installs react-leaflet/leaflet (added directly —
never @portaljs/components), writes a reusable Map component split across
MapView.tsx (the Leaflet code) and Map.tsx (a dynamic(..., { ssr: false }) wrapper,
since Leaflet touches window at module load), and renders <Map /> into the Views
section of the showcase route pages/[owner]/[slug].tsx for one chosen GeoJSON dataset.
The dataset should already carry format: "geojson" in datasets.json; if it doesn't
exist yet, the skill can copy the file and register it first.
Prerequisites
- A scaffolded PortalJS portal (see
portaljs-new-portal). - The target dataset registered in
datasets.jsonwithformat: "geojson"(seeportaljs-add-dataset), or a GeoJSON source file/URL to register. - Node 18+ and npm available in the portal directory.
Instructions
The canonical, full step-by-step workflow is
.claude/commands/portaljs-add-map.md — the
single source of truth. Read and follow it when executing. Summary:
- Gather input — dataset slug (or a GeoJSON source to register), portal directory. If any is missing, interview the user; never dead-end on a missing value.
- Validate the portal directory (
datasets.json,package.json,pages/[owner]/[slug].tsxmust exist). - Resolve the dataset from
datasets.json, or validate and register a new GeoJSON source (copy to/public/data/, append a manifest entry). - Install map dependencies:
npm install react-leaflet@^5 leaflet@^1.9andnpm install -D @types/leaflet(skip if already present). - Write
components/MapView.tsxandcomponents/Map.tsx(idempotent — skip ifMap.tsxalready exists). - Render
<Map />into the Views section, gated on the dataset's(namespace, slug)so other showcases are unaffected. Extend an existing view-dispatch block, do not overwrite it. - Verify with
npx tsc --noEmit(nevernext buildagainst a live dev server). - Report the component, route, and dependency added.
Output
- Created:
components/MapView.tsxandcomponents/Map.tsx(Leaflet wrapper, if absent);public/data/<slug>.geojson(only when registering a new dataset). - Modified:
pages/[owner]/[slug].tsx(import + gated<Map />in Views);datasets.json(only when registering a new dataset);package.json(react-leaflet,leaflet,@types/leaflet). - Verified:
npx tsc --noEmitpasses. - Result: the map renders at
/@<namespace>/<slug>under a "Views" heading.
Error Handling
| Symptom | Cause | Fix |
|---|---|---|
| Dataset not found or not GeoJSON | Slug missing from datasets.json or format is tabular | List GeoJSON datasets and re-prompt; suggest portaljs-add-chart for tabular data. |
| Source fetch/copy fails | URL returns non-200 or local path missing | Report the HTTP status or missing path; ask for a corrected source. |
| "Not valid GeoJSON" | Parsed JSON type isn't a Feature/geometry type | Tell the user and point to portaljs-add-dataset for tabular data. |
tsc failure | Bad import path or gating condition | Fix the first reported error before reporting success. |
| Map appears on every dataset | View not gated on (namespace, slug) | Wrap the <Map /> render in the dataset check shown in the Instructions. |
| Features render in the wrong place | Data isn't WGS84 (EPSG:4326) lon/lat | Reproject the source data to WGS84 before adding. |
| Slow render | Thousands of features in one file (>5MB) | Simplify geometries (e.g. mapshaper) before adding. |
Examples
Example 1 — Map an already-registered dataset
/portaljs-add-map dataset=park-boundaries
Example 2 — Register a local GeoJSON file and map it
/portaljs-add-map source=./data/bike-routes.geojson slug=bike-routes name="Bike Routes"
Example 3 — Register a remote GeoJSON URL and map it
/portaljs-add-map source=https://example.com/districts.geojson slug=districts namespace=reference
Resources
- Full workflow:
.claude/commands/portaljs-add-map.md - Map props and troubleshooting reference:
references/reference.md - Related skills:
portaljs-add-dataset,portaljs-add-chart,portaljs-define-schema - react-leaflet documentation: https://react-leaflet.js.org/
Frequently asked questions about PortalJS Add Map
Similar skills
D3.js Visualisation
Create interactive and custom data visualisations with D3.js.
LeRobot Visualizer
Easily visualize and inspect LeRobot datasets in your browser.
Social Media Dashboard
Create a streamlined analytics dashboard for social media.
Seaborn Statistical Visualization
Create attractive statistical graphics with minimal code.
Scientific Visualization
Create publication-ready scientific figures with integrity.
Matplotlib
Create highly customizable plots for scientific visualization.