// ===================================================================
var center_lon = 140.241;   // 中心の経度（霞ヶ浦）
var center_lat = 36.131;    // 中心の緯度（霞ヶ浦）

var initZoom = 11; // ズームの初期値
var MinZoom  = 6;   // ズームの最小値（最も広い範囲）
var MaxZoom  = 17;  // ズームの最大値（最も狭い範囲）

var initPrecision = 8; // 座標表示の小数点以下の桁数の初期値
// *******************************************************************

// 表示用の view 変数の定義。
const view = new ol.View({
    center: ol.proj.fromLonLat([center_lon, center_lat]),
    zoom: initZoom,
    maxZoom: MaxZoom,
    minZoom: MinZoom
});

const ort = new ol.layer.Tile({
    source: new ol.source.OSM(),
    title: "OpenStreetMap",
    visible: true
});
/*
grayOsmLayer.on('postcompose', function(event) {
    grayscale(event.context);
});
*/

var mvtSource0 = new L.TileLayer.MVTSource({
    url: "./tiles/tileBus0/{z}/{x}/{y}.pbf",
    style: function (feature) {
        var style = {};
        style.color = 'rgba(255,0,0,1)';
        style.radius = 5;
        style.selected = {
          radius: 6
        };
        return style;
    }
});
map.addLayer(mvtSource0);

var mvtSource1 = new L.TileLayer.MVTSource({
    url: "./tiles/tileBus1/{z}/{x}/{y}.pbf",
    style: function (feature) {
        var style = {};
        style.color = 'rgba(255,200,0,1)';
        style.radius = 5;
        style.selected = {
          radius: 6
        };
        return style;
    }
});
map.addLayer(mvtSource1);

var mvtSource2 = new L.TileLayer.MVTSource({
    url: "./tiles/tileBus2/{z}/{x}/{y}.pbf",
    style: function (feature) {
        var style = {};
        style.color = 'rgba(0,255,0,1)';
        style.radius = 5;
        style.selected = {
          radius: 6
        };
        return style;
    }
});
map.addLayer(mvtSource2);

var strokestyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(53, 175, 109, 0.7)',
        width:  4
    })
});

const mapillary = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        attributions: '© Mapillary',
        format: new ol.format.MVT(),
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
        tilePixelRatio: 16,
        opacity: 0.7,
        url: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'
    }),
    title: "Mapillary",
    visible: true,
    style: strokestyle
});

const map = new ol.Map({
    target: "map",
    controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
    view: view,
    layers: [ort, mvtSource0, mvtSource1, mvtSource2, mapillary]
});