kintone으로지도를 보자!

안녕하세요, 마이스터 길드 올빼미라고합니다!
이번 기사는 kintone에서 라이브러리 "OpenLayers"를 사용하여 맵을 표시하는 방법을 소개합니다.

kintone developer network의 페이지에도 맵의 표시 방법은 실려 있습니다.
그러나 아래의 페이지에서는 이미지 파일에 포함되어 있는 위치 정보를 취득하여 표시하는 것을 실시하고 있어, 맵을 표시하는 것만이 목적의 분에게는 불필요한 코드가 포함되어 있습니다.
https://developer.cybozu.io/hc/ko/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의 위치 정보를 얻는 방법

이 기사가 조금이라도 도움이되면 다행입니다.

이상, 마이스터 길드의 올빼미였습니다.