mcpField
M
mapcn

mapcn

github.com/anmolsaini16その他12.3k39 回インストール5 日前に更新
リポジトリ

mapcn について

mapcn は、shadcn CLI を使って MapLibre GL ベースの地図コンポーネントやページ全体のマップブロックを React プロジェクトに追加するスキルです。用途に合う地図パターンを選び、必要なものだけを導入できます。

主な機能

  1. 01React 地図コンポーネント
  2. 02ページ全体のマップブロック
  3. 03shadcn CLI による導入
  4. 04マーカー、ルート、弧線、クラスタ
  5. 05GeoJSON レイヤーとカスタムスタイル

活用シーン

  1. 01アプリに店舗検索地図を追加
  2. 02配送ルートと進捗の表示
  3. 03地図上で地域統計を可視化
  4. 04地点間のつながりを表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/anmolsaini16/mapcn --skill mapcn

インストール後、Claude Code で/mapcnを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
blocks.md
components.md
patterns.md

詳細

mapcn

shadcn CLI でインストールする、React 用の地図コンポーネントです。すべて components/ui/map.tsx の1つのファイルに収められており、MapLibre GL を基盤とし、プロジェクトの shadcn テーマに合わせてスタイルが設定されています。ブロックは、これらのコンポーネントを使って構築されたページ全体（ダッシュボード、トラッカー、ロケーターなど）です。

ユーザーが地図の用途を指定していない場合

アプリで mapcn をどのように使えるか、または地図をどこに配置できるかを尋ねられた場合：

  1. スタック（package.json、components.json）を確認し、ページとデータモデルに目を通します。
  2. 地図を活用できる箇所を、目立つものから2～4つ提案します。それぞれ、コード内に実際にある要素と関連付け、使用する機能を明示します。例：
    • 住所や場所から、店舗検索またはポップアップ付きマーカーにつなげる
    • 注文や配送から、配送トラッカー（MapRoute + RouteProgress）につなげる
    • 国別または地域別の統計から、コロプレスマップまたは分析マップにつなげる
    • 場所同士のつながり（航空便、交通、サプライチェーンなど）から、MapArc または物流ネットワークにつなげる
  3. ユーザーが選んだものだけをインストールして構築します。

作業を始める前に

  1. shadcn/ui と Tailwind CSS。 components.json を確認します。ファイルがない場合、mapcn には shadcn/ui が必要であることをユーザーに伝え、最初に npx shadcn@latest init を実行するか尋ねます。
  2. すでにインストールされていますか？ components.json の aliases.ui（通常は @/components/ui）に map.tsx があるか確認します。すでにあれば再インストールせず、ファイルを読みます。

インストール

npx shadcn@latest add @mapcn/map

これにより components/ui/map.tsx が追加され、maplibre-gl がインストールされ、グローバル CSS にポップアップとアトリビューション用のスタイルがいくつか追加されます。ブロックも同じ方法で npx shadcn@latest add @mapcn/<block> を実行してインストールでき、地図コンポーネントも自動的に取り込まれます。ブロックファイルは Next.js App Router のパス（app/<route>/page.tsx）にインストールされます。それ以外の構成では、ファイルを移動してルートを登録してください。詳しくは references/blocks.md を参照してください。

map.tsx を手書きしたり、貼り付けたりしないでください。CLI が失敗した場合は https://mapcn.dev/r/map.json を読み、記載されている依存関係をインストールして、何が問題だったかを報告してください。

