MapSVGプラグインのレビュー:WordPressでインタラクティブマップを作成する

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


このレビューでは、MapSVGをWeb上のWordPressに最適なマッピングプラグインの1つにする機能を調べます。プラグインのテストドライブも行っているので、最後まで読んでください。これは間違いなく良い取引なので、自分でマグカップを手に入れましょう。.

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

MapSVGは、非凡な開発者であるRoman Stepanovによって開発されたもので、インタラクティブな地図を簡単かつ楽しく作成できます。最初にドキュメントを読む必要があったにもかかわらず、私はさまざまなオプションをいじって楽しんだ。そうは言っても、MapSVGで利用可能な機能を見てみましょう.

100以上の対応マップ

MapSVGには、100を超える地理的に調整されたマップが付属しています。世界地図があり、すでにクリック可能な領域(国)に細分されています。次に、それぞれの州/県のある国の地図があります。また、いくつかの特別なマップを取得します.

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

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

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

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

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

説明のために、少しの間、あなたが全国で販売する不動産を持つ不動産業者であると仮定しましょう。あなたは本当にうまくやっていて、利用可能なプロパティを地図上に表示したいと考えています。サイズ、住所、価格、写真などの情報を表示したい.

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

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

データベースオブジェクトを追加するだけでは不十分であるかのように、MapSVGではディレクトリを作成して、マップの横に表示できます。不動産の類推では、特定の状態で利用可能なすべてのプロパティ(またはエージェント)を表示することができます。 MapSVGはこれを非常に可能にします.

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

Googleマップを強化する

MapSVGをGoogleマップと統合できることについてお話しましたか?はい、できます。GoogleAPIキーが必要です。通常、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はそのままで機能するため、何も設定する必要はありません。.

MapSVGを取得

実際に体験してみましょう。 MapSVGのコピーを入手して、次の手順に従います。 WordPress管理ダッシュボードにログインして、 プラグイン>新規追加.

mapsvgワードプレスプラグインのレビュー

次に、 アップロードする ボタン (1)ファイルを選択(2), とヒット 今すぐインストール(3) 以下に示すボタン.

mapsvgレビュー

インストールプロセスが完了するのを待ってから、 プラグインを有効にする ボタン.

mapsvgレビュー

以上です;プラグインはアクティベート後に使用できるようになります。クリックしてください MapSVG コントロールパネルを起動するためのWordPress管理画面のアイテム.

mapsvg

これまでのところ、プロセスが単純であることに同意するでしょう。コントロールパネルで、事前作成されたマップの1つを選択し、Googleマップを作成します(最初に統合が必要です。これは、APIキーをコピーして貼り付けるのと同じくらい簡単です)、イメージマップを作成し、SVGファイルをアップロードするか、 Googleマップを含むSVGファイル.

地図の作成でサポートが必要な場合は、 チュートリアル または サポート コントロールパネルの上部にあるリンク。既存のマップの1つを選択してみましょう。私は中国に行きます とにかく今日ではすべてがそこで作られているので ��

N / B: 開発者は使用をお勧めします ジオキャリブレーション の代わりに地図 校正されていません マップは…

…地理的に調整されたマップは新しいもので、リージョンタイトルがあり、地理座標(緯度/経度)によって、または自動的に座標に変換される住所を入力するだけで、マーカーを追加できます。 – MapSVGチュートリアル

から中国(またはその他の好きな地図)を選択します 新しいSVGマップ ドロップダウンメニュー。スクロールバーが嫌いな場合は、検索ボックスを自由に使用してください.

mapsvgで新しいマップを作成する

次の画面で、 題名 そして、 プリローダーテキスト あなたがそんなに傾いているなら同じ画面で、マップサイズを設定したり、レスポンシブデザインをオフに切り替えたり(デフォルトではオンになっているため、ダイヤルには触れないでください)、ツールチップやポップオーバーをオンにすることができます。.

また、マップは既にリージョン(この場合は中国の省)に分割されており、すでにクリック可能です。また、以下を含む他のコントロールをよく理解してください。 メニュー ドロップダウンメニュー.

いくつかの色を変更して、プラグインの感触をつかんでみましょう。案内する メニュー>色 以下に示すように.

mapsvg wordpressプラグインでのマップの色の編集

