diff --git a/client/src/app/instance/search/components/result/cone-search-plot.component.ts b/client/src/app/instance/search/components/result/cone-search-plot.component.ts index d2fe65100bf3687103866a26b7e8babdd8bfae2b..139e9a79a11e36a9a70737ad41b3256183394bd2 100644 --- a/client/src/app/instance/search/components/result/cone-search-plot.component.ts +++ b/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