サポート

FAQ
ベースマップの帰属（参考訳）

ナレッジ番号：3172 | 登録日：2023/05/29 | 更新日：2024/11/21

※ 本記事は、Esri が提供する Basemap attribution を翻訳したものです。参考訳であり、原文と差異がある場合があります。リンク先の原文も併せてご確認ください。

ベースマップスタイルサービスを使用するマッピングアプリケーションを作成およびデプロイする場合は、ベースマップの帰属表示が必要です。表示する必要がある帰属は 2 種類あります。

Powered by Esri
データソースプロバイダーの帰属

Powered by Esri

アプリケーションで Esri が所有するベースマップレイヤーまたはデータレイヤーを使用する場合、Powered by Esri の帰属をマップまたはシーン上に正しく表示する必要があります。ほとんどの ArcGIS クライアント API は、レイヤーが表示されると自動的に Powered by Esri テキストが追加されます。

注記: 使用している API で Powered by Esri テキストが表示されない場合は、手動で追加する必要があります。詳細については、帰属のカスタマイズを参照してください。

例

次の例では、ベースマップレイヤーにアクセスし、適切な色、サイズ、ハイパーリンクで右下に Powered by Esri 属性を表示します。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Basemap layers</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .esri-view .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    width: 250px;
    max-height: calc(100% - 45px) !important;
    position: fixed;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.28"></script>
<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
  ],(
    esriConfig,
    Map,
    MapView,
  )=> {

    esriConfig.apiKey = "YOUR_API_KEY";

    const map = new Map({
      basemap: "arcgis-navigation"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-10, 30],
      zoom: 1,
      constraints: {
        snapToZoom: false,
      },
    });

  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

※このドキュメントで紹介されているデモを実行するには、'YOUR_API_KEY' を自身で作成した API キーに置き換える必要があります。無料アカウントにサインアップして API キーを取得してください。

データソースの帰属

ベースマップスタイルサービスまたは帰属の表示を必要とするその他の ArcGIS データサービスを使用するアプリケーションでは、データソースの帰属表示も提供する必要があります。ほとんどの場合、ベースマップレイヤーまたはデータレイヤーがマップまたはシーンに追加されると、ArcGIS クライアント API はそのテキストをマップの左下に自動的に表示します。
ArcGIS クライアント API のデフォルトの動作は、データの帰属をマップの下部に表示することです。これは推奨される配置ですが、アプリのデザインと互換性がない場合や、フォーマットに問題がある場合は移動できます。帰属のカスタマイズを参照してください。

アプリケーションを設計する際に考慮しておくべき重要なことは、帰属表示を妨げないことです。ユーザーインターフェースの実装によって帰属表示が削除されたり、見えにくくなったりした場合は、帰属表示のレイアウトとデザインガイドラインに従った別の方法で提供する必要があります。

注記: 使用している API が帰属表示のテキストを表示しない場合は、手動で追加する必要があります。詳細については、帰属のカスタマイズを参照してください。

例

次の例では、ベースマップレイヤーにアクセスし、データプロバイダーの属性を適切な色とサイズで左下に表示します。異なるベースマップレイヤーを選択し、このマップをズームおよびパンして、帰属がどのように変化するかを確認します。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Basemap layers</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .esri-view .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    width: 250px;
    max-height: calc(100% - 45px) !important;
    position: fixed;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.28"></script>
<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/Basemap",
    "esri/layers/VectorTileLayer",
    "esri/widgets/BasemapGallery",
  ],(
    esriConfig,
    Map,
    MapView,
    Basemap,
    VectorTileLayer,
    BasemapGallery
  )=> {

    esriConfig.apiKey = "YOUR_API_KEY";

    const basemap = new Basemap({
      baseLayers: [
        new VectorTileLayer({
          portalItem: {
            id: "36551d7048d643618026014f3075327b", // コミュニティ ベースマップ スタイル
          },
        }),
      ],
    });

    const map = new Map({
      basemap: basemap,
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-10, 30],
      zoom: 1,
      constraints: {
        snapToZoom: false,
      },
    });

    const basemaps = new BasemapGallery({
      view: view,
      source: {
        query: `id: a25523e2241d4ff2bcc9182cc971c156`, // ArcGIS Online の開発者向け World ベースマップのグループ - https://www.arcgis.com/home/group.html?id=a25523e2241d4ff2bcc9182cc971c156
      },
    });

    view.ui.add(basemaps, {
      position: "top-right",
    });
  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

