/* Custom CSS*/
/*
.legend {
color: #555;
padding: 6px 8px;
font: 12px Arial, Helvetica, sans-serif;
font-weight: bold;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.legend ul {
list-style-type: none;
padding: 0;
margin: 0;
clear: both;
}
.legend li {
display: inline-block;
width: 30px;
height: 22px;
opacity: 0.7;
}
.legend .min {
float: left;
padding-bottom: 5px;
}
.legend .max {
float: right;
}
*/
var map = L.map("map");

map.setView([40.3,-96.6], 5);

L.hash(map);

L.control.scale().addTo(map);

var layerControl = new L.control.layers(null, null).addTo(map);

/*Easily add basemaps or baselayers with L.tileLayer wms layers can also be added with L.tileLayer.wms */

var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);

layerControl.addBaseLayer(OpenStreetMap_HOT, "Streets");

var url = "/gis-tutorials/tutorial-data/counties.topojson";

var counties = L.geoJson(null, {
  filter: function(feature) {
    if (feature.properties.state == 39) {
      return true
    }
  },
  style: function(feature) {
    switch (feature.properties.winner) {
      case "Trump":
        return {
          fillColor: "red",
          color: 'white',
          fillOpacity: 0.7
        }
      default:
        return {
          fillColor: "blue",
          color: 'white',
          fillOpacity: 0.7
        }
    }
  },
  onEachFeature: function(feature, county) {
    var info = county.feature.properties.NAME +
      '<' + 'br' + '>' + county.feature.properties.winner;
    county.bindPopup(info);
  }
}).addTo(map);

/*can put html inside here, this is one way you could add a legend*/
layerControl.addOverlay(counties, "Counties");

var cData = omnivore.topojson(url, null, counties);

cData.on('ready', function() {
  map.fitBounds(counties.getBounds())
});

// Search

cData.on("ready", function() {

	var searchControl = new L.Control.Search({
		layer: counties,
		propertyName: 'NAME',
	}).addTo(map);

});

// Choropleth

cData.on("ready", function() {
  map.removeLayer(counties);
  choropleth = L.choropleth(cData.toGeoJSON(), {
    filter: function(feature) {
      if (feature.properties.state == 39) {
        return true
      }
    },
    valueProperty: "POP_SQMI", // which property in the features to use
    scale: ["white", "#006d2c"], // chroma.js scale - include as many as you like
    steps: 7, // number of breaks or steps in range
    mode: "q", // q for quantile, e for equidistant, k for k-means
    style: {
      color: "#fff", // border color
      weight: 1,
      fillOpacity: 0.9
    },
    onEachFeature: function(feature, layer) {
      layer.bindTooltip(feature.properties.NAME + '<' + 'br' + '>' + +feature.properties.POPULATION)
    }
  }).addTo(map);

  layerControl.addOverlay(choropleth, "Choropleth");

  /*Legend Custom Leaflet Control*/
  var legend = L.control({ position: 'bottomright' });
  legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend')
    var colors = choropleth.options.colors
    var labels = []

    /* Add min & max*/
    div.innerHTML = '<div><h3 style="font-weight:bolder;font-size:larger;">Population Density</h3><br></div><div class="labels"><div class="min">Low</div> \
  <div class="max">High</div></div>'

  for (i = 1; i < colors.length; i++) {
      labels.push('<li style="background-color: ' + colors[i] + '"></li>')
    }

    div.innerHTML += '<ul style="list-style-type:none;display:flex">' + labels.join('') + '</ul>'
    return div
  }

  legend.addTo(map);
});