最近、Google Map の公開設定が話題になっています

先生方が家庭訪問などの参考に、 Google Map を使って場所を確認するために使っている情報が一般公開されていることが話題になっています。
Google のサービスはコミュニケーションの手段として使われることを前提としているものが多いので、初期設定が「一般公開」になっているのも分かるような気がします。

ウェッブ上のサービスは、設定も含めて、データの機密性が完全に守られるものではないと思っています。
万が一情報が漏れても対処できるようなデータ管理の仕方を考えておいた方がいいでしょう。

また、自分のコンピュータでデータを管理できるように、ローカルで運用できる方法ならもう少し安全になるかもしれません。
例えば、Google Earth などがあります。これにもデータを公開する機能があるので注意が必要です。ただ、環境によって動作しないこともあります。

自分があったらいいなと思うサービスが次々と現実化しています。
Google Map も使っていますが、これがなかなかよくできて気に入っています。
これから自分なりにカスタマイズできるような地図をつくりたいと思っているので、MapServer を利用した KaMap や OpenLayers を使いこなせるようになりたいです。

OpenLyaers 16h Popupを複数表示

複数のマーカーを配置してみます。

---
OpenLayers.Popup.FramedCloud.prototype.autoSize =　false;
// ここから今までのスクリプトを修正します。
AutoSizePopup = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
  autoSize: true,
  maxSize: new OpenLayers.Size(150,150)
});
  
var markers = new OpenLayers.Layer.Markers("Marker");
  map.addLayer(markers);

addMarkers();

function addMarkers(){
  var ll, popupClass, popupContentHTML;
     
  ll = new OpenLayers.LonLat(-26000, -74000);
  popupClass = AutoSizePopup;
  popupContentHTML = "<img src='./mapsign/tatsu2.png' width='150px' height='150px'></img>";
  addMarker(ll, popupClass, popupContentHTML, true);

  ll = new OpenLayers.LonLat(-27000, -75000);
  popupClass = AutoSizePopup;
  popupContentHTML = "<img src='./mapsign/36.gif' width='32px' height='32px'></img>";
  addMarker(ll, popupClass, popupContentHTML, true);

  ll = new OpenLayers.LonLat(-25000, -73000);
  popupClass = AutoSizePopup;
  popupContentHTML = "<img src='./mapsign/35.gif' width='32px' height='32px'></img>";
  addMarker(ll, popupClass, popupContentHTML, true);

}
     
function addMarker(ll, popupClass, popupContentHTML, overflow) {

  var feature = new OpenLayers.Feature(markers, ll);
  feature.popupClass = popupClass;
  feature.data.popupContentHTML = popupContentHTML;
  feature.data.overflow = (overflow) ? "auto" : "hidden";

  var marker = feature.createMarker();
  markers.addMarker(marker);
  marker.events.register("mousedown", feature, mousedown);


function mousedown(evt) {
  if (this.popup == null) {
    this.popup = this.createPopup(true);
    map.addPopup(this.popup);
    this.popup.show();
  } else {
    this.popup.toggle();
  }
    currentPopup = this.popup;
    OpenLayers.Event.stop(evt);
}

} //function init() の最後

OpenLayers 16g Popup.FramedCloud

OpenLayers.Popup を OpenLayers.FramedCloud にします。

---
OpenLayers.Popup.FramedCloud.prototype.autoSize = false; // 追加
AutoSizePopup = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { // 修正
  autoSize: true,
  maxSize: new OpenLayers.Size(150,150) // 修正　（スクロールバー表示のため）
});
popupClass = AutoSizePopup;
popupContentHTML = "<img src='./mapsign/tatsu2.png' width='150px' height='150px'></img>";
overflow = true; // 追加
---
var ll = new OpenLayers.LonLat(-26000,-74000);
var feature = new OpenLayers.Feature(markers, ll);
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = (overflow) ? "auto" : "hidden"; // 追加
---

OpenLayers 16f Popup.AnchoredBubble

OpenLayers.PopupAnchored を OpenLayers.Popup.AnchoredBubble にします。
見にくいのでポップアップを変更したものもみてください。
角が丸くなってます。

---
AutoSizePopup = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
---

OpenLayers 16e Popup.Anchored

OpenLayers.Popup を OpenLayers.Popup.Anchored にします。

