Argo Floats// source http://jsbin.com/zufagew

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"
   integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
   crossorigin=""/>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"
   integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="
   crossorigin=""></script>

  <link rel="stylesheet" href="https://fullergalway.github.io/leaflet-ant-path/dist/styles.css" />
  <script src="https://fullergalway.github.io/leaflet-ant-path/dist/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  <title>Argo Floats</title>
  
<script src="https://api.demo.marine.ie/graphql/graphqldap.js"></script>

<script>
GraphqlDAP.prototype.list_argo_float_cycles = function(
                                  bbox
                                            ){
  var query =  [
      "query list_argo_float_cycles($bbox: String!){",
      "  floats: imi{",
      "  cycles: argoFloats{",
      "    data(bbox: $bbox){",
      "      platform_number",
      "      project_name",
      "      cycle_number",
      "      latitude",
      "      longitude",
      "      time",
      "    }",
      "  }",
      " }",
      "}",
      "",
      "",
      ""
    ].join("\n");
  var variables = {
    bbox: bbox
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('bbox')){
    variables = {};
    var varnames = [
          "bbox"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "list_argo_float_cycles";
  return this.$fetch(query, variables, operationName);
}

GraphqlDAP.prototype.get_platform_route = function(
                                  platform_number
                                            ){
  var query =  [
      "query get_platform_route($platform_number: String!){",
      "  floats: imi{",
      "  route: argoFloats{",
      "    data(platform_number: {eq: $platform_number}){",
      "      cycle_number",
      "      latitude",
      "      longitude",
      "    }",
      "  }",
      " }",
      "}",
      "",
      "",
      ""
    ].join("\n");
  var variables = {
    platform_number: platform_number
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('platform_number')){
    variables = {};
    var varnames = [
          "platform_number"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "get_platform_route";
  return this.$fetch(query, variables, operationName);
}
GraphqlDAP.prototype.argo_profile = function(
                                  platform_number,
                                  cycle_number
                                            ){
  var query =  [
      "query argo_profile($platform_number: String!, $cycle_number: Int!){",
      "  floats: imi{",
      "  argo: argoFloats{",
      "    data(platform_number: {eq: $platform_number}, cycle_number:{eq:$cycle_number}){",
      "      platform_number",
      "      cycle_number",
      "      project_name",
      "      time",
      "      latitude",
      "      longitude",
      "    }",
      "  }",
      "  profile: argoFloats{",
      "    data(platform_number: {eq: $platform_number}, cycle_number: {eq: $cycle_number}){",
      "      pres",
      "      psal",
      "      temp",
      "    }",
      "  }",
      " }",
      "}",
      ""
    ].join("\n");
  var variables = {
    platform_number: platform_number,
    cycle_number: cycle_number
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('platform_number')){
    variables = {};
    var varnames = [
          "platform_number",
          "cycle_number"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "argo_profile";
  return this.$fetch(query, variables, operationName);
}
</script>
<script src="//code.highcharts.com/highcharts.js"></script>
<style id="jsbin-css">
#map { height: 500px; }
</style>
</head>
<body class="container">
  <div class="row">
  <div class="col-md-6"><div id="map"></div></div>
    <div class="col-md-6"><h1>Argo Data Investigator</h1>
    </div>
  <div class="col-md-6"><div id="temperatureSalinityChart"><p class="lead">Click on the dots to add or remove data points.</p></div></div>
  </div>
  <div class="col-md-6"><div id="temperatureChart"></div></div>
  <div class="col-md-6"><div id="salinityChart"></div></div>

var getCycleTooltip = function(props){
  return ["<b>Project:</b> "+props.project_name,
        "<b>Platform:</b> "+props.platform_number,
        "<b>Cycle:</b> "+props.cycle_number,
        "<b>Date:</b> "+props.time.substring(0,10),
        "<b>Location:</b> "+props.latitude+","+props.longitude].join("<br>")
}

var argoClicked = function(e){
  var props = e.target.feature.properties;
  get_platform_route(props);
  selectArgo(props);
}

var unselectArgo = function(e){
  var discard = e.target.feature.properties;
  selected_argo_cycles = selected_argo_cycles.filter(function(x){
    return !(x.platform_number == discard.platform_number && x.cycle_number == discard.cycle_number);
  });
  updateSelectedArgos();
};

map.on('moveend', function(e) {
   show_argos();
  updateHash();
});

//input: pressure in decibars
//output: depth in meters
function calculateSeaDepth(pressure, latitude) {

//x = [sin (latitude / 57.29578) ] ^ 2
    var xVar = Math.pow((Math.sin(latitude / 57.29578)), 2);

//g (m/sec2) = 9.780318 * [ 1.0 + ( 5.2788x10 -3  + 2.36x10 -5  * x) * x ] + 1.092x10 -6  * p
    var gravityVar = (9.780318 * (1 + (((5.2788 * Math.pow(10, -3)) + ((2.36 * Math.pow(10, -5)) * xVar)) * xVar))) + ((1.092 * Math.pow(10, -6)) * pressure);

//depth (meters) = [(((-1.82x10 -15  * p + 2.279x10 -10 ) * p - 2.2512x10 -5 ) * p + 9.72659) * p] / g
    var depth = ((((((((-1.82 * Math.pow(10, -15)) * pressure) + (2.279 * Math.pow(10, -10))) * pressure) - (2.2512 * Math.pow(10, -5))) * pressure) + 9.72659) * pressure) / gravityVar;

return depth;
}

var showCharts = function(argos){
  showTemperatureChart(argos);
  showSalinityChart(argos);
  showTemperatureSalinityChart(argos);
}

return s.join("");
                        }
                    }
});
  for(var i=0;i<chart.series.length;i++){
    argos[i].color = chart.series[i].color;
  }
}

<\!-- Part 2/3  extend grapqhldap with prototype function -->
<script>
GraphqlDAP.prototype.list_argo_float_cycles = function(
                                  bbox
                                            ){
  var query =  [
      "query list_argo_float_cycles($bbox: String!){",
      "  floats: imi{",
      "  cycles: argoFloats{",
      "    data(bbox: $bbox){",
      "      platform_number",
      "      project_name",
      "      cycle_number",
      "      latitude",
      "      longitude",
      "      time",
      "    }",
      "  }",
      " }",
      "}",
      "",
      "",
      ""
    ].join("\n");
  var variables = {
    bbox: bbox
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('bbox')){
    variables = {};
    var varnames = [
          "bbox"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "list_argo_float_cycles";
  return this.$fetch(query, variables, operationName);
}

GraphqlDAP.prototype.get_platform_route = function(
                                  platform_number
                                            ){
  var query =  [
      "query get_platform_route($platform_number: String!){",
      "  floats: imi{",
      "  route: argoFloats{",
      "    data(platform_number: {eq: $platform_number}){",
      "      cycle_number",
      "      latitude",
      "      longitude",
      "    }",
      "  }",
      " }",
      "}",
      "",
      "",
      ""
    ].join("\n");
  var variables = {
    platform_number: platform_number
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('platform_number')){
    variables = {};
    var varnames = [
          "platform_number"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "get_platform_route";
  return this.$fetch(query, variables, operationName);
}
GraphqlDAP.prototype.argo_profile = function(
                                  platform_number,
                                  cycle_number
                                            ){
  var query =  [
      "query argo_profile($platform_number: String!, $cycle_number: Int!){",
      "  floats: imi{",
      "  argo: argoFloats{",
      "    data(platform_number: {eq: $platform_number}, cycle_number:{eq:$cycle_number}){",
      "      platform_number",
      "      cycle_number",
      "      project_name",
      "      time",
      "      latitude",
      "      longitude",
      "    }",
      "  }",
      "  profile: argoFloats{",
      "    data(platform_number: {eq: $platform_number}, cycle_number: {eq: $cycle_number}){",
      "      pres",
      "      psal",
      "      temp",
      "    }",
      "  }",
      " }",
      "}",
      ""
    ].join("\n");
  var variables = {
    platform_number: platform_number,
    cycle_number: cycle_number
  };
  if( arguments.length === 1 &&
      typeof arguments[0] === 'object' &&
      arguments[0].hasOwnProperty('platform_number')){
    variables = {};
    var varnames = [
          "platform_number",
          "cycle_number"
];
    varnames.forEach(function(params,varname){
       if(params.hasOwnProperty(varname)){
         variables[varname] = params[varname];
       };
    }.bind(null,arguments[0]));
  }
  var operationName = "argo_profile";
  return this.$fetch(query, variables, operationName);
}
<\/script>
<script src="//code.highcharts.com/highcharts.js"><\/script>
</head>
<body class="container">
  <div class="row">
  <div class="col-md-6"><div id="map"></div></div>
    <div class="col-md-6"><h1>Argo Data Investigator</h1>
    </div>
  <div class="col-md-6"><div id="temperatureSalinityChart"><p class="lead">Click on the dots to add or remove data points.</p></div></div>
  </div>
  <div class="col-md-6"><div id="temperatureChart"></div></div>
  <div class="col-md-6"><div id="salinityChart"></div></div>

</body>
</html></script>

var argoClicked = function(e){
  var props = e.target.feature.properties;
  get_platform_route(props);
  selectArgo(props);
}

map.on('moveend', function(e) {
   show_argos();
  updateHash();
});

//input: pressure in decibars
//output: depth in meters
function calculateSeaDepth(pressure, latitude) {

//x = [sin (latitude / 57.29578) ] ^ 2
    var xVar = Math.pow((Math.sin(latitude / 57.29578)), 2);

return depth;
}

var showCharts = function(argos){
  showTemperatureChart(argos);
  showSalinityChart(argos);
  showTemperatureSalinityChart(argos);
}

return s.join("");
                        }
                    }
});
  for(var i=0;i<chart.series.length;i++){
    argos[i].color = chart.series[i].color;
  }
}

https://code.jquery.com/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

https://fullergalway.github.io/leaflet-ant-path/dist/bundle.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js