マップ上のポイントにポップアップを追加する

[アーティクル]
06/22/2023

この記事では、マップ上のポイントにポップアップを追加する方法について説明します。

コードの理解

次のコードでは、シンボルレイヤーを使用して、name プロパティと description プロパティを持つポイントフィーチャーをマップに追加します。 Popup クラスのインスタンスが作成されますが、表示されません。ポップアップのオープンとクローズをトリガーするためのマウスイベントがシンボルレイヤーに追加されます。マーカーシンボルをマウスでポイントすると、ポップアップの position プロパティがマーカーの位置に応じて更新され、マウスでポイントされているポイントフィーチャーの name プロパティと description プロパティをラップしている HTML に応じて content オプションが更新されます。次に、その open 関数を使用してマップにポップアップが表示されます。

//Define an HTML template for a custom popup content laypout.
var popupTemplate = '<div class="customInfobox"><div class="name">{name}</div>{description}</div>';

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

dataSource.add(new atlas.data.Feature(new atlas.data.Point([-122.1333, 47.63]), {
  name: 'Microsoft Building 41', 
  description: '15571 NE 31st St, Redmond, WA 98052'
}));

//Create a layer to render point data.
var symbolLayer = new atlas.layer.SymbolLayer(dataSource);

//Add the polygon and line the symbol layer to the map.
map.layers.add(symbolLayer);

//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup({
  pixelOffset: [0, -18],
  closeButton: false
});

//Add a hover event to the symbol layer.
map.events.add('mouseover', symbolLayer, function (e) {
  //Make sure that the point exists.
  if (e.shapes && e.shapes.length > 0) {
    var content, coordinate;
    var properties = e.shapes[0].getProperties();
    content = popupTemplate.replace(/{name}/g, properties.name).replace(/{description}/g, properties.description);
    coordinate = e.shapes[0].getCoordinates();

    popup.setOptions({
      //Update the content of the popup.
      content: content,

      //Update the popup's position with the symbol's coordinate.
      position: coordinate

    });
    //Open the popup.
    popup.open(map);
  }
});

map.events.add('mouseleave', symbolLayer, function (){
  popup.close();
});

ポップアップを 1 つ作成して再利用することが最善のアプローチである場合があります。たとえば、ポイントが多数あって、一度に 1 つのポップアップだけ表示したい場合があります。ポップアップを再利用することで、アプリケーションによって作成される DOM 要素数が大幅に削減され、パフォーマンスが向上します。次のサンプルでは、3 ポイントフィーチャーを作成します。そのいずれかを選択すると、そのポイントフィーチャーのコンテンツを含むポップアップが表示されます。

各ポイントフィーチャのポップアップを作成するのではなく、1 つのポップアップを作成して再利用する方法を示す完全に機能するサンプルについては、Azure Maps サンプルの「複数のピンを使用してポップアップを再利用する」をご覧ください。このサンプルのソースコードについては、「複数のピンを使用したポップアップの再利用のソースコード」を参照してください。

既定では、ポップアップには白の背景、下部にポインターの矢印、右上隅に [閉じる] ボタンがあります。次のサンプルでは、ポップアップの fillColor オプションを使用して背景色を黒に変更します。 CloseButton オプションを false に設定すると、[閉じる] ボタンが削除されます。ポップアップの HTML コンテンツでは、ポップアップの端から 10 ピクセルのスペースが使用されます。テキストは白で表示されるため、黒の背景に適切に表示されます。

ポップアップの外観をカスタマイズする方法を示す完全に機能するサンプルについては、Azure Maps サンプルの「ポップアップをカスタマイズする」をご覧ください。このサンプルのソースコードについては、「ポップアップのカスタマイズのソースコード」を参照してください。

ポップアップテンプレートを使用すると、ポップアップ用のデータドリブンレイアウトを簡単に作成できます。以下のセクションでは、フィーチャーのプロパティを使用して書式設定されたコンテンツを生成するためのさまざまなポップアップテンプレートの使用方法を示します。

Note