帰属のカスタマイズ

ほとんどの ArcGIS クライアント API は、帰属 UI コントロール、コンポーネント、クラス、または帰属オプションを使用して帰属テキストを表示します。このコントロールは、追加のテキストを含めたり、動作をカスタマイズしたりするためにオーバーライドできます。
使用している API が適切な帰属を提供しない場合は、手動で追加する必要があります。
手動で帰属を追加する方法の詳細については、使用している API を参照してください。カスタマイズした帰属表示は、常に帰属表示のレイアウトとデザインガイドラインに準拠する必要があります。

サービスから著作権と帰属テキストを取得する

サービスから帰属テキストを直接取得するには、ベースマップスタイルサービスにリクエストを送ります。正しいテキストはサービスのメタデータの copyrightText プロパティと attribution プロパティにあります。

たとえば、帰属は次のようになります。

Source: Esri, DigitalGlobe, GeoEye, i-cubed, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community

注意: 帰属は頻繁に変更される可能性があります。帰属情報を手動でコピーしてアプリに直接貼り付けないことを強くお勧めします。アプリを更新するたびに、手動で貼り付けた帰属情報の要件と内容を定期的に確認してください。ベストプラクティスは、クライアント API、ヘルパーメソッド、またはサービスから直接帰属テキストを取得することです。

例: 道路地図ベースマップレイヤー

リクエスト

HTTP


GET /arcgis/rest/services/styles/ArcGIS:Streets?f=json&type=style&token=<ACCESS_TOKEN> HTTP/1.1Host: basemaps-api.arcgis.com

cURL


curl -X GET "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Streets?type=style&token=<ACCESS_TOKEN>"

レスポンス

{
  "version": 8,
  "sprite": "https://cdn.arcgis.com/sharing/rest/content/items/de26a3cf4cc9451298ea173c4b324736/resources/styles/../sprites/sprite?token=<YOUR_API_KEY>",
  "glyphs": "https://basemaps-api.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf?token=<YOUR_API_KEY>",
  "sources": {
    "esri": {
      "type": "vector",
      "url": "https://basemaps-api.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer?token=<YOUR_API_KEY>",
      "minzoom": 0,
      "maxzoom": 16,
      "tiles": [
        "https://basemaps-api.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf?token=<YOUR_API_KEY>"
      ],
      "copyrightText": "Sources: Esri, HERE, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community",
      "attribution": "Sources: Esri, HERE, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community"
    }
  },
  ...
}

例: 衛星画像ベースマップレイヤー

リクエスト

HTTP

GET /arcgis/rest/services/styles/ArcGIS:Imagery?f=json&type=style&token=<ACCESS_TOKEN> HTTP/1.1 Host: basemaps-api.arcgis.com

cURL

curl -X GET "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery?type=style&token=<ACCESS_TOKEN>"

レスポンス

