geopack/Definitions.js

This is a npm package for the geoglows package

// THIS IS  THE HELPER MODULE FOR THE HYDROVIEWER//
var $ = require("jquery");
require('jquery-ui');
var myTime=require('leaflet-timedimension');
var d3=require("d3");
// window.$ = window.jQuery = require('jquery);
// var $, jQuery;
// $ = jQuery = require('jquery');
var L = require('leaflet');
var esri=require('esri-leaflet');
// var forecast=require('./scripts/getForecast.js');
// var historical=require('./scripts/getHistorical.js');
// var seasonal=require('./scripts/getSeasonal.js');
var geoglows=require('./Geoglows.js');
// var helper=require('./helpers.js');

//HELPERS FUNCTIONS///
function addContentToTabs (tab, tabContent){
  tab.addEventListener("click", function (){
    console.log("entering the forecast tab");

    //remove buttonElement or create Button
    if( document.getElementById ("download") != null){
      console.log("remove button?");
      $("#download").remove();
    }
    else{
      // var buttonElement=document.createElement("button");
      // buttonElement.innerHTML="Donwload Forecast Data";
      // buttonElement.setAttribute("id", "download");
      // divContainer.appendChild(buttonElement);
    }


    var divContainer=document.getElementById(tabContent);
    divContainer.style.display='block';

    //Define the content of the tab
    if(tabContent=='forecast'){
      geoglows.forecast.graph_f(reachid,tabContent);
      // document.getElementById ("download").addEventListener("click", function() {
      //   geoglows.forecast.downloadData(reachid);
      // } , false);
    }
    else if(tabContent=='historical'){
      geoglows.historical.graph_h(reachid,tabContent);
      // document.getElementById ("download").addEventListener("click", function() {
      //   geoglows.historical.downloadData(reachid);
      // } , false);
    }
    else if(tabContent=='seasonal'){
      geoglows.seasonal.graph_s(reachid,tabContent);
      // document.getElementById ("download").addEventListener("click", function() {
      //   geoglows.seasonal.downloadData(reachid);
      // } , false);
    }
  });

}

function createSliderUI(startTime, endTime){
  var sliderControl = L.control({ position: "bottomleft"} );

  sliderControl.onAdd = function(map) {

    var slider = L.DomUtil.create("input", "range-slider");

    L.DomEvent.addListener(slider, 'mousedown', function(e) {
      L.DomEvent.stopPropagation(e);
    });

    $(slider)
      .attr({'type':'range',
        'max': endTime,
        'min': startTime,
        'step': 1})
        .on('input change', function() {
          console.log($(this).val().toString());
        // updatePropSymbols($(this).val().toString());
      });
    return slider;
  }

  sliderControl.addTo(map)
}

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
};