ルール

  • 地図に高さを設定します。 <Map> は親要素全体に広がります。高さのない親要素では何も表示されません。<div className="h-[400px]"> または <Card className="h-[320px] overflow-hidden p-0"> で囲んでください。
  • 座標は [longitude, latitude] の順です。 center={[-74.006, 40.7128]} はニューヨークです。マーカーには longitude と latitude の props を指定します。順序を逆にするのが最もよくある不具合です。
  • クライアントコンポーネントのみを使います。 map.tsx にはすでに "use client" が設定されています。useMap、ref、または地図のイベントハンドラーを使うコンポーネントにも設定が必要です。Next.js では、データ取得をサーバーコンポーネントに任せ、データを渡してください。
  • props はインストール済みの map.tsx に記載されています。 すべての prop に JSDoc コメントがあります。そこにある型を確認し、推測で判断しないでください。ユーザーから依頼がない限り、ファイルを編集しないでください。
  • ルートはデータを取得しません。 MapRoute は渡された座標を描画するだけです。RouteProgress と RouteMarker はその中に配置し、同じラインを基に動作します。親コンポーネントでルート案内（OSRM、Mapbox、Google）を取得し、[lng, lat][] を渡してください。references/components.md の Routes の下にある OSRM の例を参照してください。MapGeoJSON と MapClusterLayer には GeoJSON オブジェクトまたは URL を渡します。
  • 独自の UI ではテーマカラーを使います。 マーカーのコンテンツ、ポップアップ、オーバーレイは通常の React なので、bg-background、text-muted-foreground、border などを使ってください。ラインや塗りつぶしのデータカラー（MapRoute color、paint props）には実際の色を指定できます。
  • テーマはアプリに追従します。 ベースマップは、<html> の dark または light クラス、あるいは data-theme 属性に応じてライト／ダークが切り替わります（next-themes はそのまま動作します）。これらがない場合はシステム設定に従います。テーマを固定する場合に限り、theme を渡してください。
  • MapLibre の機能を直接使う場合： <Map> 内の useMap() は { map, isLoaded } を返します。または <Map> に ref（MapRef）を渡します。ソースやレイヤーを追加する前に isLoaded を待ち、クリーンアップ時にそれらを削除してください。

ベースマップの選択

  • デフォルトの無料 CARTO ベースマップタイルを使用するには、blank を指定せずに <Map> を使用します。店舗検索、配送追跡、物流マップ、住所マップなど、道路や地名ラベル、地理的なコンテキストをユーザーに表示する必要がある UI に最適です。
  • 透明でタイルのないキャンバスには <Map blank> を使用します。単独では何も描画されないため、MapGeoJSON、MapArc、マーカー、クラスター、カスタム MapLibre レイヤーなど、独自のレイヤーを追加してください。コロプレスマップ、アークマップ、ドットマップ、ダッシュボード、データビジュアライゼーションなど、データによって地理情報を表現する場合に最適です。
  • 国または国境のみを表示する空白のマップが必要な場合は、<Map blank> と <MapGeoJSON data={WORLD_GEOJSON} /> を使用します。世界各国のデータには、Natural Earth の GeoJSON ソースが適しています。https://cdn.jsdelivr.net/gh/nvkelso/[email protected]/geojson/ne_110m_admin_0_countries.geojson を使用できます。ユーザーは独自の GeoJSON URL または GeoJSON オブジェクトを MapGeoJSON に渡すこともできます。
  • カスタムの MapLibre 互換スタイル URL またはスタイルオブジェクトには、styles プロパティを使用します。たとえば、MapTiler、OpenFreeMap、CARTO、セルフホストのスタイルを指定できます。styles を明示的に指定すると、blank より優先されます。

コンポーネント

すべて @/components/ui/map からインポートします。

  • マップ： Map、useMap
  • コントロール： MapControls
  • マーカー： MapMarker、MarkerContent、MarkerPopup、MarkerTooltip、MarkerLabel
  • ポップアップ： MapPopup
  • ルート： MapRoute、RouteProgress、RouteMarker
  • アーク： MapArc
  • GeoJSON： MapGeoJSON
  • クラスター： MapClusterLayer

参考資料

タスクに必要な箇所だけを読んでください。インストール済みのスキルではなく URL から読む場合も、同じファイルが https://raw.githubusercontent.com/AnmolSaini16/mapcn/main/skills/mapcn/references/ にあります。

  • references/components.md：すべてのエクスポート、その用途、ドキュメントページ、サンプルソースへのリンク
  • references/blocks.md：各ブロックの概要、追加されるファイル、インストールコマンド
  • references/patterns.md：ビューポートの制御、フライ・トゥー、ルートの取得、カスタムレイヤー、大規模データセット、Web Worker、CSP

コメント

Markdown 対応