WIP => plot

client/src/app/instance/search/components/result/cone-search-plot.component.ts

@@ -40,6 +40,17 @@ export class ConeSearchPlotComponent implements OnInit {
         this.coneSearchPlot();
     }
 
+    getHrefBackgroundImage() {
+            //const scale = this.width / (this.rad * 2);
+            const scale = this.coneSearch.radius / this.width;     // arcsec/pix
+            return `https://skyserver.sdss.org/dr16/SkyServerWS/ImgCutout/getjpeg?TaskName=Skyserver.Chart.Image
+                &ra=${this.coneSearch.ra}
+                &dec=${this.coneSearch.dec}
+                &scale=${scale}
+                &width=${this.width}
+                &height=${this.height}`;
+    }
+
     coneSearchPlot(): void {
         // Init SVG
         const svg = d3.select('#plot').append('svg')
@@ -49,11 +60,16 @@ export class ConeSearchPlotComponent implements OnInit {
             .append('g')
             .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
 
-        // Set Domain
-        this.x = d3.scaleLinear().range([this.width, 0]);
-        this.y = d3.scaleLinear().range([this.height, 0]);
-        this.x.domain([this.coneSearch.ra - (this.coneSearch.radius / 3600) / Math.cos(this.coneSearch.dec * this.degTorad), this.coneSearch.ra + (this.coneSearch.radius / 3600) / Math.cos(this.coneSearch.dec * this.degTorad)]);
-        this.y.domain([this.coneSearch.dec - (this.coneSearch.radius / 3600), this.coneSearch.dec + (this.coneSearch.radius / 3600)]);
+        // Set Domain  RA->DEG, DEC->DEG, RADIUS->ARCSEC
+        const coneSearchDomain = this.getConeSearchDomain();
+        this.x = d3.scaleLinear().range([this.width, 0]).domain([coneSearchDomain.raMin, coneSearchDomain.raMax]);
+        this.y = d3.scaleLinear().range([this.height, 0]).domain([coneSearchDomain.decMin, coneSearchDomain.decMax]);
+
+        // Background image
+        svg.append('image')
+            .attr('xlink:href', this.getHrefBackgroundImage())
+            .attr('width', this.width)
+            .attr('height', this.height);
 
         // Add X axe
         svg.append("g")
@@ -85,4 +101,17 @@ export class ConeSearchPlotComponent implements OnInit {
             })
             .on('mouseout', () => { d3.select('.tooltip').remove(); });
     }
+
+    private getConeSearchDomain() {
+        const radiusInDegrees = this.coneSearch.radius / 3600;
+
+        const decMin = this.coneSearch.dec - radiusInDegrees;
+        const decMax = this.coneSearch.dec + radiusInDegrees;
+
+        const raCorrectedRadius = radiusInDegrees / Math.cos(this.degTorad * (Math.abs(this.coneSearch.dec) + radiusInDegrees));
+        const raMin = this.coneSearch.ra - raCorrectedRadius;
+        const raMax = this.coneSearch.ra + raCorrectedRadius;
+        
+        return { raMin, raMax, decMin, decMax };
+    }
 }
\ No newline at end of file