MapsVG WordPressプラグインを使用すると、機(jī)能が豊富なインタラクティブマップをすばやく簡(jiǎn)単に作成できます。インタラクティブマップは、特定の場(chǎng)所の影響を視覚化する必要がある場(chǎng)合、プロジェクトの一般的な要件です。すでにWordPressを使用している場(chǎng)合、この強(qiáng)力なプラグインは、生産に入れることができるマップを作成するためのソリューションかもしれません。

インタラクティブマップを?qū)g裝または計(jì)畫(huà)した最後の経験を思い出してください。元のソースからデータをJSONにマップし、それを視覚的なフレームワーク（D3など）に接続するのに多くの時(shí)間がかかると推定するかもしれません。次に、ユーザーがマップ自體と対話(huà)する方法を構(gòu)成することです。これらは非常に多くの開(kāi)発努力です。

次は、マップデータを管理する方法についての質(zhì)問(wèn)です。データは外部ファイルに保存されていますか？データを取得するには、定期的にAPIを呼び出す必要がありますか？このデータをWebサイトのWordPress管理パネルで直接管理することは、他のすべてのWebサイトコンテンツを管理するのと同じように、はるかに簡(jiǎn)単です。コードエディターを開(kāi)いてマップを個(gè)別に維持する必要はありません！

これらは、他の多くの一般的なマップ機(jī)能とともに、MapsVGプラグインに組み込まれており、視覚的なニーズに合わせて複數(shù)の一意のマップを作成できます。このプラグインを掘り下げ、それを使用して、WordPressでインタラクティブなSVGベースのマップを構(gòu)築します。

新しいマップを作成するオプション

MapsVGは、インストールされると、ベクトル、畫(huà)像、またはGoogleマップ機(jī)能に基づいて新しいマップを作成する5つのオプションを提供します。この記事の目的のために、SVG機(jī)能に焦點(diǎn)を當(dāng)てます。

新しいSVGマップオプションには、200近くのジオカカリブ化されていない國(guó)內(nèi)および地域のベクトルマップがあります。このプラグインの無(wú)料バージョンであるMapsVG Liteにより、サイト管理者は、ツールチップ、カスタマイズ可能な詳細(xì)ビュー、および緯度および経度座標(biāo)を介して配置されたマーカーを備えたインタラクティブなマップを作成できます。有料版にアップグレードする（$ 46）は、マップカタログ、統(tǒng)合検索、ロケーションフィルター、マップエリアの詳細(xì)なビュー、WordPressの記事と高度なカスタムフィールドとの統(tǒng)合、カスタムツールチップと輪郭マップ、およびその他の高度な機(jī)能のサポートを提供します。

新しいマップを作成します

OK、新しいSVGベースのマップを作成することを選択しました。ドロップダウンメニューからオプションを選択して、ベクトルマップを作成します?？赡埭扦ⅳ欷?、非調(diào)整マップの代わりにジオカカラブ化されたマップを選択します。地域のタイトルで更新されたGeocalibrationマップ。さらに、地理的座標(biāo)（つまり、経度と緯度）によってマップマーカーを追加するか、座標(biāo)に自動(dòng)的に変換されるアドレスを入力することでマップマーカーを追加できます。

獨(dú)自のカスタムSVGファイルを使用する場(chǎng)合は、 SVGのアップロードオプションを選択します。アップロード後、カスタムファイルは、新しいSVGマップドロップダウンメニューの<kbd>user-uploads/your-file-name.svg</kbd>の下に表示されます。ファイルをプラグインマップにアップロードする前に、ファイルを最適化するための追加の手順を?qū)g行することをお?jiǎng)幛幛筏蓼埂?/p>

1. ハワイなどの複數(shù)のベクトルパスを含む領(lǐng)域は、イラストレーターの複合パスとしてグループ化する必要があります。 Illustratorでは、関連するパスを選択してから、> compositeパス> create （またはcmd 8 ）に移動(dòng)することでこれを行うことができます。
2. レイヤーが明確でユニークな名前を持っていることを確認(rèn)してください。レイヤー名は、テンプレートおよび組織の目的のための領(lǐng)域として使用されます{{{id}}。
3. 次に、テキストエディターでSVGファイルを開(kāi)き、各パスにタイトル屬性を與えます。これは、テンプレート{{title}}の領(lǐng)域として使用されます。

IDおよびタイトルフィールドは、ファイルから抽出されたデフォルトのプロパティであり、個(gè)々のパスに関連付けるために使用されます。プラグインの最新バージョン（現(xiàn)在5.3.7）から始めて、SVGファイルをWordPress管理パネルに直接編集して、各パスのIDとタイトル値を設(shè)定し、パス定義を調(diào)整して新しいパスを描畫(huà)できます。私は個(gè)人的には、Illustratorおよびコードエディターで編集するためのコントロールを好みますが、これはまだ良い選択です。

引き続きプラグインによって提供されるジオカカリブ化マップを使用し、 https：//miracleart.cn/link/e74b103532a9337cc42f051774ac49d4からのエントリを使用してデモを作成しています。

マップスタイルの設(shè)定

準(zhǔn)備が整っていてSVGファイルを選択すると、プラグインインターフェイスが設(shè)定パネルを開(kāi)きます。ここでは、マップ名を設(shè)定し、サイズとサイズを定義し、ツールチップやその他のメイン設(shè)定を有効にします。

[設(shè)定]タブに加えて、特定のマップ機(jī)能を制御および設(shè)定するためのタブも表示されます。次のタブ色に切り替えて、マップテーマを設(shè)定します。

上記のように、マップの充填値とストローク値、および各パスのさまざまなアクティブ狀態(tài)を制御できます。ベクトルベースのマップを使用することの利點(diǎn)！したがって、カスタムマップファイルを作成した場(chǎng)合、イラストレーターに定義されていないように、塗りつぶしとストロークの値を殘すことを好みます。ただし、STROKE幅をUIで効果的に調(diào)整することはできません（SVGの編集と各パスの値を変更する必要があるため）。したがって、イラストレーターに設(shè)定してファイルを再アップロードすることをお?jiǎng)幛幛筏蓼埂?/p>