の  画面はあなたの夢の色を選択するのに役立ちます。つまり、使用したい色に制限はありません。あなたが好きなものになるまでカラーピッカーを動かすだけです。ワードプレスは青なので、私は青の色合いで行きます ��

あなたの色を選択し、ヒットすることを忘れないでください Ctrl + Sを保存 以下に示すようにボタン.

見る? MapSVGは使いやすいとお伝えしました。数回クリックするだけで、マップの色を変更しました。それは、何年も前にGoogleで1位にランクされたときと同じです。マップの他の部分の編集も同様に簡単です。私のポイントを証明するために、ツールチップを追加します。.

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

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

ちなみに、なんらかの理由で不明な点がある場合は、オフィシャルをチェックすることを躊躇しないでください MapSVGチュートリアルとドキュメント. さらに良いことに、この投稿の最後にあるコメントセクションにアクセスしてください。 ソー 貴方のために。そのハンマーがすべてを解決します��

それとは別に、ツールチップの追加にはテンプレートの追加が含まれます(前述のテンプレートエディターを覚えていますか?)。そのためには、 メニュー>テンプレート 次に選択します 地域のツールチップ. 

mapsvg wordpressプラグインにツールチップを追加する

次に、テンプレートエディターに次のコードを追加し、 Ctrl + Sを保存 上記のボタン.

州: {{題名}}

上記のコードはシンプルなHTMLで、 ハンドルバータグ. 地域のタイトルだけを表示したい場合は、{{title}}タグを使用します。すぐに学習できるように、独自のカスタムフィールドを定義することもできます。しかし、最初に、ツールチップ機能をオンにしましょう.

案内する メニュー>設定 そして、 ツールチップ 以下に示す機能.

mapsvgレビュー

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

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

MapSVGでは、カスタムフィールドをマップに追加できます。 {{title}}フィールドはすでにありますが、カスタムフィールドを追加する方法を見てみましょう。以下を含むカスタムフィールドを選択できます テキスト、テキストエリア、チェックボックス、画像, 等々。ネイモンゴル州に画像を追加しましょう.

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

MapSVGにカスタムフィールドを追加する

次の画面で、 画像 ボタンと フィールドを保存 下に示すボタン.

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

次にヒット リスト 下の画像に示すボタン.

マップをに切り替える 地域を編集 地域をクリックします(Nei Mongolを選びました)。新しいカスタムフィールド(画像) 右の方へ。ヒット ブラウズ ボタン。下の画像を参照してください.

次の画面で、画像を追加して、 画像を選択 ボタン.

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

この時点でNei Mongolにカーソルを合わせると、ツールチップに画像が表示されません。どうして?さて、画像のテンプレートは作成していません。今すぐやってみましょう.

案内する メニュー>テンプレート>領域のツールチップ コードを次のように変更します。

州: {{題名}}
最初の画像:


すべての画像:
{{#each画像}} {{/各}}

これは、さらに説明するためのイメージです。ヒットすることを忘れないでください セーブ ボタン.

次に、選択した地域(ここではNei Mongol)をマウスで移動してみます。あなたが見るものを教えてください。これは私の画面にあるものです.

かなりきれいですよね? MapSVGマップにカスタムフィールドを追加する方法を学習しました。ポップオーバーとマーカーの追加もパイと同じくらい簡単です。さらに、これらの基本を理解している限り、太陽の下でインタラクティブなマップ/図を作成することをお勧めします.

MapSVGでの作業は、特にRoman Stepanovがチュートリアルを介して優れたサポートと素晴らしいガイダンスを提供しているため、4年生のものです。 WordPressサイトに地図を表示するには、変更を保存して次の場所に移動します ページ>新規追加.

次に、 MapSVG 上記のボタンをクリックして、マップを選択します。これはショートコードを追加します [mapsvg id =” 17” title =”中国”] あなたのWordPressページに。どうしても、ショートコードを使用して、サイトの任意の場所にマップを追加してください。心配しないでください。MapSVGで作成したマップは100%応答性があるため、複数のデバイスで見栄えがよくなります.

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

結論

私たちがそこにある各機能を通過した場合、私たちは一日中ここにいますが、私はあなた自身のコピーを入手することをお勧めします MapSVG WordPressマッププラグイン 試乗してみます。あなたと私の間で、これはあなたが必要とする唯一のWordPressマッププラグインです.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me