MapSVG プラグイン: WordPress のインタラクティブな地図

MapSVG は、WordPress サイト上でインタラクティブで応答性の高い地図を作成するのに役立つ気の利いた WordPress プラグインです。一連の優れた機能のおかげで、あらゆる SVG ファイルをインタラクティブなマップに変換できます。それだけではありません。詳細なフロアプラン、インフォグラフィック、Google マップ、Chloropleth マップ、イメージマップなどを作成できます。

このレビューでは、MapSVG をウェブ上の WordPress に最適なマッピングプラグインの 1 つにする機能を検討します。プラグインのテストも行っていますので、最後まで読んでください。これは間違いなくお得なので、マグカップのコーヒーを用意して、さあ始めましょう。

MapSVG WordPress 用インタラクティブマップ

並外れた開発者 Roman Stepanov によって提供された MapSVG を使用すると、インタラクティブなマップを簡単かつ楽しく作成できます。最初にドキュメントを読む必要がありましたが、さまざまなオプションを試してみるのはとても楽しかったです。そうは言っても、MapSVG で利用できる機能を見てみましょう。

100 以上の既製マップ

すぐに作業を開始できるように、MapSVG には 100 を超える地理的に調整されたマップが付属しています。世界地図があり、クリック可能な地域 (国) にすでに細分化されています。次に、それぞれの州/県を含む国の地図が作成されます。特別なマップもいくつか入手できます。

また、ほとんどのマップは調整されているため、住所または座標を使用してマップにマーカーを追加できます。さらに、独自の SVG マップを作成し、MapSVG にアップロードできます。

Inkscape や Adobe Illustrator などのベクター編集ソフトウェアを使用して SVG 画像を作成し、アップロードしてカスタマイズするだけです。

これが何を意味するか知っていますか?これは、後ろ向きに屈むことなく、インタラクティブな図を設計し、統計を視覚化できる (そして、一般にユーザーエクスペリエンスが向上する) ことを意味します。

データベースオブジェクト

MapSVG を使用すると、オブジェクトを作成し、マップの特定の領域に追加できます。これにより、Web 訪問者に没入型のエクスペリエンスを提供する情報でマップを充実させることができます。

説明のために、あなたが全国各地で販売物件を扱う不動産業者であると仮定してみましょう。あなたは非常に順調に進んでおり、利用可能な物件を地図上に表示したいと考えています。サイズ、住所、価格、写真などの情報を表示したいとします。

MapSVG を使用すると、これらの詳細をデータベースに追加し、その情報をマップの 1 つまたは複数の領域に添付できます。ユーザーが定義した領域 (州など) をクリックすると、その詳細がポップオーバー、詳細ビュー、またはツールチップに表示されます。

フィルタリングおよび検索可能なディレクトリ

データベースオブジェクトを追加するだけでは不十分であるかのように、MapSVG を使用するとディレクトリを作成し、それをマップの横に表示できます。不動産の例えで言えば、特定の州で利用可能なすべての不動産（またはエージェント）を表示したい場合があります。 MapSVG を使用すると、これが非常に可能になります。

ユーザーは、ドロップダウンフィルターまたは検索ボックスを使用して、ディレクトリ内のアイテムをフィルターできます。さらに、ユーザーはマップ上の特定の領域をクリックしてオブジェクトをフィルタリングできます。このディレクトリ機能により、最も複雑な図や地図も簡単に理解できるようになります。さらに、ユーザーは情報を簡単に見つけることができるため、UX にプラスになります。

Google マップの機能強化

MapSVG を Google マップと統合できると言いましたか?はい、Google API キーがあれば可能です。必要なのは Google API キーだけです。通常、Google マップを広範囲にカスタマイズすることはできません。これにより、シナリオによっては制限が生じる可能性があります。 MapSVG を使用すると、この課題を克服できます。

どうやって？ベクターマップは、あらゆる種類の Google マップ (地形、衛星、道路、またはハイブリッド) の上に重ねることができます。また、ベクター画像はインタラクティブであるため、ドロップするまで Google マップを変更できます。ここでの明らかな最終結果は、より使いやすさを提供できることです。

Google マップには一連のコントロールが付属していることに注意してください。これらのコントロールを MapSVG 機能と組み合わせると、ユーザーを興奮で夢中にさせることができます。彼らは「一体どうやってそんなことをしたんだ？」と言うでしょう。この機能を使用すると、ランドマークを強調表示したり、あらゆるものをクリック可能にしたりして、Google マップを強化できます。

CSS、JavaScript、およびテンプレートエディター

カスタマイズや拡張ができないマップは何の役に立つのでしょうか? Roman は、これを気の利いた CSS および JavaScript エディターで基礎づけているようです。コードの使い方を理解していれば、インタラクティブなイラストを限界まで押し上げることができます。

まず、CSS を使用して、苦労せずにマップや図のスタイルを自由に設定できます。ツールチップ、ポップオーバー、その他の情報コンテナーから多くの要素をスタイル設定できます。さらに、JavaScript の力を活用して、デフォルトの地図機能を拡張できます。

