投稿日:

Mapbox サイトにMapboxを埋め込む　サンプルコード有り

Ajax
Javascript

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 Welcome to Mapboxを消す

Javascript

Mapbox Welcome to Mapboxを消す

Mapbox]]は地図を表示するライブラリで、ベースは[[OpenStreetMapです。
https://www.mapbox.com/openstreetmap/

OpenStreetMapの標準の地図よりきれいです。
とにかくキレイな地図を求めるならMapboxがよいでしょう。
しかし、ある程度の読み込み数を超えると有料です。（キター）
月に3000回まで無料です。

https://www.mapbox.com/plans/

さて、そんなMapboxを最初に利用すると、図のように
「Welcome to Mapbox!」
というメッセージが旗とともに出てきます。

welcome_to_mapbox.png;

なんかうざいし、そもそもなんでここにピンが立っているの？
と不思議になります。

これ、何かというと、APIで読み込むときに、プロジェクト名を指定しますよね？
下記のonlineconsultant.123456　というやつです。

 <div id="map"></div>
 <script>
  var map = L.mapbox.map('map', 'onlineconsultant.123456');
 </script>

これは、Mapboxのprojectsの番号なのです。
ログインすると、まずProjectsという画面に飛ばされて、My projectというプロジェクトが勝手にできています。
おそらく、最初に地図を開いた時に、東京が中心になってしまっていたのでしょう。

プロジェクトのことがわかっていないと、
「あー、よくあるAPIキーみたいなアレでしょ？！」
と思ってしまいそうですが、Mapboxを使いこなす上で、プロジェクトはかなり重要です。

で、さっきの

 Welcome to Mapbox

は、読み込んでいるプロジェクトの中心点です。

なので、プロジェクトを消して、別のプロジェクトにして中心点を消せば、このメッセージも旗もなくなります。
もっとも、下記のサイトによるとそのようなことをしなくても、24時間たつと消えるようです。
http://gis.stackexchange.com/questions/28168/xyz-layer-in-open-layers-has-missing-tiles

投稿日:

Mapbox Studio

Mapbox Studio

Mapbox Studioはmapboxの地図を編集できる高機能なエディターです。
ブラウザで動作させられるので、特に専用ソフトなどが必要ありません。

https://www.mapbox.com/mapbox-studio/

投稿日:

Mapbox GL 触ってみる

Javascript

Mapbox GL 触ってみる

弊社で愛用しているMapboxさんが、Mapbox GLというのを出してましたので、ちょいちょい触ってみました。
ですが、ドキュメントがわかりづらく、あまり全体としてつかめてないのが現状です。&cry:
とりあえず、現時点（2015年12月8日）でわかったことを書いておきます。

Mapbox GL
Overview
API
Examples

まずは、シンプルなマップを下記で見ると
https://www.mapbox.com/mapbox-gl-js/examples/
「おっ　きれいになった！心なしか早くなった！高速道路や国道もきれいに表示されてるしいーじゃん！！」
とワクワクします。

が…
なんか主要なところは英語？？

おそらく、OSMの英語データがあるところは英語で、ないところは日本語です。

しかも、なんか日本語はきれいに出ていない…

Switch languages
https://www.mapbox.com/mapbox-gl-js/example/language-switch/

というサンプルがあるので、これをどうにかして、日本語にするかーとやってみましたが（上記のサンプルをswitchLanguage(“jp”)とかswitchLanguage(“ja”)とか　できませんでした。
やり方ご存知の方がいたら、教えてください。┌o　ﾍﾟｺｯ

Githubにある mapbox/mapbox-gl-js

ついでなんで、サンプル以上のことを少しがんばってみます。
真黒な海と、道路だけの地図を出します。

 <!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.12.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.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.eyJ1Ijoi…自分たちのAPIキーを入れてね';
 
 var map = new mapboxgl.Map({
    container: 'map', 
    style:{
 	    "version": 8,
 	    "name": "Mapbox Streets",
 	    center: [139.632314, 35.45797], // starting position
 	    zoom: 9,
            //sourcesとlayersは設定しないと動作しない
            "sources": {
 	    "mapbox-streets": {
 	       "type": "vector",
 	        "url": "mapbox://mapbox.mapbox-streets-v6"
 	     }
 	},
 
  	"layers": [
 	  {
 	    "id": "water",
 	    "source": "mapbox-streets",
 	    "source-layer": "water",
 	    "type": "fill",
 	    "paint": {
 	      "fill-color": "#000000"
 	    }
 	  },
 	  {
 	    "id": "street",
 	    "source": "mapbox-streets",
 	    "source-layer": "road",
 	    "type": "line",
 
 	  }
 	]
     }
 });
 </script>
 
 </body>
 </html>

mapbox_test_blacksea.png

投稿日:

Mapbox GL マーカーが全部地図に入るようにする

Javascript

Mapbox GLで地図にマーカーを表示する際に、マーカーの全部を地図の一画面に載せたい、ということはよくあると思います。

普通にboundsを取得して、地図の端っこをそれに合わせることは下記のようにすればできます。

 function resizeToFit(datas) {
 
 	var bounds = new mapboxgl.LngLatBounds();
 
 	datas.forEach(function(data) {
 	    bounds.extend(data.geometry.coordinates);
 	});
  
 	map.fitBounds(bounds);	
 	
 }

が、そうするとマーカーがギリギリに表示されてしまい、見づらいので、少し余裕を持たせます。

 map.fitBounds(bounds, {padding: 30});

自分で書くときは、下記のようにも書けます。

 function resizeToFit(datas) {
 
 	var bounds = new mapboxgl.LngLatBounds();
 
 	datas.forEach(function(data) {
 	    bounds.extend(data.geometry.coordinates);
 	});
 
 	var southWest = bounds.getSouthWest();
 	var northEast = bounds.getNorthEast();
 
 	var adjustLong = (northEast.toArray()[0] - southWest.toArray()[0]) / 20;
 	var adjustLat = (northEast.toArray()[1] - southWest.toArray()[1]) / 20;
 	
 	var adjustSouthWest = [southWest.toArray()[0] - adjustLong, southWest.toArray()[1] - adjustLat];
 	var adjustNorthEast = [northEast.toArray()[0] + adjustLong, northEast.toArray()[1] + adjustLat];
 	
 	var adjustBounds =  mapboxgl.LngLatBounds.convert([adjustSouthWest, adjustNorthEast]);
 
 	map.fitBounds(adjustBounds);	
 	
 }