以下は、コンテナ（ディレクトリ、フィルター、サイドバーなど）のカラーオプションと、輪郭マップの最小および最大色の値（詳細(xì)については後で?。─扦埂％偿螗匹圣攻骏ぅ毪?、テーマスタイルシートまたは設(shè)定のCSSタブでグローバルに設(shè)定することもできます。

マップデータを設(shè)定します

デフォルトでは、[エリア]タブは、選択したSVGのパスに基づいてエリアを事前に充填し、IDとタイトル値を表示します。必要に応じて、獨(dú)自のエリアフィールドを編集および作成できます。データベースタブにも同じことが言えます。ここで、マップデータを入力してマップ領(lǐng)域に関連付けることができます。

ゾーンおよびデータベースエントリの場(chǎng)合、UIでフィールドとコンテンツを手動(dòng)で作成するか、CSVファイルからデータをアップロードすることを選択できます。

上記のスクリーンショットの最終データセット、特に會(huì)議の詳細(xì)、會(huì)議の詳細(xì)、およびデータベース內(nèi)の各國(guó)のフラグを示す畫(huà)像をアップロードするフィールドのカスタムエリアフィールドに注意してください。コンテンツをマップ自體から分離し、WordPressの投稿タイプの記事データとして引き込むことで、さらに一歩進(jìn)むことができます。これは、Advanced Custom Fieldsが記事エディターにこれらのデータのフィールドを作成し、マップ內(nèi)の値で提出されたデータを関連付けることができる場(chǎng)所です。もちろん、これは必要ではありませんが、懸念を分離するためには、このオプションがあると便利です。

マップデータを表示します

地図上に領(lǐng)域またはデータベースオブジェクトに関する情報(bào)を表示する場(chǎng)合、プラグインにテンプレートを設(shè)定する必要があります。テンプレートには、ポップアップ、ツールチップ、詳細(xì)ビュー、ディレクトリ、タグの5つのタイプがあります。

テンプレートは、領(lǐng)域とデータベースの変數(shù)値を表示するために、プレーンテキスト、HTML、およびハンドルバータグを受け入れます。記事データベースフィールドを介して記事データを取得すると、標(biāo)準(zhǔn)のWordPressフィールド、post.id、post.post_title、post.post_content、post.url、およびこの構(gòu)文を使用して作成されたカスタムフィールドにアクセスできます：post.acf.my_field_name。リッチなテキストフィールド（post.post_contentなど）をレンダリングする必要がある場(chǎng)合は、Handlebars '{{{{{triple-stash}}}}}}}}}}}}を使用して、レンダリングされたHTMLを出力する必要があります。

ハンドルバーの構(gòu)文を使用すると、條件付きロジックをテンプレートに組み込んで、領(lǐng)域とデータベースの値に基づいて動(dòng)的なテンプレートビューを作成できることも意味します。 MapsVG 5.0以降では、テンプレートオプションにはHTMLコメントと、デフォルトゾーンとデータベースフィールドのStartタグが事前に入力されています。とても便利です！

ページにマップを追加します

MapsVGには、マップを任意のページまたは記事に埋め込むためのショートコードが含まれています。ページにGutenbergショートコードブロックを配置し、マップIDを使用してMapsVGを呼び出して埋め込みます[mapsvg]。

Classic WordPressエディターで作業(yè)するか、5.0より前にプラグインバージョンを使用するユーザーの場(chǎng)合、マップアイコンがTinymceツールバーに追加され、マップIDを使用して記事コンテンツにショートコードを注入します。マップIDは、MapsVGエ??ディターダッシュボードまたはアクティビティマップの一番上のパン粉にあります。クリップボードへの便利なコピーボタンは、記事エディターで使用するためにそれをつかむためのショートコードの2つのインスタンスの橫に含まれています。

デモ

データ入力を完了し、いくつかの追加のMAPSVG設(shè)定を切り替えた後、完全に機(jī)能的なインタラクティブでレスポンシブなマップを取得します！このプロセス中に多くのコードに露出がほとんどないことに注意してください。

完全なデモを表示します

マップを超えて

プラグインのSVG機(jī)能の利點(diǎn)は、基本的に、SVGが必要なものになる可能性があることです。ほとんど何のベクターのパスからインタラクティブな「マップ」を作成できますか？建築フロアプラン、インフォグラフィック、またはキャリアのインタラクティブなタイムラインを作成できますか？それは単なる地図以上のものです！

WordPressではありませんか？問(wèn)題ない。 MapsVGはjQueryプラグインとしても利用できます。また、WordPress以外のインタラクティブマップを使用しようとする価値もあります。

リソース

• MapsVG Webサイト（管理インターフェイスのリアルタイムデモンストレーションを含む）
• mapsvgチュートリアル
• mapsvgドキュメント
• mapsvg lite（wordpressプラグインディレクトリ）
• mapsvgビデオチュートリアルアーカイブ（YouTube）

以上がMapsVGを使用してWordPressでインタラクティブマップを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。