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

調査編につづき、今回は実際にユーザーコードでAttributionをコントロールしてみます。なお、SDKとしての挙動を試す目的でAttributionの表示をコントロールしますが、実際には利用許諾にしたがった表示を行ってください。

Text attribution

Attributionを非表示

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

    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
    });

カスタムAttributionを表示

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

    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>'
    });

    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']
    });

デフォルトのAttributionを消した上でカスタムAttributionを追加(compact表示設定)

    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>'}));

初期表示

展開表示

StyleでAttributionを設定

urlでアクセス

    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
    });

urlでアクセス + Attributionを指定

    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
    });

tilesでアクセス

    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
    });

tilesでアクセス + Attributionを指定

    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
    });

Workmark

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

    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
    });

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

    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
    });