既定では、ポップアップテンプレートを使用してレンダリングされるすべてのコンテンツは、iframe 内にセキュリティ機能としてサンドボックス化されます。ただし、次のような制限があります。

すべてのスクリプト、フォーム、ポインターロック、上部ナビゲーションの機能は無効になります。リンクをクリックすると、新しいタブで開くことができます。
iframe の srcdoc パラメーターをサポートしていない古いブラウザーでは、少量のコンテンツのレンダリングに制限されます。

ポップアップに読み込まれるデータを信頼しており、潜在的に、ポップアップに読み込まれるこれらのスクリプトがアプリケーションにアクセスできるようにしたい場合は、ポップアップテンプレートの sandboxContent オプションを false に設定することによって、これを無効にすることができます。

文字列テンプレート

文字列テンプレートでは、プレースホルダーがフィーチャープロパティの値に置き換えられます。このフィーチャーのプロパティに、文字列型の値を割り当てる必要はありません。たとえば、value1 では整数が保持されます。これらの値は、次に popupTemplate のコンテンツプロパティに渡されます。

numberFormat オプションでは、表示する数値の形式が指定されます。 numberFormat を指定しないと、コードではポップアップテンプレートの日付形式が使用されます。 numberFormat オプションでは、Number.toLocaleString 関数を使用して数値の形式が設定されます。大きな数値の形式を設定するには、numberFormat オプションを、NumberFormat.format からの関数と共に使用することを検討してください。たとえば、次のコードスニペットでは、maximumFractionDigits を使用して、小数部の桁数が 2 に制限されます。

Note

文字列テンプレートでイメージをレンダリングできる方法は 1 つだけです。まず、文字列テンプレートにはイメージタグを用意する必要があります。イメージタグに渡す値は、イメージへの URL とする必要があります。次に、文字列テンプレートでは、HyperLinkFormatOptions 内で isImage を true に設定する必要があります。 isImage オプションで、ハイパーリンクがイメージ用であることが指定されると、ハイパーリンクはイメージタグに読み込まれます。ハイパーリンクをクリックすると、イメージが開きます。

var templateOptions = {
  content: 'This template uses a string template with placeholders.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
  numberFormat: {
    maximumFractionDigits: 2
  }
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 1 - String template',
    value1: 1.2345678,
    value2: {
        subValue: 'Pizza'
    },
    arrayValue: [3, 4, 5, 6]
});

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

PropertyInfo テンプレート

PropertyInfo テンプレートには、フィーチャーの使用可能なプロパティが表示されます。 label オプションでは、ユーザーに表示するテキストが指定されます。 label を指定しないと、ハイパーリンクが表示されます。さらに、ハイパーリンクがイメージである場合は、"alt" タグに割り当てられた値が表示されます。 dateFormat では日付の形式が指定されます。日付の形式を指定しないと、日付は文字列としてレンダリングされます。 hyperlinkFormat オプションではクリック可能なリンクがレンダリングされます。同様に、email オプションを使用すると、クリック可能な電子メールアドレスをレンダリングできます。

PropertyInfo テンプレートでは、プロパティをエンドユーザーに表示する前に、プロパティがそのフィーチャーに対して実際に定義されていることを再帰的に確認します。また、スタイルおよびタイトルのプロパティを表示することは無視されます。たとえば、color、size、anchor、strokeOpacity、および visibility は表示されません。このため、バックエンドでプロパティパスのチェックが完了すると、コンテンツは PropertyInfo テンプレートによってテーブル形式で表示されます。

var templateOptions = {
  content: [
    {
        propertyPath: 'createDate',
        label: 'Created Date'
    },
    {
        propertyPath: 'dateNumber',
        label: 'Formatted date from number',
        dateFormat: {
          weekday: 'long',
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          timeZone: 'UTC',
          timeZoneName: 'short'
        }
    },
    {
        propertyPath: 'url',
        label: 'Code samples',
        hideLabel: true,
        hyperlinkFormat: {
          lable: 'Go to code samples!',
          target: '_blank'
        }
    },
    {
        propertyPath: 'email',
        label: 'Email us',
        hideLabel: true,
        hyperlinkFormat: {
          target: '_blank',
          scheme: 'mailto:'
        }
    }
  ]
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 2 - PropertyInfo',
    createDate: new Date(),
    dateNumber: 1569880860542,
    url: 'https://samples.azuremaps.com/',
    email: 'info@microsoft.com'
}),

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

