Mapbox GL JS でアトリビューションをコントロールする -利用編-

[調査編](https://qiita.com/OttyLab/private/f2b71ec8f528b9725555)につづき、今回は実際にユーザーコードでAttributionをコントロールしてみます。なお、SDKとしての挙動を試す目的でAttributionの表示をコントロールしますが、実際には[利用許諾](https://www.mapbox.com/legal/tos)にしたがった表示を行ってください。

# Text attribution
## Attributionを非表示

`options.attributionControl`を`false`に設定するとtext attributionが非表示になります。

```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        attributionControl: false
    });
```
![off.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/06109cfc-da1e-706f-42c3-3599c7abedcb.png)


## カスタムAttributionを表示
`options.attributionControl`に文字列、もしくは文字列の配列を指定するとAttributionとして表示されます。

```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        customAttribution: '<a href="https://example.com/custom1">custom1</a>'
    });
```
![custom1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/9c986551-1af4-5cd3-9f83-f2a0cb786ce2.png)


```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        customAttribution: ['<a href="https://example.com/custom1">custom1</a>', 'custom2']
    });
```
![custom2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/1af9bf96-2cb6-b156-57d8-aed7bd93c0cf.png)


## デフォルトのAttributionを消した上でカスタムAttributionを追加(compact表示設定)
```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9, // starting zoom
        attributionControl: false
    });

    map.addControl(new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: '<a href="https://example.com/custom1">custom1</a>'}));
```
初期表示
![compact1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/e5a2d010-a744-e21d-de52-bc3d5952ca2d.png)

展開表示
![compact2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/fa9f829f-dcb9-2695-42b1-6d80f55dd2cf.png)


## StyleでAttributionを設定

### urlでアクセス
```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8'
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![style_url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/7087aa1f-2e3b-2a71-4b32-efecff62d7da.png)

### urlでアクセス + Attributionを指定

```js
    var map = new mapboxgl.Map({
        container: 'map', // container id
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8',
                    attribution: 'in style',
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![style_url_attr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/12690d04-d5e5-1a7a-d0e1-2cecd4d56343.png)


## tilesでアクセス

```js

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![style_tiles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/372b9fbc-222d-8320-d090-25b404f72917.png)


## tilesでアクセス + Attributionを指定

```js

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512,
                    attribution: 'in style'
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![style_tiles_attr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/4c093e3e-f313-451a-57f5-028360334b3c.png)


# Workmark
## urlでアクセスし、wordmarkを非表示

```js

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    url: 'mapbox://mapbox.mapbox-streets-v8',
                    mapbox_logo: false
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![logo_url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/142a0747-92dd-4d99-cfaa-61741040d6c8.png)


## tilesでアクセスし、wordmarkを表示
```js

    var map = new mapboxgl.Map({
        container: 'map', // container id
        //style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        style: {
            version: 8,
            sources: {
                street: {
                    type: 'vector',
                    tiles: ['http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoieW9jaGkiLCJhIjoiY2tjZThvdWExMDV2dDJxcDgxZzBwbzlxYSJ9.M0yRA6SXDMRgXzXGuYnvsg'],
                    tileSize: 512,
                    mapbox_logo: true
                }
            },
            layers: [
                {
                    id: 'water',
                    type: 'fill',
                    source: 'street',
                    'source-layer': 'water',
                    minzoom: 0,
                    maxzoom: 22
                }
            ]
        },
        zoom: 9 // starting zoom
    });
```
![logo_tiles.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85105/81855d60-6e63-10e5-1beb-7238cd4d6103.png)