MapsVGを使用してWordPressでインタラクティブマップを作成します

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

インタラクティブマップを実装または計画した最後の経験を思い出してください。元のソースからデータをJSONにマップし、それを視覚的なフレームワーク（D3など）に接続するのに多くの時間がかかると推定するかもしれません。次に、ユーザーがマップ自体と対話する方法を構成することです。これらは非常に多くの開発努力です。

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

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

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

MapsVGは、インストールされると、ベクトル、画像、またはGoogleマップ機能に基づいて新しいマップを作成する5つのオプションを提供します。この記事の目的のために、SVG機能に焦点を当てます。

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

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

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

独自のカスタムSVGファイルを使用する場合は、 SVGのアップロードオプションを選択します。アップロード後、カスタムファイルは、新しいSVGマップドロップダウンメニューの<kbd>user-uploads/your-file-name.svg</kbd>の下に表示されます。ファイルをプラグインマップにアップロードする前に、ファイルを最適化するための追加の手順を実行することをお勧めします。

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

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

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

マップスタイルの設定

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

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

上記のように、マップの充填値とストローク値、および各パスのさまざまなアクティブ状態を制御できます。ベクトルベースのマップを使用することの利点！したがって、カスタムマップファイルを作成した場合、イラストレーターに定義されていないように、塗りつぶしとストロークの値を残すことを好みます。ただし、STROKE幅をUIで効果的に調整することはできません（SVGの編集と各パスの値を変更する必要があるため）。したがって、イラストレーターに設定してファイルを再アップロードすることをお勧めします。

以下は、コンテナ（ディレクトリ、フィルター、サイドバーなど）のカラーオプションと、輪郭マップの最小および最大色の値（詳細については後で！）です。コンテナスタイルは、テーマスタイルシートまたは設定のCSSタブでグローバルに設定することもできます。

マップデータを設定します

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

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

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

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

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

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

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

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

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

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

デモ

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

完全なデモを表示します

マップを超えて

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

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

リソース

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

以上がMapsVGを使用してWordPressでインタラクティブマップを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。