var debug = {};

var map = L.map('map').setView([36.131, 140.241], 8); // Kasumigaura

//OSMレイヤー追加
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
        maxZoom: 16
    }
).addTo(map);


var mvtSource = new L.TileLayer.MVTSource({
  url: "./tileFuel/{z}/{x}/{y}.pbf",
  debug: false,
  clickableLayers: ["gs_map"],
  getIDForLayerFeature: function(feature) {
    return feature.properties.id;
  },

  /**
   * The filter function gets called when iterating though each vector tile feature (vtf). You have access
   * to every property associated with a given feature (the feature, and the layer). You can also filter
   * based of the context (each tile that the feature is drawn onto).
   *
   * Returning false skips over the feature and it is not drawn.
   *
   * @param feature
   * @returns {boolean}
   */
  filter: function(feature, context) {
    if (feature.layer.name === 'gs_map') {
      return true;
    }
    return false;
  },

  style: function (feature) {
    var style = {};

    var type = feature.type;
    if (type == 1) {
        //'Point'
        var fixed = feature.properties.fixed;
        if (fixed > 0) {
            if (fixed > 49) {
                style.color = 'rgba(0,255,0,1)';
            }
            else {
                style.color = 'rgba(255,200,0,1)';
            }
        }
        else {
            style.color = 'rgba(255,0,0,1)';
        }
        style.radius = 5;
        style.selected = {
          radius: 6
        };
    }
    return style;
  }
});

//Globals that we can change later.
var fillColor = 'rgba(149,139,255,0.4)';
var strokeColor = 'rgb(20,20,20)';

//Add layer
map.addLayer(mvtSource);