function changeDistrict(sel) {

  var value = sel.value;
  if(!value) {
    if(map.getSource('district-each')) {
      map.removeLayer('district-each')
      map.removeSource('district-each')
    }
    var selectedProv = $("#province-select").val()
    var intProv = parseInt(selectedProv)
    var data = provincesMap[intProv];
    var latlng = data.coordinates;
    map.flyTo({
      center: {
        lat: latlng[1],
        lng: latlng[0]
      },
      speed: 0.4,
      zoom: data.zoom
    });
    return
  }
  var distData = districtsMap[value]
  map.fitBounds(distData.bbox);
  var selectDataType = $("#data-select").val()
  if(selectDataType === "covid") {
    addCovidEachCase()
  } else {
    addDataEachCase(selectDataType, value);
  }

  function addDataEachCase(type, distID) {
    var startDate = $("#date-range").data('daterangepicker').startDate.format('YYYY-MM-DD');
    var endDate = $("#date-range").data('daterangepicker').endDate.format('YYYY-MM-DD');
    var distDataURL = eachDist + "?start_date='" + startDate + "'&end_date='" + endDate + "'&type=" + type + "&district=" + distID

    $.ajax({
      type: "GET",
      url: distDataURL,
      dataType: "json",
      success: function (districtCases) {
        //alert(response);
        addEachDistrictDataCases(districtCases)
      }
    });

    function addEachDistrictDataCases(cases) {
      // map.addImage('gradient', { width: width, height: width, data: data });
      var data = cases.results
      // if(data.length) == 0 toastr.info("Now data for this selection!")
      var features = []
      for(var i in data) {
        let cs = data[i]
        var feature = {
          date: cs.date,
          province_name: cs.province_name,
          distict: cs.district_name,
          type: dataMap[cs.type],
          description: cs.description,
          report_id: cs.report_id,
          icon: 'point'
        }
        var geometry = {
          type: "Point",
          coordinates: [cs.lng, cs.lat]
        }
        features.push({
          type: "Feature", properties: feature, geometry: geometry
        })
      }
      const distCases = { type: "FeatureCollection", features: features }

      if(map.getSource('district-each')) {
        map.getSource('district-each').setData(distCases)
        return
      }
      map.addSource('district-each', {
        type: 'geojson',
        data: distCases,
      })
      map.addLayer({
        'id': 'district-each',
        'type': 'symbol',
        'source': 'district-each',
        'layout': {
          'visibility': 'visible',
          'icon-image': 'marker',
          // get the title name from the source's "title" property
          'text-field': ['get', 'type'],
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top'

        }
      })
      map.on('click', 'district-each', function (e) {

        var popup = new mapboxgl.Popup({
          closeButton: true,
          closeOnClick: true
        });
        var data = e.features[0]
        var {
          description,
          report_id
        } = data.properties

        const dt = `<div class="full-length" role="tooltip">
           <div class='popup-header'><a href='https://nepalmonitor.org/reports/view/${report_id}' target="_blank"> ${description}</a></div>
         </div>
         </div>`

        var coordinates = e.lngLat
        var description = dt
        while(Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }
        popup
          .setLngLat(coordinates)
          .setHTML(description)
          .addTo(map);
      });
      map.on('mouseover', 'district-each', function (e) {
        map.getCanvas().style.cursor = 'pointer';
      })

      map.on('mouseleave', 'district-each', function () {
        map.getCanvas().style.cursor = '';
      });

    }

  }




  function addCovidEachCase() {
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    var trgt = 'https://bipad.gov.np/api/v1/covid19-case?district=' + value + '&limit=-1';
    $.ajax({
      type: "GET",
      url: proxyUrl + trgt,
      dataType: "json",
      success: function (districtCases) {
        addEachDistrictCases(districtCases)
      }
    });

    function addEachDistrictCases(cases) {
      var data = cases.results
      var features = []
      // if(data.length) == 0 toastr.error("No data found.")
      for(var i in data) {
        let cs = data[i]
        var feature = {
          province: provincesMap[cs.province],
          distict: sel.value,
          gender: cs.gender,
          age: cs.age,
          state: cs.currentState,
          icon: 'harbor'
        }
        features.push({
          type: "Feature", properties: feature, geometry: cs.point
        })
      }
      const distCases = { type: "FeatureCollection", features: features }

      if(map.getSource('district-each')) {
        map.getSource('district-each').setData(distCases)
        return
      }

      map.addSource('district-each', {
        type: 'geojson',
        data: distCases,
      })
      map.addLayer({
        'id': 'district-each',
        'type': 'symbol',
        'source': 'district-each',
        'layout': {
          'visibility': 'visible',
          'icon-image': ['concat', ['get', 'icon'], '-15'],
          // get the title name from the source's "title" property
          'text-field': ['get', 'state'],
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top'

        }
      })

    }
  }
}