複数のコンテンツテンプレート

また、フィーチャーには、文字列テンプレートと PropertyInfo テンプレートの組み合わせを使用してコンテンツを表示することもできます。この場合、白の背景上に文字列テンプレートによってプレースホルダーの値がレンダリングされます。さらに、テーブル内に PropertyInfo テンプレートによって全幅のイメージがレンダリングされます。このサンプル内のプロパティは、前のサンプルで説明したプロパティに似ています。

var templateOptions = {
  content: [
    'This template has two pieces of content; a string template with placeholders and a array of property info which renders a full width image.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
    [{
      propertyPath: 'imageLink',
      label: 'Image',
      hideImageLabel: true,
      hyperlinkFormat: {
        isImage: true
      }
    }]
  ],
  numberFormat: {
    maximumFractionDigits: 2
  }
};

var feature = new atlas.data.Feature(new atlas.data.Point([0, 0]), {
    title: 'Template 3 - Multiple content template',
    value1: 1.2345678,
    value2: {
    subValue: 'Pizza'
    },
    arrayValue: [3, 4, 5, 6],
    imageLink: 'https://samples.azuremaps.com/images/Pike_Market.jpg'
});

var popup = new atlas.Popup({
  content: atlas.PopupTemplate.applyTemplate(feature.properties, templateOptions),
  position: feature.geometry.coordinates
});

テンプレートが定義されていないポイント

ポップアップテンプレートが文字列テンプレート、PropertyInfo テンプレート、またはその両方の組み合わせとして定義されていない場合、既定の設定が使用されます。割り当てられているプロパティが title と description だけである場合、ポップアップテンプレートには、白の背景、右上隅に [閉じる] ボタンが表示されます。また、小さい画面および中くらいの画面には、下部に矢印が表示されます。 title と description 以外のすべてのプロパティについては、既定の設定がテーブル内に表示されます。既定の設定にフォールバックしても、引き続きポップアップテンプレートをプログラムによって操作することができます。たとえば、ユーザーはハイパーリンクの検出を無効にできますが、他のプロパティには引き続き既定の設定が適用されます。

実行すると、マップ上のポイントを選択してポップアップを表示できます。次の各ポップアップテンプレートでは、マップ上にポイントがあります: 文字列テンプレート、PropertyInfo テンプレート、および複数コンテンツテンプレート。既定の設定を使用したテンプレートがどのようにレンダリングされるかを示す 3 つのポイントもあります。

