kintoneでライブラリ「OpenLayers」を使用して マップを表示する方法

4700 ワード
kintone JavaScript マップ OpenStreetMap JavaScript テキストリンク

kintoneでマップを表示しよう！

こんにちは、マイスター・ギルドのフクロウと申します！
今回の記事は、kintoneでライブラリ「OpenLayers」を使用して、マップを表示する方法をご紹介

kintone developer networkのページにもマップの表示方法は載っています。
しかし、下記のページでは画像ファイルに含まれている位置情報を取得して、表示するということを行っており、マップを表示するだけが目的の方にとっては、不要なコードが含まれています。
https://developer.cybozu.io/hc/ja/articles/212897383-OpenStreetMap%E3%81%A7%E5%86%99%E7%9C%9F%E3%81%AE%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

そのため、この記事ではマーカーを一つだけ描写したマップの表示方法を載せております。

表示に成功すると以下の画像のようなの地図が表示されます！

使用するライブラリ

ライブラリ バージョン 備考
OpenLayers 6.3.1 CybozuのCDNで提供されいているライブラリを使用

マップの表示コード

そのまま、コピーしてお使いいただけるように調整済みです。

※注意事項
1、kintoneの一覧画面のヘッダ部への表示を想定しています。
2、必ず、サイボウズが提供しているCDNのOpenlayersのライブラリを追加してください。

(function() {
    'use strict';

    kintone.events.on('app.record.index.show', function(event) {

      //追加したいスペースを指定して、nullチェック(増殖バグ防止)
      if (document.getElementById('map') !== null) {
          return;
      }

　　　//一覧画面のヘッダ部の要素を取得
      let mapSpace = kintone.app.getHeaderSpaceElement();
      $(mapSpace).append('<div id="map" style="width:400px; height:400px"></div>');

      //緯度と経度をを渡して、マップを表示
      setMarkerAndShowMap(mapSpace, 34.6970417, 135.5165234);
      });
    })();

  // マーカーをセットして、マップを表示
  function setMarkerAndShowMap(spaceElement,currentLat,currentLng) {
   let map = new ol.Map({
              target: 'map',
              layers: [
                  new ol.layer.Tile({
                      source: new ol.source.OSM()
                  })
              ],
              view: new ol.View({
                  zoom: 8
              })
          });

    //経度と緯度を変換
    let coordinate = convertCoordinate(currentLng, currentLat);

    //マーカーの作成
    let marker = makeMarkerOverlay(coordinate);

　　//マップにマーカを追加する
    map.addOverlay(marker);

　　// 緯度経度を球面メルカトル図法に変換
    let latestCoordinate = convertCoordinate(currentLng,currentLat);

    //指定した位置をマップの中央にセット
    map.getView().setCenter(latestCoordinate);
  }

　// マーカーを表示するレイヤーを作成
  function makeMarkerOverlay(coordinate) {
      let imgElement = document.createElement('img');
      let imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAZCAYAAADe1WXtAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHwSURBVEiJpdW9a9NRFMbxT9qmNWmSRqlFhE6CLuIL1DcUHDqJm/0HBEUk3RQXpW7dXdysWlAEHQSlo4IoIohQKFJQxKWIIlTb5pc2anMdkmBbmleHZ3vul3Pvc865QggaCfu6uIOtTfkbGboYTRIN8yvJd5xoG4psmqk9LH0gBMJTQh+FJOPobAmKo718zbFcrACr+kI4TpThHQYbQhHr4WqG6MkG2FqtEsb5nWQJZ2pCMZDh5RBLc3WAa/WGsIMozV0k1kExnGR+jOKfJoFVLRBGKKT4jL0hBLq51kfhRZ2D04Qblfes5blNKcFynItwYTf5Ug3zc0KyolSlslrgIQpxxiCWYWaC0mbGUUIHASFDeFwD+Kjcbh/RWX3Tw1mixTYrzRP6iXBsXfppHl6m2M6bXqLYx4PNWmpnguhTi+m/L99iEf2bNn8P108RtQI9Qj5Ort5Ebenl27MmgfcoZZhFR93Zx8gu8o2GYIGQLYdzqKmFkuHtTVbrQXOsZJhsZUvtT1P4UQM4/S+cbS3t0xSTOVY2AkuEA+Q7Od/Okt6eID+7ATpRDmcGsba+k26unCRfBc6XRzXCwba+k0q18RRzUxXoOZZT3Kp3piG0Aj49SP41IcFPZP8bWmmxVwOsxDjbjL8pKPZ3c79eOGv1F5xHWAKxXNwiAAAAAElFTkSuQmCC';
      imgElement.setAttribute('src', imgSrc);

      let markerOverlay = new ol.Overlay({
          element: imgElement,
          position: coordinate,
          positioning: 'center-center'
      });

      return markerOverlay;
  }

  // 緯度経度を球面メルカトル図法に変換
　function convertCoordinate(longitude, latitude) {
 　   return ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857');
　}

最後に

今回はシンプルにマップ表示にマーカーを一つ表示しただけですが、
上記のコードを変更してもらえれば、複数のマーカーを表示することもできます。

OpenLayersについては以下のページをご覧ください。
OpenLayers

位置情報の取得方法については、以下のリンクをご参照願います。
kintoneの位置情報の取得方法

この記事が少しでもお役に立ったら、幸いです。

以上、マイスター・ギルドのフクロウでした。