OpenLayersのズームボタンをカスタマイズ

OpenLayersの標準のズームボタンは小さいため，スマホでも操作しやすいように独自実装しました．

OpenLayersのズームボタンをカスタマイズ

OpenLayersで作ったサイトはスマートフォンのブラウザでも閲覧できますが，標準のズームボタンは小さいため，スマホでは操作しづらいというところがあります．

今回，スマホでも操作しやすいようにズームボタンを独自実装しましたので，それについて書きます．

環境：OpenLayers 2.13.1

実際に動いている様子は，以下のサイトをご覧ください．

山の電波地図-近畿

※なお，標準ズームボタン(OpenLayers.Control.ZoomPanel) のcssを上書きしてカスタマイズする方法もありますが，標準の設定との兼ね合いがあるため，今回のように独自に作った方が簡単だと思います．

JavaScript 抜粋

var btnZoomIn = new OpenLayers.Control.Button({
	displayClass:"mzinBtn",
	trigger: function(){map.zoomIn();}
});

var btnZoomOut = new OpenLayers.Control.Button({
	displayClass:"mzoutBtn",
	trigger: function(){map.zoomOut();}
});

var zPanel = new OpenLayers.Control.Panel();

zPanel.addControls([btnZoomOut, btnZoomIn]);

var options = {
	controls: [
		zPanel,
		...
	]
};

map = new OpenLayers.Map('map', options);

Buttonコントロールを作って，それをPanelに追加する． PanelをMapに追加するというだけです．

CSS

div.olControlPanel {
  /* クリックイベントを受け取る不可視のdiv */
  /* レイアウトが固まるまでは，赤のborderを有効にしておくと */
  /* 効率が良いと思います */
/*
  border: 1px solid red;
*/
  left: 10px;
  top: auto;
  bottom: 10px;
  width: 160px;
  height: 25px;
}
.olControlPanel div {
  background-image: url("zoomBar.jpg");
  float: left;
  cursor: pointer;
  width: 80px;
  height: 25px;
}
.mzoutBtnItemInactive {
  left: 0px;
  background-position: 0px 0px;
}
.mzinBtnItemInactive {
  left: 80px;
  background-position: 80px 0px;
}

div.olControlPanelは，クリックイベントを受け取る範囲の定義です．その中にボタンを表示するようにします．

zoomBar.jpgは，ズームアウトとズームインのボタンを連結した160x25pxの画像です．

もしよろしければ，この画像を使っていただいても構いません．ただし必ず，一旦ダウンロードして，それを使うようにしてください．

このサイトのURLを使って直接参照するのはやめてください．