さらに、ポップオーバー、マーカー、ツールチップのカスタムテンプレートを作成するのに役立つテンプレートエディターも利用できます。テンプレートエディターは使いやすいので、問題が発生することはないと思います。

ライブプレビューを備えた直感的なコントロールパネル

MapSVG の操作は、マップの作成を簡単にする直感的な管理ダッシュボードのおかげで、非常に簡単です。 MapSVG を使用すると、地図やその他のインタラクティブなイラストを最初から最後まで簡単に作成できます。

それに加えて、プラグインには、変更をリアルタイムで確認できるライブプレビュー機能が付属しています。これで、マップが完成したときにどのように見えるかを心配する必要はありません。さらに、地図がどのように表示されるかを確認するために、行ったり来たりする（またはページを更新する）必要はありません。なんて素敵でしょ？

イメージマップ

イメージマップについては数分前に説明しましたが、この機能は素晴らしいと思うので、単独で説明する必要がありました。 MapSVG が SVG ファイルをインタラクティブなマップに自動的に変換することはすでにわかっています。 SVG ファイルを描画し、アップロードしてカスタマイズするだけです。

しかし、PNG や JPEG 画像から地図を作成することもできることをご存知ですか?面白そうですよね？ MapSVG には、ラスターイメージからインタラクティブ (クリック可能な) マップを作成できる優れた描画ツールが付属しています。これはどのように役立ちますか?インタラクティブな住宅計画、青写真、ルート、都市計画、座席表などを描くことができます。

これらの機能と素晴らしいサポートのおかげで、この銀河から地図やインタラクティブなイラストを作成することを妨げるものは何もありません。 MapSVG は WordPress 用の間違いのない (そしておそらく最高の) 地図プラグインであるため、ここでは限界があります。

MapSVG をセットアップしてマップを作成する方法

MapSVG のセットアップは、他の一般的な WordPress プラグインをインストールするのと同じくらい簡単です。プラグインをインストールしてアクティブ化すると、すぐにインタラクティブなマップの作成を開始できます。 MapSVG は箱から出してすぐに機能するため、何も設定する必要はありません。

地図SVGを取得

実践的な体験をしてみましょう。 MapSVG のコピーを取得し、次の手順に従います。 WordPress 管理ダッシュボードにログインし、[プラグイン] > [新規追加] に移動します。

次に、アップロードボタン (1) をクリックし、ファイルを選択 (2)し、今すぐインストール (3)をクリックします。以下に示すように、strong> ボタンを押します。

インストールプロセスが完了するまで待ってから、[プラグインを有効にする] ボタンをクリックします。

以上です;プラグインは有効化するとすぐに使用できるようになります。 WordPress 管理画面で [MapSVG] 項目をクリックして、コントロールパネルを起動します。

ここまでは順調なので、プロセスが簡単であることに同意していただけると思います。コントロールパネルでは、事前に作成されたマップの 1 つを選択し、Google マップを作成し (最初に統合が必要ですが、API キーをコピーして貼り付けるだけで簡単です)、イメージマップを構築し、SVG ファイルをアップロードするか、 Googleマップ付きのSVGファイル。

マップの作成についてサポートが必要な場合は、コントロールパネルの上部にある [チュートリアル] または [サポート] リンクをクリックすると、簡単なヘルプが表示されます。既存のマップの 1 つを選択しましょう。私は中国を選びます ~~どうせ今ではすべてが中国で作られているからです~~ 🙂

N/B: 開発者は、未調整の地図ではなく地理調整済みの地図を使用することを推奨しています。

…地理校正された地図はより新しく、地域タイトルがあり、地理座標 (緯度/経度) によって、または自動的に座標に変換される住所を入力するだけでマーカーを追加できます。 – MapSVG チュートリアル

[新しい SVG マップ] ドロップダウンメニューから中国 (または他の任意のマップ) を選択します。スクロールバーが嫌いな場合は、検索ボックスをご利用ください。

次の画面でタイトルを入力し、必要に応じてプリローダーテキストを変更します。同じ画面で、マップサイズの設定、レスポンシブデザインのオフの切り替え (デフォルトでオンになっているため、ダイヤルには触れないでください)、ツールチップやポップオーバーのオンなどを行うことができます。

また、マップはすでに地域 (この場合は中国の省) に分割されており、すでにクリック可能になっていることがわかります。また、[メニュー] ドロップダウンメニューなどの他のコントロールについてもよく理解してください。

いくつかの色を変更して、プラグインの雰囲気を感じてみましょう。以下に示すように、メニュー > カラー に移動します。

[色] 画面は、夢の色を選択するのに役立ちます。つまり、使用したい色に制限はないということです。好みの色が見つかるまでカラーピッカーを操作してください。 WordPress はbaeなので、青の色合いを使用します 🙂

以下に示すように、色を選択し、[保存 Ctrl+S] ボタンを忘れずに押してください。

見る？ MapSVG は使いやすいと言いました。数回クリックするだけで地図の色を変更でき、とても良い気分になりました。何年も前、Google で 1 位にランクインしたときと同じように。マップの他の部分の編集も同様に簡単です。私の主張を証明するために、楽しいのでツールヒントを追加します。