function InitMap()
{
  var map = new atlas.Map('myMap', {
      zoom: 2,
      view: "Auto",

    //Add authentication details for connecting to Azure Maps.
      authOptions: {
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
      }
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function() {
    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add sample data.
    datasource.add([
      new atlas.data.Feature(new atlas.data.Point([-20, 20]), {
        title: 'No template - title/description',
        description: 'This point doesn\'t have a template defined, fallback to title and description properties.'
      }),

      new atlas.data.Feature(new atlas.data.Point([20, 20]), {
        title: 'No template - property table',
        message: 'This point doesn\'t have a template defined, fallback to title and table of properties.',
        randomValue: 10,
        url: 'https://samples.azuremaps.com/',
        imageLink: 'https://samples.azuremaps.com/images/Pike_Market.jpg',
        email: 'info@microsoft.com'
      }),

      new atlas.data.Feature(new atlas.data.Point([40, 0]), {
        title: 'No template - hyperlink detection disabled',
        message: 'This point doesn\'t have a template defined, fallback to title and table of properties.',
        randomValue: 10,
        url: 'https://samples.azuremaps.com/',
        email: 'info@microsoft.com',
        popupTemplate: {
          detectHyperlinks: false
        }
      }),

      new atlas.data.Feature(new atlas.data.Point([-20, -20]), {
        title: 'Template 1 - String template',
        value1: 1.2345678,
        value2: {
          subValue: 'Pizza'
        },
        arrayValue: [3, 4, 5, 6],
        popupTemplate: {
          content: 'This template uses a string template with placeholders.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
          numberFormat: {
            maximumFractionDigits: 2
          }
        }
      }),

      new atlas.data.Feature(new atlas.data.Point([20, -20]), {
        title: 'Template 2 - PropertyInfo',
        createDate: new Date(),
        dateNumber: 1569880860542,
        url: 'https://samples.azuremaps.com/',
        email: 'info@microsoft.com',
        popupTemplate: {
          content: [{
            propertyPath: 'createDate',
            label: 'Created Date'
          },
                    {
                      propertyPath: 'dateNumber',
                      label: 'Formatted date from number',
                      dateFormat: {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                        timeZone: 'UTC',
                        timeZoneName: 'short'
                      }
                    },
                    {
                      propertyPath: 'url',
                      label: 'Code samples',
                      hideLabel: true,
                      hyperlinkFormat: {
                        lable: 'Go to code samples!',
                        target: '_blank'
                      }
                    },
                    {
                      propertyPath: 'email',
                      label: 'Email us',
                      hideLabel: true,
                      hyperlinkFormat: {
                        target: '_blank',
                        scheme: 'mailto:'
                      }
                    }
                    ]
        }
      }),

      new atlas.data.Feature(new atlas.data.Point([0, 0]), {
        title: 'Template 3 - Multiple content template',
        value1: 1.2345678,
        value2: {
          subValue: 'Pizza'
        },
        arrayValue: [3, 4, 5, 6],
        imageLink: 'https://samples.azuremaps.com/images/Pike_Market.jpg',
        popupTemplate: {
          content: [
            'This template has two pieces of content; a string template with placeholders and a array of property info which renders a full width image.<br/><br/> - Value 1 = {value1}<br/> - Value 2 = {value2/subValue}<br/> - Array value [2] = {arrayValue/2}',
            [{
              propertyPath: 'imageLink',
              label: 'Image',
              hideImageLabel: true,
              hyperlinkFormat: {
                isImage: true
              }
            }]
          ],
          numberFormat: {
            maximumFractionDigits: 2
          }
        }
      }),
    ]);

    //Create a layer that defines how to render the points on the map.
    var layer = new atlas.layer.BubbleLayer(datasource);
    map.layers.add(layer);

    //Create a popup but leave it closed so we can update it and display it later.
    popup = new atlas.Popup();

    //Add a click event to the layer.
    map.events.add('click', layer, showPopup);
  });

  function showPopup(e) {
    if (e.shapes && e.shapes.length > 0) {
      var properties = e.shapes[0].getProperties();

      popup.setOptions({
        //Update the content of the popup.
        content: atlas.PopupTemplate.applyTemplate(properties, properties.popupTemplate),

        //Update the position of the popup with the pins coordinate.
        position: e.shapes[0].getCoordinates()
      });

      //Open the popup.
      popup.open(map);
    }
  }
}

ポップアップを再利用するのと同様に、ポップアップテンプレートも再利用することができます。このアプローチは、ポイントが複数ある場合、一度に 1 つのポップアップテンプレートのみを表示したいときに便利です。ポップアップテンプレートを再利用すると、アプリケーションによって作成される DOM 要素の数が減り、アプリケーションのパフォーマンスが向上します。次の例では、3 つのポイントに同じポップアップテンプレートを使用します。そのいずれかを選択すると、そのポイントフィーチャーのコンテンツを含むポップアップが表示されます。

共通のプロパティフィールドのセットを共有する複数の機能を持つ 1 つのポップアップテンプレートを再利用するホットを示す完全に機能するサンプルについては、Azure Maps サンプルの「ポップアップテンプレートを再利用する」をご覧ください。このサンプルのソースコードについては、「ポップアップテンプレートの再利用のソースコード」を参照してください。