本文へ移動
cccskills
無料GitHub で公開

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.

datopian/portaljs
インストール方法を見る

含まれるファイル（2）

  • SKILL.md5.3 KB
  • references/reference.md2.5 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 — 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.
  2. Validate the portal directory (datasets.json, package.json, pages/[owner]/[slug].tsx must exist).
  3. Resolve the dataset from datasets.json, or validate and register a new GeoJSON source (copy to /public/data/, append a manifest entry).
  4. Install map dependencies: npm install react-leaflet@^5 leaflet@^1.9 and npm install -D @types/leaflet (skip if already present).
  5. Write components/MapView.tsx and components/Map.tsx (idempotent — skip if Map.tsx already exists).
  6. 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.
  7. Verify with npx tsc --noEmit (never next build against a live dev server).
  8. Report the component, route, and dependency added.

Output

  • Created: components/MapView.tsx and components/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 --noEmit passes.
  • Result: the map renders at /@<namespace>/<slug> under a "Views" heading.

Error Handling

SymptomCauseFix
Dataset not found or not GeoJSONSlug missing from datasets.json or format is tabularList GeoJSON datasets and re-prompt; suggest portaljs-add-chart for tabular data.
Source fetch/copy failsURL returns non-200 or local path missingReport the HTTP status or missing path; ask for a corrected source.
"Not valid GeoJSON"Parsed JSON type isn't a Feature/geometry typeTell the user and point to portaljs-add-dataset for tabular data.
tsc failureBad import path or gating conditionFix the first reported error before reporting success.
Map appears on every datasetView not gated on (namespace, slug)Wrap the <Map /> render in the dataset check shown in the Instructions.
Features render in the wrong placeData isn't WGS84 (EPSG:4326) lon/latReproject the source data to WGS84 before adding.
Slow renderThousands 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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

arcgis-to-portaljs

無料

Migrate a whole ArcGIS Hub site into a PortalJS Arc portal end-to-end. Harvests the Hub /data.json (DCAT-US) inventory, exports every FeatureService layer through the ArcGIS REST query API with resultOffset paging, converts each to the serverless dual tier (PMTiles render + GeoParquet query) with tabular items to Parquet, pushes everything to Cloudflare R2 via Git LFS, appends dual-tier datasets.json entries, and writes a source-vs-derived parity report. Use to move a City or sector ArcGIS Hub open-data portal onto PortalJS with no server-side compute.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

portaljs-add-chart

無料

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

portaljs-add-dataset

無料

Add a dataset (CSV, TSV, JSON, or GeoJSON) to an existing PortalJS portal. Appends an entry to datasets.json so the catalog and showcase render it automatically; routes the data by source (local file vs remote URL) — R2 via Git LFS by default, remote URLs by passthrough. Use when registering a new dataset in a scaffolded portal.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

portaljs-add-dcat

無料

Make a PortalJS portal harvestable by national/EU/US open-data portals — emit standards-compliant DCAT catalog feeds (DCAT 2/3, DCAT-AP, DCAT-US, national profiles) in JSON-LD, Turtle, and RDF/XML at build, with autodiscovery and per-profile conformance checking. Use when a portal needs to be harvested by data.europa.eu, data.gov, or a national open-data catalog.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

portaljs-add-geo

無料

Auto-ingest a geospatial file (GeoJSON, Shapefile, GeoPackage, KML/KMZ, FlatGeobuf, CSV-with-geometry) into a PortalJS portal on the user's own machine, with no server. Normalizes CRS to EPSG:4326, derives a PMTiles render tier and a GeoParquet query tier, pushes all three artifacts to Cloudflare R2 via Git LFS, and appends one dual-tier datasets.json entry the showcase auto-renders. Use when the source is a vector geo format that needs a map or spatial-query view.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

portaljs-add-resource

無料

Add another file (resource) to an EXISTING dataset in a PortalJS portal — a data dictionary, methodology, or an additional data file. Turns a single-file dataset into a multi-resource one; the showcase renders a section per resource. Use when a dataset needs a second file, such as a data dictionary, methodology doc, or an additional period's data.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3602026年10月8日 更新

datopian のスキルをすべて見る

このスキルの問題を報告する