WordPressプラグインの開発(5)

この記事は1年以上前に書かれました。
内容が古くなっている可能性がありますのでご注意下さい。


OpenStreetMapでは、「レイヤー」を切り替えることによって異なるデザインの地図を表示することができます。そこで、Embed OSMのバージョン0.5では、レイヤーを指定できるようにします。

Embed OSM バージョン0.5では、2種類のレイヤ指定方法を用意します。まず1つめは、

[embed_osm lat="35.32395" lon="139.55598" zoom="16" layer="cycle"]

のような、ショートコードによる指定です。
もう1つは、バージョン0.4で追加したオプション設定画面よる指定です。
両方で指定された場合、ショートコードによる指定が優先されるものとします。

プログラムが大きくなったので、ここには完全なリストは掲載しませんが、ソースコードはこちらからダウンロードできます。

まず始めに、EmbedOSMクラスの先頭でタイルサーバのURLを定数として宣言します。

class EmbedOSM {

  const MAPNIK_URL =
    '["http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
      "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
      "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"]';
  const CYCLE_URL =
    '["http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
      "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
      "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"]';
  const TRANSPORT_URL =
    '["http://a.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
      "http://b.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
      "http://c.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png"]';

タイルサーバーとは、地図の画像を提供するサーバです。
ここでは、標準（Mapnik）、サイクリングマップ、交通マップの3種類のレイヤーに対するタイルサーバーを定義します。
各タイルサーバのURLは
http://www.openstreetmap.org/openlayers/OpenStreetMap.js
を参照しました。
余談ですが、当初、この.jsファイルを利用しようかと思いましたが、ライセンスが不明のため利用を断念しました。ソースコードを公開するときは、ライセンスを明示することが大切です。そうしないと、安心して利用することができません。

ショートコードの処理をするembed_osm_handler()メソッドでは、

$option_layer = get_option('embed_osm_layer');

でオプション設定におけるレイヤー指定を取得し、

    extract( shortcode_atts( array(
      'lon' => '0',
      'lat' => '0',
      'zoom' => '1',
      'layer' => ''),
        $atts ) );

でショートコードによるレイヤー指定を取得します。
そして、

switch($layer) {
  case 'cycle':
    $tileurl = self::CYCLE_URL;
    $add_param = '&layers=C';
    break;
  case 'transport':
    $tileurl = self::TRANSPORT_URL;
    $add_param = '&layers=T';
    break;
  case 'mapnik':
    $tileurl = self::MAPNIK_URL;
    $add_param = '';
}
if(empty($tileurl)) {
  switch($option_layer) {
    case 'cycle':
      $tileurl = self::CYCLE_URL;
      $add_param = '&layers=C';
      break;
    case 'transport':
      $tileurl = self::TRANSPORT_URL;
      $add_param = '&layers=T';
      break;
    default:
      $tileurl = self::MAPNIK_URL;
      $add_param = '';
  }
}

タイルサーバのURLを決定します。
ショートコードで「cycle」「transport」または「mapnik」が指定されていれば、サイクリングマップ、交通マップまたは標準マップになります。
ショートコードで指定がなく、設定値で「cycle」または「transport」が指定されていれば、サイクリングマップまたは交通マップになります。それ以外の場合は標準マップになります。
変数$add_paramには、指定したレイヤーで「大きな地図を表示」するための追加のURLパラメータをセットしています。

設定画面を表示し、設定値の更新を行うembed_osm_options()メソッドは、レイヤー指定の追加に伴う修正をします。

実行結果は以下のようになります。

標準マップ

[embed_osm lat="35.32395" lon="139.55598" zoom="16" layer="mapnik"]
大きな地図を表示

 
サイクルマップ

[embed_osm lat="35.32395" lon="139.55598" zoom="16" layer="cycle"]
大きな地図を表示

 
交通マップ

[embed_osm lat="35.32395" lon="139.55598" zoom="16" layer="transport"]
大きな地図を表示

 

今回作成したプラグインのダウンロードはこちらからどうぞ。

WordPressプラグインの開発 1234567891011