#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]
(https://openlayers.org/)
位置情報の取得方法については、以下のリンクをご参照願います。
[kintoneの位置情報の取得方法]
(https://qiita.com/owlmeister/items/2f85476ad3cbec5fd061)
この記事が少しでもお役に立ったら、幸いです。
以上、マイスター・ギルドのフクロウでした。