投稿日: 投稿者:

MapboxStudio マーカーを置く

Javascript

Mapbox Studio 地図にマーカーを置く

Mapboxで、ちゃちゃっと自分用の地図が作れるのがよいところです。
例えば、マーカーや、あるエリアに色をつけたり、とかですね。

しかし、以前はMapbox Classicというツールで、とてもシンプルな操作だったのですが、この2017年1月23日から、Mapbox Studioというツールに移行になります。
残念～。

Mapbox Studioの解説がよくわからなくて（ブログ形式になっている）まだまだ触りながら悪戦苦闘中ですが、わかった範囲で書いていきます。

まずは、Mapbox Studioにアカウントを作ってログインします。
https://www.mapbox.com/studio/

いきなりStyles、Tilesets、Datasetsの三つが出てきまして、何だ？と思いますが、大まかに次のような分類です。

Styles

スタイル。見た目。しかし、この画面で多くが操作される。

Tilesets

DatasetsをStylesに反映させるために、いったんTilesetsになる必要がある。

Datasets

つまりデータｗ。見た目を伴わない、どこにどういうデータがあるか、という情報。中身はGeoJSON。

では、マーカーを置いたカスタムの地図を作るところをやってみます。

  1. StylesでNew Styleのボタンを押して、スタイルを作っておきます。

ここではランチスポット、というスタイルを作っておきます。
mapboxstudio_styles.png

  1. 次にDatasetsの画面へ行きます。New datasetを押して、「ランチスポット」という名前を付けます。
  2. マーカーのマークをクリックし、地図上の場所をクリックします。
  3. 情報を追加するために、Add Newというボタンをクリックします。
  4. Propertyを追加できます。ここでは、name:皇蘭、info:ランチはご飯、スープ、ザーサイが食べ放題、と書いておきます。

mapboxstudio_datasets.png

  1. Saveをクリックします。
  2. そんな感じで、3つぐらいのランチポイントを登録し、Saveします。
  3. そしたら、上の方にある青色のExportをクリックします。Export to tilesetとなるので、「lunchspot」という名前にして、Exportします。
  4. Tilesetsに行き、lunchspotをクリックして、Add to styleをクリックします。
  5. 次の瞬間このような画面になり、「ハ？（・Ａ・）」となりますが、これがstylesの画面で、レイヤーを追加しようとしているところです。焦らず、Tとかかれたアイコンをクリックします。

Tがシンボルと言いまして、マーカーやアイコンなどをつけるのは、このシンボルとなります。
mapboxstudio_layer.png
Create layerをクリックします。

  1. さっき作ったlunchspotというレイヤーを左ペインから選択し、iconというタブを選択し、Imageという空欄をクリック→Add SVG Imagesをクリックします。
  2. なんと、デフォルトでImagesはありません。マーカーの画像を追加します。

mapboxstudio_icon.png

  1. Maki Iconsというサイトから（このMakiもMapbox製）、アイコンをダウンロードしておき、Add SVG Imagesから、marker-15.svgというファイルを選択し、アップロードします。
  2. もう一度、検索しなおして、markerを見つけたら、選択します。
  3. ついでにテキストもつけておきます。

さっきnameフィールドに値をセットしたので、これを表示します。

  1. Text fieldの部分に{name}と書いておきます。
  2. マーカーに字が重なってしまうので、PositionタブでText offsetをyを1emにします。

mapboxstudio_text.png

  1. やっと！完成です！！！

地図を表示する際、先程作ったスタイルをmapboxgl.Mapを作る際に呼び出します。

 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
    <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
 </head>
 <body>
 
 <div id='map'></div>
 
 <script>
 mapboxgl.accessToken = 'pk.eyJ1Ijoib25saW5lY29uc3VsdGFudCIsImEiOiJ0NXNSdE1VIn0.48aKT-tYUwPSibdAXP_NAQ';
 var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/onlineconsultant/ciy9s6wua002k2smu114nieuu',
    center: [139.632314, 35.45797],
    zoom: 13
 });
 
 </script>
 </body>
 </html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です