// token を取得してセットする
mapboxgl.accessToken = 'pk.eyJ1IjoibmFrYW5pc2hpIiwiYSI6ImNqc3gwOGx0ejBuZ28zeXFqNmdtcmZta2IifQ.N7to3Ev75bjnH9O81Cun6w';

// mapboxgl.Map コンストラクターから map オブジェクトを作る
// その際、初期値として情報を渡す
// のちのちこの map オブジェクトに色々操作を加える
var map = new mapboxgl.Map({
  // map を紐づける DOM element 
  // id もしくは DOM element を指定する
  container: 'map',
  // よくわからない。自分でスタイルを作成できる模様。
  style: 'mapbox://styles/mapbox/light-v9',
  // 地図の中心地
  center: [-90.96, -0.47],
  // 拡大倍率 小数点以下も有効  12.6 とか
  zoom: 8
});

map.on('load', function () {
  // ここでもろもろ実行する
}

map.addLayer({
    id: "locations",
    type: "symbol",
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: "geojson",
      data: stores
    },
    layout: {
      // ここでアイコンの見た目を決めている模様
      "icon-image": "restaurant-15",
      "icon-allow-overlap": true
    }
  });

// Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
// 特定のレイヤーの feature がクリックされた時にだけハンドラを実行しているぽい
map.on("click", "symbols", function(e) {
  // e.features に 上記 stores の features の内容が入ってきている
  // しかし e には features というプロパティはなさそう謎
  
  // flyTo というマップの移動をするメソッドの中心地に利用している
  map.flyTo({ center: e.features[0].geometry.coordinates });
});

// Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.

// canvas 上にあるマウスを変更することで擬似的にクリッカブルアイテム風に見せている
map.on("mouseenter", "symbols", function() {
  map.getCanvas().style.cursor = "pointer";
});

// Change it back to a pointer when it leaves.

// 同じく戻す
map.on("mouseleave", "symbols", function() {
  map.getCanvas().style.cursor = "";
});

map.on("click", function(e) {
  // Query all the rendered points in the view
  // queryRenderedFeatures メソッドで、ある地点近くにある feature を取ってこれるっぽい
  var features = map.queryRenderedFeatures(e.point, { layers: ["locations"] });
});

var popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat(currentFeature.geometry.coordinates)
  .setHTML(
    "<h3>Sweetgreen</h3>" + "<h4>" + currentFeature.properties.address + "</h4>"
  )
  .addTo(map);

// これは使わないので削除
map.addLayer({...})

// こっちで追加
map.addSource('places', {
  type: 'geojson',
  data: stores
});

var el = document.createElement('div');
el.className = 'marker';

// eventListener を普通に DOM に追加する
el.addEventListener('click', function (e) {
  var activeItem = document.getElementsByClassName('active');
  // 1. Fly to the point
  flyToStore(marker);
  // 2. Close all other popups and display popup for clicked store
  createPopUp(marker);
  // 3. Highlight listing in sidebar (and remove highlight for all other listings)
  e.stopPropagation();
});

// el が DOM なので、DOM をマーカーとしてぶっこんで運用する
new mapboxgl.Marker(el, { offset: [0, -23] })
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);