MapSVG にツールチップを追加する

では、マップ上の領域にマウスを置いたときに表示されるツールチップを追加するにはどうすればよいでしょうか?簡単ですので、すぐにその方法を説明します。

ちなみに、何らかの理由で不明な点がある場合は、公式の MapSVG チュートリアルとドキュメントを遠慮なく調べてください。さらに良いことに、この投稿の最後にあるコメントセクションを押してください。私があなたのためにトールを召喚します。そのハンマーがすべてを解決します 🙂

それはさておき、ツールチップを追加するには、テンプレートを追加する必要があります (前に説明したテンプレートエディターを覚えていますか?)。そのためには、メニュー > テンプレートに移動し、地域ツールチップを選択します。

次に、テンプレートエディターに次のコードを追加し、上に示すように保存 Ctrl+S ボタンを押します。

Province: <strong>{{title}}</strong>

上記のコードは、Handlebars タグを含む単純な HTML です。地域のタイトルだけを表示したい場合は、{{title}} タグを使用します。独自のカスタムフィールドを定義することもできます。これについては後ほど説明します。まず、ツールヒント機能をオンにしましょう。

以下に示すように、メニュー > 設定に移動し、ツールチップ機能をオンにします。

上のスクリーンショットでわかるように、ツールチップがアクティブになっています。それでも、想像を絶する方法でツールヒントを充実させるために、カスタムフィールドを追加する方法を紹介すると述べました。ツールヒントに写真や詳細情報を追加したいとします。どのように対処しますか?そのために、前述したデータベースオブジェクトを呼び出します。

データベースオブジェクトを介したカスタムフィールドの追加

MapSVG を使用すると、マップにカスタムフィールドを追加できます。すでに {{title}} フィールドがありますが、さらにカスタムフィールドを追加する方法を見てみましょう。 テキスト、テキストエリア、チェックボックス、画像などのカスタムフィールドを選択できます。内モンゴル省にいくつかの画像を追加してみましょう。

メニュー > 地域に移動し、下の画像で強調表示されているフィールドの編集ボタンをクリックします。

次の画面で、以下に示すように [画像] ボタンをクリックし、次に [フィールドを保存] ボタンをクリックします。

[保存 Ctrl+S] ボタンをクリックして変更を保存します。常に変更を保存することを忘れないでください。

次に、下の画像に示すように [リスト] ボタンをクリックします。

地図を地域の編集に切り替え、地域をクリックします（ここでは内モンゴルを選択しました）。右側に新しいカスタムフィールド (画像) が表示されるはずです。 [参照] ボタンをクリックします。下の画像を参照してください。

次の画面で画像を追加し、[画像を選択] ボタンを押します。

[地域の編集] 画面にリダイレクトされるので、[OK (1)] ボタンをクリックする必要があります。次に、保存 Ctrl+S (2) ボタンをクリックし、以下に示すようにプレビュー (3) モードに戻ります。

この時点で Nei Mongol の上にマウスを移動しても、画像はツールチップに表示されません。なぜ？そうですね、画像のテンプレートは作成していません。今すぐそれをしましょう。

メニュー > テンプレート > 地域ツールチップに移動し、コードを次のように変更します。

Province: <strong>{{title}}</strong><br />

First image:<br />
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />

All images:<br />
{{#each images}}
    <img src="{{thumbnail}}" width="40px" />
{{/each}}

さらに詳しく説明するための画像を次に示します。忘れずに [保存] ボタンを押してください。

次に、選択した地域 (この場合は内モンゴル) の上にマウスを移動してみます。あなたが見たものを教えてください。これが私の画面に表示されているものです。

かなりきれいですよね？ MapSVG マップにカスタムフィールドを追加する方法を学習しました。ポップオーバーやマーカーの追加も非常に簡単です。さらに、これらの基本を知っていれば、どんなインタラクティブな地図や図でも問題なく作成できます。

特に Roman Stepanov がチュートリアルを通じて素晴らしいサポートと素晴らしい指導を提供してくれるので、MapSVG の操作は 4 年生の仕事です。 WordPress サイトに地図を表示するには、変更を保存し、[ページ] > [新規追加] に移動します。

次に、上に表示されているように [MapSVG] ボタンをクリックし、地図を選択します。これにより、ショートコード [mapsvg id=”17″ title=”China”] が WordPress ページに追加されます。いずれにせよ、ショートコードを使用して、サイトのどこにでも自由に地図を追加してください。心配しないでください。MapSVG で作成した地図は 100% 応答性が高く、複数のデバイスで見栄えがよくなります。

次に、「公開」をクリックして、フロントエンドで結果を確認します。

それぞれの機能を確認していたら、一日中ここにいることになりますが、MapSVG WordPress 地図プラグインの独自のコピーを入手して、テストしてみることをお勧めします。ここだけの話、これはあなたが必要とする唯一の WordPress マッププラグインです。

ご質問やご提案はありますか?以下のコメントセクションからお気軽にご連絡ください。乾杯！