---
AutoSizePopup = OpenLayers.Class(OpenLayers.Popup.Anchored, {
---

closeBox をつけるには次のようにします。

---
function mousedown(evt) {
  if (popup == null) {
    popup = feature.createPopup(true); // 修正
    map.addPopup(popup);
  } else {
    popup.toggle();
  }
  OpenLayers.Event.stop(evt);
}
---

OpenLayers 16d Popupの非表示/表示

ポップアップを非表示から始めたい場合は次のようにします。
次のスクリプトをコメントアウトします。

/*popup = new OpenLayers.Popup(
  "chicken", 
  new OpenLayers.LonLat(-25500,-74500),
  new OpenLayers.Size(100,100),
  "<img src='./mapsign/tatsu2.png'></img>",
  true);
map.addPopup(popup);
*/

次の行を追加します。

AutoSizePopup = OpenLayers.Class(OpenLayers.Popup, {
  autoSize: true,
  maxSize: new OpenLayers.Size(100,100) // 最大サイズ autoSizeとペアで使用
});
popupClass = AutoSizePopup;
popupContentHTML = "<img src='./mapsign/tatsu2.png' width='150px' height='150px'></img>";
// ここから変更なし
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var ll = new OpenLayers.LonLat(-26000,-74000);
var feature = new OpenLayers.Feature(markers, ll);
// ここまで
feature.popupClass = popupClass; // 追加
feature.data.popupContentHTML = popupContentHTML; // 追加
---

*AutoSizePopup 内の autoSize と maxSize はペアで使用します。
*<img src='./mapsign/tatsu2.png' width='150px' height='150px'></img>の width と height を指定しないと最初の表示でポップアップの大きさが、0px x 0px になります。

function mousedown(evt) を次のように修正します。

function mousedown(evt) {
  if (popup == null) {
    popup = feature.createPopup();
    map.addPopup(popup);
  } else {
    popup.toggle();
  }
  OpenLayers.Event.stop(evt);
}

OpenLayers 16c Popupの表示/非表示

マーカーをクリックしてその属性をポップアップ表示するには、

---
map.addPopup(popup);
// ここから
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var ll = new OpenLayers.LonLat(-26000,-74000);
var feature = new OpenLayers.Feature(markers, ll);

marker = feature.createMarker();
markers.addMarker(marker);
marker.events.register("mousedown", feature, mousedown);

function mousedown(evt) {
  popup.toggle();
}
// ここまで
---

最初からポップアップ表示されていますが、クリックで「表示/非表示」切り替えができます。

OpenLayers 16b Popup表示の変更

ポップアップを変更してみます。
変更するための関数を追加します。
また、その関数を実行するリンクを追加します。

---
} //function init() の最後

//ここを追加
function changer() {
  popup.setBackgroundColor("#ffcccc");
  popup.setSize(new OpenLayers.Size(100,100));
  popup.setBorder("2px solid");    
  popup.setContentHTML("High Chickens");            
}
//ここまで

</script>
</head>
<body onload="init()">
  <h1 id="title">Map Control Application</h1>
  <div id="layerswitcher" style="position:absolute; z-index:1;"></div>
  <div id="map"></div>
  <div id="paneldiv" class="olControlNavToolbar"></div>
  <!-- ここを追加 function changer を実行 -->
  <div style="background-color:#ccccff; margin-left:50px;" onclick="changer()"> click to modify popup's attributes</div>
---

リンクをクリックすると Popup の表示が変更されます。

OpenLayers 16a Popupの表示

OpenLayers サイトの Example の Popup Matrix（popupMatrix.html ポップアップ表示（外観）のリスト）、Popup Mayhem（popups.html ポップアップ作成と削除など）を参考に Popup を表示してみます。

ポップアップウィンドウを表示します。
地図表示部分のスクリプトに次のPopup のための基本スクリプトを追加します。

---
<script type="text/javascript">
  var popup;
---
  popup = new OpenLayers.Popup(
    "chicken",                            // 名前 id（文字列 String） 
    new OpenLayers.LonLat(-25500,-74500), // 座標（経度緯度 lon,lat）これはmeter
    new OpenLayers.Size(100,100),         // サイズ（ピクセル px）
    "example popup",                      // 内容 contentHTML
    true);                                // 閉じるボタン closeBox（真偽 Boolean）
  map.addPopup(popup);

// 確認のためにマーカーを表示します。

  markers = new OpenLayers.Layer.Markers("Marker");
  map.addLayer(markers);

  markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-26000,-74000)));

} //function init() の最後
---

サイズが150x150の画像を表示してみます。

---
popup = new OpenLayers.Popup(
  "chicken", 
  new OpenLayers.LonLat(-25500,-74500),
  new OpenLayers.Size(100,100),
  "<img src='./mapsign/tatsu2.png'></img>", //用意した画像のパス
  true
);
map.addPopup(popup);
---

設定サイズより大きい場合はスクロールバーが自動で追加されます。