OpenLayers4での吹き出し表示(仮)

注意：「OL4勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

東京都庁と千葉県庁のマーカーをクリックすると吹き出し表示するサンプルデモです。（見にくいかもしれませんが薄い青色の丸が標準マーカーです）

<style>
  .mapdiv{height: 400px;width: 100%;}
  /*吹き出し用のスタイル*/
  .ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; }
  .ol-popup:after, .ol-popup:before { top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }
  .ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px; }
  .ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px; }
  .ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px; }
  .ol-popup-closer:after {content: "✖";}
</style>
 
<script>
  /* 外部CSSの読み込み */
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://openlayers.org/en/v4.6.5/css/ol.css");
</script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
 
<div id="mapdiv" class="mapdiv"></div>
<!-- 吹き出し用のDIV -->
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>
 
 
<script>
  //吹き出し用オーバレイ準備
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');
  var popoverlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  });
  //吹き出し閉じる用
  closer.onclick = function() {
    popoverlay.setPosition(undefined);
    closer.blur();
    return false;
  };  
 
  //---- マップ表示 ----
  //吹き出し用のレイヤー追加
  var view0 = new ol.View({center: ol.proj.fromLonLat([139.692,35.689]),zoom: 5});
  var map0 = new ol.Map({
    target: 'mapdiv',
    layers: [new ol.layer.Tile({source: new ol.source.OSM() })],
    overlays: [popoverlay],
    view: view0,
    controls: ol.control.defaults({attributionOptions: {collapsible: false}}),
  });
  map0.addControl(new ol.control.ZoomSlider());
 
  //---- マーカー関連 ----
  var marker0=[];
  //1個目のマーカー：吹き出しに表示するnameを追加
  marker0[0] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([139.692,35.689])),
    name: '<a href="http://www.metro.tokyo.jp/" target="_blank">東京都庁</a>'
  });
  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
    features: [marker0[0]]
  })}));
  //2個目のマーカー
  marker0[1] = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([140.122,35.604])),
    name: '<a href="https://www.pref.chiba.lg.jp/" target="_blank">千葉県庁</a>'
  });
  map0.addLayer(new ol.layer.Vector({source: new ol.source.Vector({
    features: [marker0[1]]
  })}));
 
  //吹き出しを表示するためのクリックイベント
  map0.on('click', function(evt) {
    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
    if (feature) {
      content.innerHTML = '<p>'+feature.get('name')+ '</p>';
      var coordinate = feature.getGeometry().getCoordinates();
      popoverlay.setPosition(coordinate);
    }
  });
 
</script>

0.吹き出し以外の部分はOpenLayers4でのマーカー表示(仮)など確認して下さい。

1.GoogleMapと違い吹き出しは自分でdivを用意しなければならないので、スタイルとdivを用意します

  /*吹き出し用のスタイル*/
  .ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px; }
  .ol-popup:after, .ol-popup:before { top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }
  .ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px; }
  .ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px; }
  .ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px; }
  .ol-popup-closer:after {content: "✖";}

<!-- マップ用DIVの次の行に、吹き出し用のDIVを追加 -->
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

2.吹き出し用のオーバーレイの準備と閉じるボタンを押した時の動作を設定

  //吹き出し用オーバレイ準備
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');
  var closer = document.getElementById('popup-closer');
  var popoverlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  });
  //吹き出し閉じる用
  closer.onclick = function() {
    popoverlay.setPosition(undefined);
    closer.blur();
    return false;
  };  

3.マップのオーバーレイを追加

    overlays: [popoverlay],

4.マーカー設定に表示するテキストを追加、HTMLも使えます

  name: '<a href="http://www.metro.tokyo.jp/" target="_blank">東京都庁</a>'

5.吹き出しを表示するためのクリックイベントを追加、クリックするとマーカー上か判断してマーカー上ならdivの内容を書き換えてマーカーのある座標に吹き出しを表示します。

  //吹き出しを表示するためのクリックイベント
  map0.on('click', function(evt) {
    var feature = map0.forEachFeatureAtPixel(evt.pixel,function(feature) {return feature;});
    if (feature) {
      content.innerHTML = '<p>'+feature.get('name')+ '</p>';
      var coordinate = feature.getGeometry().getCoordinates();
      popoverlay.setPosition(coordinate);
    }
  });

---

ここは旧トップページ＞日曜プログラミング