LSP stats map coordinates (WIP)

lsp/main.css

@@ -455,8 +455,19 @@ button[disabled=disabled] {
   margin: 0.1em;
   padding: 0 0.5em;
 }
+#graphcontainer .graph > .graphforeground {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+#graphcontainer .graph > .graphbackground {
+  position: absolute;
+  display: block;
+  opacity: 0.5;
+}
 #graphcontainer .graph {
-  height: 250px;
+  height: 400px;
+  margin: 0 auto;
 }
 .legend {
   font-size: 0.8em;

lsp/pages.js

@@ -1535,6 +1535,69 @@ function showTab(tabName,streamName) {
           $('#'+graph.id).children('.graph,.legend').html('');
           return; 
         }
+        switch (graph.type) {
+          case 'coords':
+            //format [lat,long]
+            var data = [[-54.657438,-65.11675],[49.725719,-1.941553],[-34.425464,172.677617],[76.958669,68.494178],[0,0]];
+            //correct latitude according to the Miller cylindrical projection
+            for (var i in  data) {
+              var lat = data[i][0];
+              var lon = data[i][1];
+              //to radians
+              lat = Math.PI * lat / 180;
+              var y = 1.25 * Math.log(Math.tan(0.25 * Math.PI + 0.4 * lat));
+              data[i] = [lon,y];
+            }
+            console.log(data);
+            
+            plotsets = [{data:data}];
+            //make sure the plot area has the correct height/width ratio
+            if ($('#'+graph.id+' .graphbackground').length == 0) {
+              var parent = $('#'+graph.id+' .graph');
+              var mapheight = 2450;
+              var mapwidth = 3386.08;
+              parent.height(parent.width()*mapheight/mapwidth);
+              var placeholder = $('<div>').addClass('graphforeground')
+              parent.html(
+                $('<img>').attr('src','map.svg').addClass('graphbackground').width(parent.width).height(parent.height())
+              ).append(
+                placeholder
+              );
+            }
+            else {
+              var placeholder = $('#'+graph.id+' .graphforeground');
+            }
+            plot = $.plot(
+              placeholder,
+              plotsets,
+              {
+                legend: {show: false},
+                xaxis: {
+                  show: false,
+                  min: -170,
+                  max: 190
+                },
+                yaxis: {
+                  show: false,
+                  min: -2.248101053,
+                  max: 2.073709536
+                },
+                series: {
+                  lines: {show: false},
+                  points: {show: true}
+                },
+                grid: {
+                  hoverable: true,
+                  margin: 0,
+                  border: 0,
+                  borderWidth: 0,
+                  minBorderMargin: 0
+                }
+              }
+            );
+            break;
+          case 'time':
+          case 'default':
           var yaxes = [];
           var yaxesTemplates = {
             percentage: {
@@ -1685,6 +1748,8 @@ function showTab(tabName,streamName) {
               }
             }
           );
+          break;
+        } //end of graph type switch
         $('#'+graph.id+' .legend').html(
           $('<div>').addClass('legend-list').addClass('checklist')
         );