# Portaljs Add Map

Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a...

- Repository: https://github.com/datopian/portaljs (2370 stars)
- Category: Data and ML
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add datopian/portaljs --skill portaljs-add-map -g -a claude-code -y`
Codex: `npx skills add datopian/portaljs --skill portaljs-add-map -g -a codex -y`
Cursor: `npx skills add datopian/portaljs --skill portaljs-add-map -g -a cursor -y`
Gemini CLI: `npx skills add datopian/portaljs --skill portaljs-add-map -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add datopian/portaljs`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 `<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.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`](https://github.com/datopian/portaljs/blob/main/.claude/commands/portaljs-add-map.md), the
single source of truth. Read and follow it when executing. Summary:

The rest: https://github.com/datopian/portaljs/blob/HEAD/skills/portaljs-add-map/SKILL.md