<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル 01</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
</style>
</head>
<body>
<header>OpenLayers 基本地図</header>
<div id="link"><a href="./ols-map.html">Openlayers</a></div>
<div id="map"></div>
<script>
// 表示位置
var tottori = ol.proj.fromLonLat([138.72731,35.36063]);
var view = new ol.View({
center: tottori,
zoom: 10
});
// マーカー設定
var marker = new ol.Feature(new ol.geom.Point(tottori));
var markerStyle = new ol.style.Style({
image: new ol.style.Icon ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: 'https://kurage.ready.jp/w_map/img/mkr.gif'
})
});
marker.setStyle(markerStyle);
// 地図の表示
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
})
})
],
view: view
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マーカー付き地図</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
#content { width: 100%; height: 100%;padding: 4px; }
body #content p { margin: 0 0 0 0 ; }
body .popup {
left: -36px ; top: -81px ;
position: relative ; display: inline-block ;
margin: 1.5em 0 ; padding: 3px 6px ;
width: auto ; background: #FeF ;
box-sizing: border-box ; font-size: 12px ;
border: solid 1px #555 ; border-radius: 6px;
}
</style>
</head>
<body>
<header>マーカー付き地図</header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="map" class="map"></div>
<div id="pop_pfq" class="popup">
<div id="content"> </div>
</div>
<script>
var container = document.getElementById('pop_pfq');
var content = document.getElementById('content');
var popupoverlay = new ol.Overlay({ element: container });
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
],
overlays:[popupoverlay], // 吹き出しオーバーレイを追加
view: new ol.View({
center: ol.proj.fromLonLat([142.854154,43.663575]), // 大雪山 旭岳
zoom: 8
})
}); // map ------------
var markerStyleA = new ol.style.Style({ // マーカスタイルを作成
image:new ol.style.Icon({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 0.75,
// src: '../img/mkg.gif'
src: 'https://kurage.ready.jp/w_map/img/mkg.gif'
})
});
var markerA = new ol.Feature({ // Featureオブジェクトとしてマーカを作成
geometry: new ol.geom.Point(ol.proj.fromLonLat([142.854154,43.663575])),
name: "大雪山 <a href='https://kurage.ready.jp/jtaisetu/taisetu.html#jiki' target='_blank'>旭岳</a>" // 吹き出し内に表示するコンテンツ
});
markerA.setStyle(markerStyleA);
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({ features: [markerA] })
}));
map.on('click', function(evt){ // マーカ(feature)をクリックしたら吹出を表示
var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature){return feature;});
if(feature){
content.innerHTML = '<p>'+feature.get('name')+'</p>'; // コンテンツを書き込む
var coordinate = feature.getGeometry().getCoordinates(); // マーカの座標を取得
popupoverlay.setPosition(coordinate); // 吹出オーバーレイの位置に座標を適用
}else{
popupoverlay.setPosition(undefined); //マーカ以外の場所をクリックしたら吹出を消す
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" >
<title>OpenLayers 線を引く</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
</style>
</head>
<body>
<header>OpenLayers 線を引く</header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="map"></div>
<script>
const coordinates = [ // 経度、緯度の順で定義
[135.495650, 34.702113],[139.767130, 35.680776]
];
const centerP = ol.proj.fromLonLat([137.63139,35.1914445]);
var route = new ol.geom.LineString(coordinates);
route.transform('EPSG:4326', 'EPSG:3857'); // 地理座標系(WGS84) の EPSG:4326 からメルカトル図法の EPSG:3857 に変換します
const routeCoords = route.getCoordinates();
const routeLength = routeCoords.length;
const routeFeature = new ol.Feature({
type: 'route',
geometry: route
});
const startMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[0])
});
const endMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(routeCoords[routeLength - 1])
});
const styles = {
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2, color: [237, 30, 164, 0.8]
})
}),
'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://kurage.ready.jp/w_map/img/mkr.gif' // マーク画像 url
})
})
};
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature, startMarker, endMarker]
}),
style: function(feature) {
return styles[feature.get('type')];
}
});
var map = new ol.Map({
target: document.getElementById('map'),
view: new ol.View({
center: centerP, // center: routeCoords[0],
zoom: 7
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
]
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>タイル切替え地図</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#TileSelect{ position:absolute; top:16px; right:10px; }
#mapcontainer { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
</style>
</head>
<body>
<!-- プルダウンメニュー -->
<select id="TileSelect" name="Tile_Select" onChange="TileSet()">
<option value="0">OpenStreetMap</option>
<option value="1">Humanitarian map style</option>
<option value="2">OpenTopoMap</option>
<option value="3" selected>地理院地図</option>
<option value="4">地理院写真</option>
<option value="5">陰影起伏図</option>
<option value="6">白地図</option>
</select>
<header>タイル切替え地図</header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="mapcontainer"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css">
<script>
var MapTile = [
OSMtile = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: "c <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors",
url: "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
})
}),
HOTtile = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: "c <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors, Tiles: c <a href='http://map.hotosm.org/' target='_blank'>HOT</a>",
url: "http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
})
}),
OTMtile = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: "c <a href='<a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors, <a href='http://viewfinderpanoramas.org/' target='_blank'>SRTM</a> | map style: c <a href='https://opentopomap.org/' target='_blank'>OpenTopoMap</a>",
url: "http://a.tile.opentopomap.org/{z}/{x}/{y}.png"
})
}),
Chitile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
})
}),
Shatile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図（写真）</a>',
})
}),
Ineitile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png",
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
})
}),
Hakutile = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png",
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
})
})
];
var currentTile = 3;
var map;
function init_map() {
map = new ol.Map({
target: 'mapcontainer',
layers: [MapTile[currentTile]],
view: new ol.View({
center: ol.proj.fromLonLat([138.7313889, 35.3622222]), //初期の中心位置 [経度, 緯度]
zoom: 11 //ズームレベル
})
});
}
function TileSet() {
map.removeLayer(MapTile[currentTile]);
currentTile = document.getElementById("TileSelect").value;
map.addLayer(MapTile[currentTile]);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>OpenLayers 場所選択地図</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
#combo_div { position: relative; text-align:center; }
select { font-size: 1.4rem; }
</style>
<script>
var hd_arr = "順位,山名,標高(m)";
var dt_arr = [
"1,富士山,3776.24",
"2,北岳,3193.2",
"3,奥穂高岳,3190",
"4,間ノ岳,3190",
"5,槍ヶ岳,3180",
"6,悪沢岳,3141",
"7,赤石岳,3120.53",
"8,涸沢岳,3110",
"9,北穂高岳,3106",
"10,大喰岳,3101"
];
var lotlat_arr = [
[138.727363, 35.360626 ],
[138.238, 35.674 ],
[137.64805, 36.28916 ],
[138.2283,35.6461 ],
[137.64749, 36.34194 ],
[138.1825, 35.500833 ],
[138.1572, 35.461 ],
[137.64694, 36.29583 ],
[137.65194, 36.30249 ],
[137.64583, 36.33583 ]
];
function combo_mk() {
var select = document.createElement( 'select' );
select.add( new Option( "", 0 ) );
var no = 1;
for (const dt_s of dt_arr) {
hd_str = dt_s.split(',')[1];
select.add( new Option( hd_str, no ) );
++ no;
}
combo_div.innerHTML = select.outerHTML;
select_on(); //選択イベントをセット
}
function select_on() { //コンボボックスに選択イベントをセット
var select = document.getElementsByTagName( 'select' )[0];
select.onchange = function(){
var selectedItem = this.options[ this.selectedIndex ];
zahyou(selectedItem.value);
}
}
var gsi_layer = new ol.layer.Tile({
source: new ol.source.XYZ({ // 地理院地図
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
})
});
var map; // 地図表示
function map_init() {
map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([new ol.control.FullScreen(), new ol.control.ScaleLine()]),
layers: [ gsi_layer ],
view: new ol.View({
center: ol.proj.fromLonLat([138.5, 38.5]),
zoom: 6
})
});
}
function zahyou(no) {
if (no == 0) {
map.getView().setCenter(ol.proj.fromLonLat([138.5, 38.5]));
map.getView().setZoom(5);
} else {
map.getView().setCenter(ol.proj.fromLonLat(lotlat_arr[no-1]));
map.getView().setZoom(16);
}
}
</script>
<body onload="combo_mk();map_init();">
<header>場所選択地図 <span id="combo_div"></span></header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="map"></div>
</body>
</html><!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>OpenLayers 場所選択地図</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
#combo_div { position: relative; text-align:center; }
select { font-size: 1.4rem; }
</style>
<script>
var hd_arr = "順位,山名,標高(m)";
var dt_arr = [
"1,富士山,3776.24",
"2,北岳,3193.2",
"3,奥穂高岳,3190",
"4,間ノ岳,3190",
"5,槍ヶ岳,3180",
"6,悪沢岳,3141",
"7,赤石岳,3120.53",
"8,涸沢岳,3110",
"9,北穂高岳,3106",
"10,大喰岳,3101"
];
var lotlat_arr = [
[138.727363, 35.360626 ],
[138.238, 35.674 ],
[137.64805, 36.28916 ],
[138.2283,35.6461 ],
[137.64749, 36.34194 ],
[138.1825, 35.500833 ],
[138.1572, 35.461 ],
[137.64694, 36.29583 ],
[137.65194, 36.30249 ],
[137.64583, 36.33583 ]
];
function combo_mk() {
var select = document.createElement( 'select' );
select.add( new Option( "", 0 ) );
var no = 1;
for (const dt_s of dt_arr) {
hd_str = dt_s.split(',')[1];
select.add( new Option( hd_str, no ) );
++ no;
}
combo_div.innerHTML = select.outerHTML;
select_on(); //選択イベントをセット
}
function select_on() { //コンボボックスに選択イベントをセット
var select = document.getElementsByTagName( 'select' )[0];
select.onchange = function(){
var selectedItem = this.options[ this.selectedIndex ];
zahyou(selectedItem.value);
}
}
var gsi_layer = new ol.layer.Tile({
source: new ol.source.XYZ({ // 地理院地図
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
attributions: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院地図</a>',
})
});
var map; // 地図表示
function map_init() {
map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([new ol.control.FullScreen(), new ol.control.ScaleLine()]),
layers: [ gsi_layer ],
view: new ol.View({
center: ol.proj.fromLonLat([138.5, 38.5]),
zoom: 6
})
});
}
function zahyou(no) {
if (no == 0) {
map.getView().setCenter(ol.proj.fromLonLat([138.5, 38.5]));
map.getView().setZoom(5);
} else {
map.getView().setCenter(ol.proj.fromLonLat(lotlat_arr[no-1]));
map.getView().setZoom(16);
}
}
</script>
<body onload="combo_mk();map_init();">
<header>場所選択地図 <span id="combo_div"></span></header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="map"></div>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>地図上に図形を描画</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
header { text-align:center; font-size:1.5rem; }
#link{ position:absolute; top:8px; left:10px; }
#map { position:absolute;top:2.8rem;left:5px;right:5px;bottom:5px; }
</style>
</head>
<body>
<header>地図上に図形を描画</header>
<div id="link"><a href="./ols-map.html">openlayers</a></div>
<div id="map"></div>
<script>
// 描画された図形に適用されるスタイル
var styleFunction = function(feature) {
var geometry = feature.getGeometry();
var styles = [];
if (geometry.getType() == 'Point') {
// 点の場合、マーカー配置
styles.push(new ol.style.Style({
image: new ol.style.Icon ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: 'https://openlayers.org/en/latest/examples/data/icon.png'
})
}));
} else if (geometry.getType() == 'LineString'){
styles.push(new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
}));
} else {
styles.push(new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.3)',
})
}));
}
return styles;
};
// 図形を描画するレイヤーを定義する
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
// 描画用ボタンの配置
// マーカーボタン
var MarkerControl = (function (Control) {
function MarkerControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
button.innerHTML = '※';
button.name = 'Point';
button.classList.add('map-button');
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control';
element.style.top = '100px';
element.style.left = '5px';
element.appendChild(button);
Control.call(this, {
element: element,
target: options.target
});
button.addEventListener('click', this.drawMarker.bind(this), false);
}
if ( Control ) MarkerControl.__proto__ = Control;
MarkerControl.prototype = Object.create( Control && Control.prototype );
MarkerControl.prototype.constructor = MarkerControl;
MarkerControl.prototype.drawMarker = function drawMarker () {
addInteractions('Point');
};
return MarkerControl;
}(ol.control.Control));
// Linstringボタン
var LineStringControl = (function (Control) {
function LineStringControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
button.innerHTML = '＜';
button.name = 'LineString';
button.classList.add('map-button');
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control';
element.style.top = '140px';
element.style.left = '5px';
element.appendChild(button);
Control.call(this, {
element: element,
target: options.target
});
button.addEventListener('click', this.drawLineString.bind(this), false);
}
if ( Control ) LineStringControl.__proto__ = Control;
LineStringControl.prototype = Object.create( Control && Control.prototype );
LineStringControl.prototype.constructor = LineStringControl;
LineStringControl.prototype.drawLineString = function drawLineString () {
addInteractions('LineString');
};
return LineStringControl;
}(ol.control.Control));
// 円ボタン
var CircleControl = (function (Control) {
function CircleControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
button.innerHTML = 'О';
button.name = 'Circle';
button.classList.add('map-button');
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control';
element.style.top = '180px';
element.style.left = '5px';
element.appendChild(button);
Control.call(this, {
element: element,
target: options.target
});
button.addEventListener('click', this.drawCircle.bind(this), false);
}
if ( Control ) CircleControl.__proto__ = Control;
CircleControl.prototype = Object.create( Control && Control.prototype );
CircleControl.prototype.constructor = CircleControl;
CircleControl.prototype.drawCircle = function drawCircle () {
addInteractions('Circle');
};
return CircleControl;
}(ol.control.Control));
// 多角形ボタン
var PolygonControl = (function (Control) {
function PolygonControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
button.innerHTML = '△';
button.name = 'Polygon';
button.classList.add('map-button');
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control';
element.style.top = '220px';
element.style.left = '5px';
element.appendChild(button);
Control.call(this, {
element: element,
target: options.target
});
button.addEventListener('click', this.drawPolygon.bind(this), false);
}
if ( Control ) PolygonControl.__proto__ = Control;
PolygonControl.prototype = Object.create( Control && Control.prototype );
PolygonControl.prototype.constructor = PolygonControl;
PolygonControl.prototype.drawPolygon = function drawPolygon () {
addInteractions('Polygon');
};
return PolygonControl;
}(ol.control.Control));
// 地図の初期化
var map = new ol.Map({
controls: ol.control.defaults().extend([
new MarkerControl(), // マーカーボタン
new LineStringControl(), // LineStringボタン
new CircleControl(), // 円ボタン
new PolygonControl // 多角形ボタン
]),
target: 'map',
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
}), vectorLayer
],
loadTilesWhileAnimating: true,
view: new ol.View({
center: ol.proj.fromLonLat([138.72731,35.36063]),
zoom: 9
})
});
// 図形描画処理
var draw, snap;
function addInteractions(type) {
// 描画モードの切り替え
if (draw) {
map.removeInteraction(draw);
draw = null;
}
draw = new ol.interaction.Draw({
source: vectorSource,
type: type
});
map.addInteraction(draw);
// マウスカーソルが図形の座標に近づいたときにカーソルを合わせる
if (!snap) {
snap = new ol.interaction.Snap({source: vectorSource});
map.addInteraction(snap);
}
// 現在の描画モードのボタンを色付けする
$(".map-button").css('color', 'white');
$(".map-button[name='" + type + "']").css('color', 'red');
}
</script>
</body>
</html>