Mapbox | さくさく TECH

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	表示する最大のズームレベル

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

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

環境情報

ブラウザ：Google Chrome
Mapbox：2.3.1

スタイルの取得

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

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

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

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

APIへの組み込み

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

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

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

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

タグ: Mapbox

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

環境情報

ポリゴンの表示

ポリゴンの表示内容

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

環境情報

スタイルの取得

APIへの組み込み

環境情報

ポリゴンの表示

ポリゴンの表示内容

関連記事

環境情報

スタイルの取得

APIへの組み込み

関連記事