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で読み込んだものも、リロードすると、この海の色の地図が表示されます。