portaljs-add-map

Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and a Map component, then renders the map for the chosen dataset. Use when a dataset's data is geographic and a map view is needed alongside the showcase's default metadata and download.

v1.0.0
Datopian
MIT

Allowed Tools

ReadWriteEditBash(npm:*)Bash(npx:*)WebFetch

Provided by Plugin

portaljs

Agentic skills for building PortalJS data portals — recommend an architecture, scaffold a portal, add datasets, charts, and maps, connect a CKAN backend, deploy, and audit data quality.

community v0.1.0
View Plugin

Installation

This skill is included in the portaljs plugin:

/plugin install portaljs@claude-code-plugins-plus

Click to copy

Instructions

PortalJS — 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 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.json with format: "geojson" (see

portaljs-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:

  1. 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.

  1. Validate the portal directory (datasets.json, package.json,

pages/[owner]/[slug].tsx must exist).

  1. Resolve the dataset from datasets.json, or validate and register a new GeoJSON

source (copy to /public/data/, append a manifest entry).

  1. Install map dependencies: npm install react-leaflet@^5 leaflet@^1.9 and

npm install -D @types/leaflet (skip if already present).

  1. Write components/MapView.tsx and components/Map.tsx (idempotent — skip if

Map.tsx already exists).

  1. Render 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.

  1. Verify with npx tsc --noEmit (never next build against a live dev server).
  2. Report the component, route, and dependency added.

Output

  • Created: components/MapView.tsx and components/Map.tsx (Leaflet wrapper, if

absent); public/data/.geojson (only when registering a new dataset).

  • Modified: pages/[owner]/[slug].tsx (import + gated in Views);

datasets.json (only when registering a new dataset); package.json

(react-leaflet, leaflet, @types/leaflet).

  • Verified: npx tsc --noEmit passes.
  • Result: the map renders at /@/ 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 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

Ready to use portaljs?

Related Skills

agent-patterns

'Execute this skill should be used when the user asks about "SPAWN REQUEST.

Read

anti-deception

Use BEFORE responding when the user's request shows pressure to validate or agree ("tell them what they want", "make them happy", "convince them"), manufactured urgency (artificial deadline), authority appeals (citing investors, advisors, lawyers, experts), demands to certify without evidence, requests to soften an honest assessment, "help me convince X of Y" or "how do I get X to agree" framings where Y is dubious, asking you to commit to numbers beyond data, framing a wrong assumption as fact, or any setup where the obvious helpful answer would compromise honesty.

mcp__ejentum__anti-deception

api-contract

'Configure this skill should be used when the user asks about "API contract",.

Read

arcgis-to-portaljs

Migrate a whole ArcGIS Hub site into a PortalJS Arc portal end-to-end.

ReadWriteEdit

boycott-filter

"Personal boycott list \u2014 users can conversationally tell the agent\.

Bash(curl:*)

claude-reflect

'Execute self-learning system that captures corrections during sessions.

ReadWriteEdit