OCテックノート

MapboxとMapQuestライセンスと料金比較

2014年6月24日時点のMapboxとMapQuestのライセンスと料金の比較です。
MapboxもMapQuestも、似たようなものであり、データはOpenStreetMap]]ですが、[[OpenStreetMapよりも見た目がきれい、いろんなことができる、という特性を持っています。
APIを提供しているので、Webサイトに組み込んで利用したり、システムに使えたり、Androidアプリや[[:iPhoneアプリに利用できたりします。

さて、私が調べたいポイントは、
「商用ソフトに組み込めるのか？」
「いくらなのか？
がポイントでした。

Mapbox

商用・非商用にかかわらず、マップをどれだけロードしたかで変わってきます。
月に3000ビューまで無料です。
次のプランは月に10,000ビューまでで、これは月に5ドルです。
月に100,000ビューまでで、月に49ドルです。

料金プランは次のページにあります。
https://www.mapbox.com/plans/

利用規約は次のページにあります。
https://www.mapbox.com/tos/

MapQuest

商用ソフトには、無料では組み込めません。（ダウンロード時にお金が発生するタイプのアプリなら、可かもしれません。）
年間2,500ドルのエンタープライズライセンスを購入する必要があります。

しかし、エンタープライズライセンスを払えば、地図が何ビューまでいくら、というリミットはないらしいです。

料金体系はこちらのページです。
http://developer.mapquest.com/web/tools/getting-started/terms-overview

とはいえ、何かと「お問い合わせをしてください」という仕組みなので、MapQuestについては問い合わせをしたほうがよさそうです。

利用規約は次にあります。
http://developer.mapquest.com/web/info/terms-of-use

二度と調べたくないので、メモっておきます。

2018年6月22日

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。

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

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

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

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

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

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

Create layerをクリックします。

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

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

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

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

やっと！完成です！！！

地図を表示する際、先程作ったスタイルを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>

2018年6月22日

Mapbox 自分で作ったマーカーを地図に表示させる

Javascript

Mapbox 自分で作ったマーカーを地図に表示させる

ふぅー　Mapbox漬けな毎日を送っています。
Mapbox.jsからMapbox GL JSへの移行をやってます。

さて、Mapbox.js、つまり旧名？Leafletでは、素敵なマーカーがデフォルトでありましたね！
しかし、Mapbox GL JSから、素敵なマーカーはなくなりました（つД｀)
代わりに、自分で作ってアップロードしないといけないのです。
しかも、色がコードで手早く変更できない！！！！( ﾟДﾟ)
世界って残酷…。

①
さて、まずはSVGのマーカーを作ります。
下記のサイトで、MAKI Iconsの素材をひょいひょいとやると、新しいアイコン素材ができます。

https://www.mapbox.com/maki-icons/editor/

こんな感じに設定すると、以前Mapbox.jsにあったLeafletのマーカーのようですね。

②
できたSVGのファイルを、Mapbox Studioにアップロードします。
これがわかりにくいポイントですね！

MapboxStudio マーカーを置く
でやってみたように、手順12の部分のように、①で作ったSVGのファイルをアップロードします。

③
これで、コードから呼び出せます。
ついでに、マーカーをクリックするとポップアップが出るようにしておきます。

 <!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
 });
 map.on('style.load', function () {
 
  map.addSource("lunchspots", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [139.632314, 35.45797]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "redcar"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [139.637147, 35.443327]
                },
                "properties": {
                    "title": "Mapbox SF",

“marker-symbol”: “redcar”,

 		    "description": "うきー"
                }
            }]
        }
    });
    map.addLayer({
        "id": "lunchspots",
        "type": "symbol",
        "source": "lunchspots",
        "layout": {
            "icon-image": "{marker-symbol}-11",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
 
 });
 
 map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['lunchspots'] });
 
    if (!features.length) {
        return;
    }
 
    var feature = features[0];
 
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
 
 });
 </script>
 </body>
 </html>

2018年6月22日

Mapbox 日本語表記にする

Javascript

MapboxはOpen Street Mapベースの地図でして、安い、美しい、素晴らしい地図プラットフォームです。

Mapbox公式

特によい機能はとにかく地図をカスタマイズしまくれるところです。

ただ地図をHTMLで表示するJavascriptは下記にサンプルがあります。

https://www.mapbox.com/mapbox-gl-js/examples/

が、心配なのは、デフォルトで英語なところです…。

下記に、ラベルの言語を変更する方法がありますが…。日本語はありません。（2017年1月11日現在）
https://www.mapbox.com/mapbox-gl-js/example/language-switch/

しかし、ご安心ください [smile]
日本語の地図を表示する方法はありまぁーす！

Mapboxにログインし、Mapbox Studioのページに行きます。
Styles→Editと進みます。
ページの一番下にある、Propertiesというところをクリックすると、下記の画像のようになりますので、ここで

 {name_en}

と書かれているところを

 {name}

にしてください。

それで、ローカル言語に合わせた地図になります [smile]

日本語化した地図のサンプルはこちら

2018年6月22日

Mapbox 地図の色などを変えてみる

Javascript

Mapbox 地図の色などを変えてみる

Mapbox サイトにMapboxを埋め込む　サンプルコード有り
で、Webサイトに地図を表示することはやってみましたが、それだけだとつまらないので、Mapboxのよいところ、地図のカスタマイズをやってみましょう！

先ほどのページで紹介したコードに、プロジェクト名を書くところがあったと思います。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>A simple map</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
 <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.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>
  var map = L.mapbox.map('map', 'akikogoto.*****') //ここはプロジェクトの番号を入力
     .setView([35.45797, 139.632314], 9);
 </script> 
 </body>
 </html>

Mapboxの管理画面で、この指定したプロジェクトを開きます。

それで、下記の図のように、Style→Waterなどを選択して、色を変えてみます。
すると、海が気持ち悪い紫にかわりましたね！

;

で、htmlで読み込んだものも、リロードすると、この海の色の地図が表示されます。