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);

});

var url2 = "/gis-tutorials/tutorial-data/airports.geojson"

var airportStyle = {
  color: "black",
  radius: 5,
  weight: 0,
  fillOpacity: 1,
  pane: "markerPane"
};

var airports = L.geoJson(null, {
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, airportStyle)
  },
  onEachFeature: function(feature, airport) {
    airport.bindPopup(feature.properties.NAME)
  }
}).addTo(map);

var aData = omnivore.geojson(url2, null, airports);

var airportJson;

aData.on('ready', function() {
    aData.toGeoJSON();
    airportJson = aData.toGeoJSON();
});

var highlightStyle = {
    color: "goldenrod",
    fillColor: "goldenrod",
    opacity: 1,
    fillOpacity: 1,
    pane: "markerPane"
}

var highlight = new L.geoJson(null, {
    pointToLayer: function(feature, latlng) {
	return new L.circleMarker(latlng, highlightStyle)
    }
}).addTo(map);

counties.on("mouseover", function(e) {
    highlight.clearLayers();
    var selLayer = new L.geoJson(e.layer.toGeoJSON());
    var within = turf.within(airportJson, selLayer.toGeoJSON());
    highlight.addData(within);
});