module.exports={
  defineMapService: function(divContainer,basemap,globalLayer){
    console.log($);
    var url="https://livefeeds2dev.arcgis.com/arcgis/rest/services/GEOGLOWS/GlobalWaterModel_Medium/MapServer"
    var startTime;
    var endTime;
    map = L.map(divContainer);
    // divContainer.appendChild(newMap);
    esri.basemapLayer(basemap).addTo(map);

    $.getJSON(url+"?f=pjson", function(data) {
      console.log("Get JSon");
        textents = data.timeInfo.timeExtent
        tinterval = data.timeInfo.defaultTimeInterval
        console.log(textents);
        console.log(tinterval);
        // var timeExtent = new TimeExtent();
        console.log("this is to know the true start time");
        startTime=new Date(textents[0]);
        endTime= new Date(textents[1]);
        console.log(startTime);
        console.log("this is to know the true end time");
        console.log(endTime);



        // $("#slider.noUiSlider").data({
        //   start: [startTime,endTime],
        //   behaviour: 'drag',
        //   connect: true,
        //   range: {
        //     min: startTime,
        //     max: endTime
        //   }
        // });


        // CREATE THE GLOBALLAYER IN LEAFLET//
        globalLayer=esri.dynamicMapLayer({
            url: url,
            useCors: false,
            layers: [0],
            // for some reason this service in particular sometimes redirects json requests to a bogus IP address
            // f: 'image'
            from: startTime,
            to: endTime
        }).addTo(map);
        console.log(globalLayer);

        // POPUP FOR THE DIFFERENT STREAMS //
        globalLayer.bindPopup(function(error, featureCollection){
          // specify popup options
          var tabs=document.createElement("div");
          tabs.setAttribute("id", "tabs");

          var tabsList=document.createElement("ul");
          tabsList.setAttribute("id", "listTabs");
          tabsList.style.display='block';

          tabs.appendChild(tabsList);

          var forecastTab=document.createElement("li");
          forecastTab.setAttribute("id", "forecast2");
          forecastTab.innerHTML = "Forecast";
          tabsList.appendChild(forecastTab);


          var historicalTab=document.createElement("li");
          historicalTab.setAttribute("id", "historical2");
          historicalTab.innerHTML = "Historical";

          tabsList.appendChild(historicalTab);

          var seasonalTab=document.createElement("li");
          seasonalTab.setAttribute("id", "seasonal2");
          seasonalTab.innerHTML="Seasonal"
          tabsList.appendChild(seasonalTab);


          var forecastContent=document.createElement("div");
          forecastContent.setAttribute("id", "forecast");
          tabs.appendChild(forecastContent);

          var historicalContent=document.createElement("div");
          historicalContent.setAttribute("id", "historical");
          tabs.appendChild(historicalContent);

          var seasonalContent=document.createElement("div");
          seasonalContent.setAttribute("id", "seasonal");
          tabs.appendChild(seasonalContent);



          //getting the COMID id from the stream reach//
          var option="COMID (Stream Identifier)"
          reachid=featureCollection.features[0].properties[option];
          console.log(reachid);

          // divContainer.style.display='block';

          geoglows.forecast.graph_f(reachid,"forecast");
          if( document.getElementById ("download") != null){
            console.log("remove button?");
            $("#download").remove();
          };

          var buttonElement=document.createElement("button");
          buttonElement.innerHTML="Donwload Forecast Data";
          buttonElement.setAttribute("id", "download");
          forecastContent.appendChild(buttonElement);


          // document.getElementById ("download").addEventListener("click", function() {
          //   geoglows.forecast.downloadData(reachid);
          // } , false);

          //add listeners//
          addContentToTabs(forecastTab,"forecast" );
          addContentToTabs(historicalTab,"historical");
          addContentToTabs(seasonalTab,"seasonal");

          return tabs
        });

        //DEFINE THE SLIDER
        // createSliderUI(startTime,endTime);
        var sliderControl = L.control({ position: "bottomleft"});
        var startControl = L.control({ position: "topright"});
        // var startButtonControl= L.control({position: "topleft"});

        startControl.onAdd= function(map){
          var startButton = L.DomUtil.create("input", "button");
          startButton.type("button");
          startButton.title="x";
          startButton.value = "x";
          startButton.label = "x";
          container.style.width = '40px';
          container.style.height = '40px';
          return startButton


        }
        // sliderControl2.onAdd = function(map) {
        //
        //   var slider2 = L.DomUtil.create("input", "range-slider");
        //   // var buttonStart=L.DomUtil.create("submit", "button");
        //   // var buttomStop=L.DomUtil.create("submit", "button");
        //   L.DomEvent.addListener(slider2, 'mousedown', function(e) {
        //     L.DomEvent.stopPropagation(e);
        //   });
        // }

        sliderControl.onAdd = function(map) {

          var slider = L.DomUtil.create("input", "range-slider");
          // var startButton= document.createElement("button");
          // startButton. innerHTML = "Do Something";
          // slider.appendChild(startButton);
          // var buttonStart=L.DomUtil.create("submit", "button");
          // var buttomStop=L.DomUtil.create("submit", "button");
          L.DomEvent.addListener(slider, 'mousedown', function(e) {
            L.DomEvent.stopPropagation(e);
          });


          $(slider)
            .attr({'type':'range',
              'max': endTime,
              'min':startTime,
              'value': 0,
              'step': 20})
              .on('input change', function() {
                console.log($(this).val().toString());
                console.log(startTime);
              // updatePropSymbols($(this).val().toString());
              globalLayer.setTimeRange(startTime.addDays(($(this).val())/20), new Date(endTime));
            });




          return slider;
        }


        sliderControl.addTo(map);
        // startControl.addTo(map);

        //DEFINE THE SLIDER AND ITS AUTOMATION
        var myTimer;
        console.log("my slider control");
        console.log(sliderControl._container);
        $("#startSlider").on("click", function() {
          // var classes;
          var actualTime=0;
          var start=startTime;
          var end=endTime;
          var timeStep=Number(sliderControl._container.step);
          // var value=0;
          console.log("cliking button");
         clearInterval (myTimer);
          myTimer = setInterval (function() {
            console.log("THis is the start date");
            console.log(start);
            console.log("this is the actual time");
            console.log(actualTime);
            //CHANGE THE CONFIGURATION//
            sliderControl._container.setAttribute("min",start);
            sliderControl._container.setAttribute("value",actualTime);

            globalLayer.setTimeRange(start,end);

            actualTime=Number(sliderControl._container.value);

            //DEFINE THE IF STATEMENTS TO LOOP THE ANIMATIONS//
            if(actualTime==100){
              console.log("FINAL");
              start=startTime;
              actualTime=0;
            }
            else {
              start=start.addDays(1);
              actualTime=actualTime+timeStep;
            }

            }, 1000);
        });

        $("#stopSlider").on("click", function() {
          clearInterval(myTimer);
        })

    });

  },
  chooseCountry: function (country, backgroundColor){
    if(country!="global"){

      $.getJSON("/countries.geojson",function(data){
          // add GeoJSON layer to the map once the file is loaded
        console.log("Printing data");
        console.log(data);
        // var country=data.features[22];
        var arrayFeaturesCountries=data.features;
        var index=arrayFeaturesCountries.findIndex(x => x.properties.name==country);
        console.log("index");
        console.log(index);
        var countryD=arrayFeaturesCountries[index];
        var bboxCountry=countryD.geometry.coordinates;
        var lats = []; var lngs = [];
        var borderCoordinate=[];


        if(bboxCountry.length<=1){
          console.log("Case of only size =1");
          for (var i = 0; i < bboxCountry[0].length; i++)  {
              lats.push(bboxCountry[0][i][1]);
              lngs.push(bboxCountry[0][i][0]);
              borderCoordinate.push([bboxCountry[0][i][1],bboxCountry[0][i][0]]);
              // // following not needed to calc bbox, just so you can see the points
              // L.marker([bboxCountry[0][i][1], bboxCountry[0][i][0]]).addTo(map);
          }
        }
        else{
          for(var j = 0; j < bboxCountry.length; j++){
            console.log("this is the subarray");
            console.log(bboxCountry[j]);
            console.log(bboxCountry[j][0].length);

            for (var i = 0; i < bboxCountry[j][0].length; i++)  {
                lats.push(bboxCountry[j][0][i][1]);
                // console.log("adding lat");
                // console.log(bboxCountry[j][0][i][1]);
                lngs.push(bboxCountry[j][0][i][0]);
                // console.log("adding long");
                borderCoordinate.push([bboxCountry[j][0][i][1],bboxCountry[j][0][i][0]]);

                // // following not needed to calc bbox, just so you can see the points
                // L.marker([bboxCountry[0][i][1], bboxCountry[0][i][0]]).addTo(map);
            }
          }
        }

        // calc the min and max lng and lat

        var minlat = Math.min.apply(null, lats),
            maxlat = Math.max.apply(null, lats);


        var minlng = Math.min.apply(null, lngs),
            maxlng = Math.max.apply(null, lngs);



        // create a bounding rectangle that can be used in leaflet
        bbox = [[minlat,minlng],[maxlat,maxlng]];
        console.log("this is my bbox");
        console.log(bbox);
        //
        // // console.log(index);
        // // console.log(country);
        data.features.splice(index, 1);
        // console.log(data);
        map.fitBounds(bbox);
        console.log(map.getZoom());
        map.options.minZoom=map.getZoom();
        console.log("my c");
        console.log(borderCoordinate);
        // var countryBorder = L.polyline(borderCoordinate,{
        //   color: '#728c69',
        //   weight: 7,
        //   opacity: 0.7,
        //   smoothFactor: 1
        //
        // }).addTo(map);


        // map.zoomIn(1);

        console.log("trying with geoJson");
        L.geoJson(data, {style: function(feature){
            var fillColor=backgroundColor;
            return { color: "#999", weight: 2, fillColor: fillColor, fillOpacity: 1  };
          }
        }).addTo(map);

      });
    }
  }
}