PricingLoginStart free
Sveltejs Academy · レッスン

Svelte ActionsによるLeafletマップ

Svelte actionを通じてLeafletのマップインスタンスを初期化・制御します。

レッスン 3/413 ステップ

「Svelte ActionsによるLeafletマップ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

Leafletを使う理由

Leafletは、小さく成熟したオープンソースの地図ライブラリで、Svelteと相性よく動作します。

インストール

LeafletとそのCSSを追加します。

npm install leaflet
@import "leaflet/dist/leaflet.css";

アクションパターン

Leafletの初期化をSvelteアクションでラップします。

export function leafletMap(node, options) {
  const map = L.map(node).setView(options.center, options.zoom);
  L.tileLayer("https://...{z}/{x}/{y}.png").addTo(map);
  return { destroy() { map.remove(); } };
}

コンポーネントで使う

divにアクションを適用します。

<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />

更新

パラメーターの変更に反応するupdate関数を返します。

update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }

マーカー

プログラムからマーカーを追加するか、コンテキストを共有するSvelteの子コンポーネントで追加します。

クリーンアップ

リソースを解放するため、destroyで必ずmap.remove()を呼び出します。

SSRの注意点

Leafletはwindow/documentを使用します。onMountで保護するか、ssr = falseを設定します。

タイルプロバイダー

タイルには、OpenStreetMap、Mapbox、Stadiaなどのプロバイダーを選びます。

パフォーマンス

マーカーが多い場合は、クラスタリングプラグインを使います。

コンポーネントラッパー

再利用可能でパラメーター化された地図にするため、アクションをコンポーネントでラップします。

クイックチェック

Leafletにアクションを使うのはなぜですか。

対話的なレッスンで答える

まとめ

LeafletをSvelteアクションでラップします。マウント時に初期化し、updateで変更に対応し、destroyでクリーンアップします。windowにアクセスするため、SSRは避けます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163
無料で学習を始めるコース全体を表示

よくある質問

「Svelte ActionsによるLeafletマップ」レッスンは無料ですか？

はい。「Svelte ActionsによるLeafletマップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「Svelte ActionsによるLeafletマップ」で何を学びますか？

Svelte actionを通じてLeafletのマップインスタンスを初期化・制御します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Svelte ActionsによるLeafletマップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. SvelteKitでTailwind CSSを使う
  2. SvelteでのD3.jsチャート
  3. Svelte ActionsによるLeafletマップ
  4. リッチテキストエディター：Tiptap
← Sveltejs Academyに戻る