最近、Mac OSのSafariブラウザ上で、”Mapbox GL”のhillshading(地形に応じた陰影処理を施す処理)や 3D terrain (3次元的に立体表示する機能)表示で問題が発生するようになった.
Mapboxで地図をカスタマイズする際にスタイルの内容を理解することが重要だという事を述べたが、今回はこのスタイルの中身についてもう少し深入りしてみようと思う.
この記事では、最終的に “Mapbox GL” を使って、現在試験公開中の国土地理院の地形図のベクタータイルセットをベースマップとして表示させ、”Mapbox GL”の高度な機能を駆使して、魅力的なWEBマップを作成する方法について説明する予定だ.
これまで、このサイトではGoogle Maps関連の記事を幾つか載せていたが、新しいWEBマップフレームワークへの移行を行ったので、Google Mapsの利用を完全に停止することにした.
今年の春からGoogle Mapsに代わる別なWEBマップシステムを色々と試してきたが、Mapboxを用いた新しい”GPSMap” プラグインモジュールがある程度形になってきたので、”GPSMap”プラグインから”Google Maps”のモジュールを取り除き、メインのWEBマップフレームワークを”Mapbox”に切り替えた.
国土地理院が公開しているWebマップサービス 『地理院地図』がこの3月に更新されて機能アップがはかられたが、『地理院地図』は Leaflet というJavascriptベースのフレームワークを用いて開発されている.
OpenLayers 3 では標準的なベースマップとしてOSM(Open Street Map)やBeing Mapsなどが使用可能だが、世間で最もポピュラーなGoogle Mapsがサポートされていない.
Google Mapsをベースマップ(正確にはレイヤー重ね)に関する記述を見つけた.この方法だと、Google Maps APIを用いているのでライセンス的な問題は無いだろう.
Google Developersの “Google Maps JavaScript API” ページにGoogle Mapsで発生するイベントの種類をほぼリアルタイムで画面上に表示させるサンプルが載っている.Google Mapsの機能をフルに活用したカスタムWEBマップを作成する際の参考にすると良いだろう.
OpenLayers3のサイトに GPX, KML などのファイルを地図上にドラッグ&ドロップするだけで地図上に重ねて表示するが載っていたので、このコードをちょっとだけ弄ってベースマップを国土地理院の地図に置き換えたサンプルを置いてみた.
このサイトで過去何回か国土地理院の電子国土や新しくなった地理院地図について採り上げてきたが、地理院地図
http://portal.cyberjapan.jp/ で用いられているシステムを眺めていたら、役に立ちそうな機能が実装されていたので、Google Mapsなどの他のWEBシステムの参考例なども含めて簡単に紹介しようと思う.