{
"currentVersion": 10.6,
"serviceDescription": "World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution satellite imagery worldwide. The map includes 15m TerraColor imagery at small and mid-scales (~1:591M down to ~1:288k) for the world. The map features Maxar imagery at 0.3m resolution for select metropolitan areas around the world, 0.5m resolution across the United States and parts of Western Europe, and 1m resolution imagery across the rest of the world. In addition to commercial sources, the World Imagery map features high-resolution aerial photography contributed by the GIS User Community. This imagery ranges from 0.3m to 0.03m resolution (down to ~1:280 in select communities). For more information on this map, including the terms of use, visit us <a href=\"http://goto.arcgisonline.com/maps/World_Imagery \" target=\"_new\" >online</a>.",
"mapName": "Layers",
"description": "World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution satellite imagery worldwide. The map includes 15m TerraColor imagery at small and mid-scales (~1:591M down to ~1:288k) for the world. The map features Maxar imagery at 0.3m resolution for select metropolitan areas around the world, 0.5m resolution across the United States and parts of Western Europe, and 1m resolution imagery across the rest of the world. In addition to commercial sources, the World Imagery map features high-resolution aerial photography contributed by the GIS User Community. This imagery ranges from 0.3m to 0.03m resolution (down to ~1:280 in select communities). For more information on this map, including the terms of use, visit us online at http://goto.arcgisonline.com/maps/World_Imagery",
"copyrightText": "Source: Esri, Maxar, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community",
"supportsDynamicLayers": false,
...
}

レイアウトとデザインガイドライン

カスタム帰属を実装する場合は、以下のデザインガイドラインに従ってください。

帰属表示は、マップが表示されているときに常に見えるように、マップ上に直接配置します。
マップのズームおよびパン操作に応答する動的な表記を実装し、マップの現在の範囲、スケール、およびズームレベルに応じて帰属の表記を変更します。
他のロゴやビジュアルコンポーネント（マップ要素を除く）と重ならないようにします。
Esri の要件に従っている限り、アプリのデザインに合わせてフォントや配色を選択できます。実装は読みやすく、他のすべてのアクセシビリティガイドラインを満たす必要があります。
Esri のデフォルトのデザインを模倣するには、次の属性を使用します。

フォントファミリー： "Avenir Next W00","Helvetica Neue", Helvetica,Arial,sans-serif;
属性内の文字は 100% 不透明度で、色 #323232 を使用
背景の塗りつぶしは不透明度 65% で、色 #ffffff を使用

注記: これらのレイアウトとデザインガイドラインを使用できないアプリケーション要件がある場合は My Esri からお問い合わせください。

例

下記は ArcGIS Maps SDK for JavaScript のウィジェットを使用して、マップの上部のカスタム位置に帰属テキストを表示する例です。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Basemap layers</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .esri-view .esri-ui .esri-attribution{
    position: fixed;
    bottom: unset;
    top: 0;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.28"></script>
<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/widgets/Zoom",
    "esri/widgets/Attribution"
  ],(
    esriConfig,
    Map,
    MapView,
    Zoom,
    Attribution,
  )=> {

    esriConfig.apiKey = "YOUR_API_KEY";

    const map = new Map({
      basemap: "arcgis-imagery"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-10, 30],
      zoom: 2,
      constraints: {
        snapToZoom: false,
      },
      padding: { top: 15 },
      ui: {
        components: []
      }
    });


    const attribution = new Attribution({view});
    view.ui.add(attribution, "manual");


    const zoom = new Zoom ({
      view
    })
    view.ui.add(zoom, "bottom-right");
  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

アカウント、ライセンス、価格、サービスの使用に関する詳細は、FAQ をご覧ください。

メタデータ

種類

その他

製品

Developer > ArcGIS Developer Subsbription

このナレッジはお役に立ちましたか？

役に立った
役に立たなかった

サポート

FAQ ベースマップの帰属（参考訳）

Powered by Esri

例

データ ソースの帰属

例

帰属のカスタマイズ

サービスから著作権と帰属テキストを取得する

例: 道路地図ベースマップ レイヤー

リクエスト

HTTP

cURL

レスポンス

例: 衛星画像ベースマップ レイヤー

リクエスト

HTTP

cURL

レスポンス

レイアウトとデザイン ガイドライン

例

メタデータ

種類

製品

FAQ
ベースマップの帰属（参考訳）

データソースの帰属

例: 道路地図ベースマップレイヤー

例: 衛星画像ベースマップレイヤー

レイアウトとデザインガイドライン