mapBoxでポリゴン表示。geoJsonの表示内容について変更する。

MapBox

mapBoxでは、地図上に様々なメッシュの表示をおこなうことができます。
今回は、mapBoxを使ってgeoJsonの表示をおこない、かつ、表示内容をパラメータで変更する方法について紹介していきます。


環境情報


  • ブラウザ:Chrome
  • Mapbox:v2.3.1

ポリゴンの表示


以下のHTMLを記載するだけで地図上にポリゴンが表示されます。
※とはいっても、mapインスタンスの作成は省略しています。


map.on('load', function () {
    map.addSource('POLYGON_TEST', {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [
                {"type": "Feature", "geometry": {"type": "Polygon","coordinates": [[[139.74609375, 35.70556640625],[139.757080078125, 35.70556640625],[139.757080078125, 35.716552734375],[139.74609375, 35.716552734375],[139.74609375, 35.70556640625]]]}},
            ]
        }
    });
    
    map.addLayer({
        'id': 'PLOLYGON_TEST_fill',
        'type': 'fill',
        'source': 'POLYGON_TEST',
        'paint': {
            'fill-color': '#FFFF00',
            'fill-opacity': 0.1
        },
        'minzoom': 1,
        'maxzoom': 22
    });

    map.addLayer({
        'id': 'PLOLYGON_TEST_LINE',
        'type': 'line',
        'source': 'POLYGON_TEST',
        'paint': {
            'line-color': '#0000FF',
            'line-width': 2
        },
        'minzoom': 1,
        'maxzoom': 22
    });
});

「map.addSource」クラスで、geoJsonで表示する座標情報を定義しています。


ポリゴンの表示内容


ポリゴンの表示内容は、fill(塗りつぶし)とline(線)の定義でおこなうことができます。
パラメータとして準備されているのは、以下となります。


■fill(塗りつぶし)

fill-color

塗りつぶしの色

fill-opacity

不透明度(1が最も透明度が高い)

minzoon

表示する最小のズームレベル

maxzoon

表示する最大のズームレベル


■line(線)

line-color

線の色

line-width

線の太さ

minzoon

表示する最小のズームレベル

maxzoon

表示する最大のズームレベル



Mapboxのスタイルを変更する。日本語の地図表示に変更。

MapBox

WEBアプリケーションを使用しての地図表示で、一番使い勝手がよい(メジャーな)のはGoogleMapかと思います。
しかし、Mapboxも非常に使い勝手がよく、地図表示においてGoogleMapと遜色がない機能を備えてあります。


今回は、Mapboxを使って地図表示を行う上での重要なポイントである、地図スタイルの変更について方法を紹介していきます。


環境情報


  • ブラウザ:Google Chrome
  • Mapbox:2.3.1

スタイルの取得


Mapboxのダッシュボード画面から、「mapBoxStudio」に移動します。

Mapboxに移動する

スタイルの検索で、”Japan”を入力して検索します。
“Mapbox Japan”が表示されますので、クリックしてスタイル編集画面に移動します。

Mapboxのスタイル検索

スタイル編集画面の右上の「共有」ボタンを押下して、共通ウィンドウを表示します。

Mapboxのスタイル共有

共有ウィンドウで「スタイル URL」をコピーします。
このURLをMapboxのAPIに組み込みをおこないます。

MapboxのURL取得

APIへの組み込み


「スタイル URL」を、MapboxのAPIに設定します。


JavaScriptの「mapboxgl.Map」インスタンス作成時のパラメータに『style』がありますが、このパラメータを変更します。


var map = new mapboxgl.Map({
    container: 'map',
    center: [139.7671563757408, 35.69760688745724],
    zoom: 13,
    style: '※コピーしたURL'
});

では地図表示をおこなってみましょう。
地図表示が日本語表示となっています。

Mapboxでの地図表示