kintone ドラッグ可能なマーカーをマップに表示してみる

こんにちは、マイスター・ギルドのフクロウと申します。
今回は「open street mapにドラッグ可能なマーカーを表示してみよう。」です。
分かりやすいページがなかなか見つからなかったため、メモとして書きました。

使用するライブラリ

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

##マップにドラッグ可能なマーカーを表示してみる。
下記がコードになります。

function ShowMap(){

//マーカーの初期表示場所の指定
let coordinate = convertCoordinate(135.514383,34.6974254);

let styleMarker = new ol.style.Style({
     image: new ol.style.Icon({
     scale: 1.5,
     src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAZCAYAAADe1WXtAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHwSURBVEiJpdW9a9NRFMbxT9qmNWmSRqlFhE6CLuIL1DcUHDqJm/0HBEUk3RQXpW7dXdysWlAEHQSlo4IoIohQKFJQxKWIIlTb5pc2anMdkmBbmleHZ3vul3Pvc865QggaCfu6uIOtTfkbGboYTRIN8yvJd5xoG4psmqk9LH0gBMJTQh+FJOPobAmKo718zbFcrACr+kI4TpThHQYbQhHr4WqG6MkG2FqtEsb5nWQJZ2pCMZDh5RBLc3WAa/WGsIMozV0k1kExnGR+jOKfJoFVLRBGKKT4jL0hBLq51kfhRZ2D04Qblfes5blNKcFynItwYTf5Ug3zc0KyolSlslrgIQpxxiCWYWaC0mbGUUIHASFDeFwD+Kjcbh/RWX3Tw1mixTYrzRP6iXBsXfppHl6m2M6bXqLYx4PNWmpnguhTi+m/L99iEf2bNn8P108RtQI9Qj5Ort5Ebenl27MmgfcoZZhFR93Zx8gu8o2GYIGQLYdzqKmFkuHtTVbrQXOsZJhsZUvtT1P4UQM4/S+cbS3t0xSTOVY2AkuEA+Q7Od/Okt6eID+7ATpRDmcGsba+k26unCRfBc6XRzXCwba+k0q18RRzUxXoOZZT3Kp3piG0Aj49SP41IcFPZP8bWmmxVwOsxDjbjL8pKPZ3c79eOGv1F5xHWAKxXNwiAAAAAElFTkSuQmCC'
   })
});

let marker = new ol.geom.Point(coordinate);
let featureMarker = new ol.Feature(marker);

let vector = new ol.layer.Vector({
  source: new ol.source.Vector({
  features: [featureMarker] //配列にしないとエラーが起きます。
  }),
 style: [styleMarker]
});
      
let map = new ol.Map({
  target: 'map',
  layers: 
     [new ol.layer.Tile({
         source: new ol.source.OSM()
     }), vector],
  view: new ol.View({ center: coordinate, zoom: 8 })
});
      
let translate = new ol.interaction.Translate({
  features: new ol.Collection([featureMarker])
});
      
map.addInteraction(translate);
      
//ドラッグイベントの定義
map.on('pointermove', function(e) {
   if (e.dragging) return;
   let hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
     map.getTargetElement().style.cursor = hit ? 'pointer' : '';
   });
}

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

今回のコードは以下のページのコードを参考にさせていただきました。
JSFiddle ドラック可能なマーカー

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

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