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

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

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

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

1125a.jpg

  • 環境: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の画像です.

zoomBar.jpg

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

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

kamolandをフォローしましょう


© 2017 KMIソフトウェア