Allow customizing size and color source from its data content

sourceSize and color properties when creating a new Catalog now accepts a function
allowing to set different sizes/colors in function of the source catalog row

examples/al-cat-galaxy-shape.html

@@ -26,8 +26,16 @@
         limit: 1000,
         //orderBy: 'nb_ref',
         onClick: 'showTable',
-        color: 'yellow',
-        hoverColor: 'blue',
+        color: (s) => {
+          let coo = A.coo();
+          coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])
+
+          let a = (0.1 * Math.pow(10, +s.data.logD25)) / 60;
+          let b = (1.0 / Math.pow(10, +s.data.logR25)) * a
+
+          return `rgb(${s.data["logR25"]*255.0}, ${s.data["logR25"]*255.0}, 255)`
+        },
+        hoverColor: 'red',
         shape: (s) => {
           let coo = A.coo();
           coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])

examples/al-cat-proper-motion.html

@@ -31,15 +31,21 @@
         hoverColor: 'yellow',
         selectionColor: 'white',
         // Footprint associated to sources
-        shape: (s) => {
+        color: (s) => {
           // discard drawing a vector for big pm
           let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
           if (totalPmSquared > 6) {
             return;
           }
 
-          let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
-
+          return rainbowColorMap((totalPmSquared - 2.5) / 2)
+        },
+        shape: (s) => {
+          // discard drawing a vector for big pm
+          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+          if (totalPmSquared > 6) {
+            return;
+          }
           // Compute the mean of pm over the catalog sources
           if (!pmraMean || !pmdecMean) {
             pmraMean = 0, pmdecMean = 0;
@@ -62,7 +68,6 @@
             s.dec,
             s.ra + dra,
             s.dec + ddec,
-            {color}
           )
         }
       });

src/core/src/app.rs

@@ -844,12 +844,12 @@ impl App {
             );*/
             moc.draw(camera, projection, shaders)?;
 
-            gl.blend_func_separate(
+            /*gl.blend_func_separate(
                 WebGl2RenderingContext::SRC_ALPHA,
                 WebGl2RenderingContext::ONE,
                 WebGl2RenderingContext::ONE,
                 WebGl2RenderingContext::ONE,
-            );
+            );*/
             grid.draw(camera, projection, shaders)?;
             //        Ok(())
             //    },

src/core/src/renderable/grid/mod.rs

@@ -198,14 +198,15 @@ impl ProjetedGrid {
         if self.enabled {
             let fov = camera.get_field_of_view();
             let bbox = fov.get_bounding_box();
-            let max_dim_px = camera.get_width().max(camera.get_height()) as f64;
-            let step_line_px = max_dim_px * 0.2;
+            //let max_dim_px = camera.get_width().max(camera.get_height()) as f64;
+            //let step_line_px = max_dim_px * 0.15;
+
+            let aspect = camera.get_aspect() as f64;
 
             // update meridians
             self.meridians = {
                 // Select the good step with a binary search
-                let step_lon_precised =
-                    bbox.get_lon_size() * step_line_px / (camera.get_width() as f64);
+                let step_lon_precised = bbox.get_lon_size() * 0.15;
                 let step_lon = select_fixed_step(step_lon_precised);
 
                 let decimal_lon_prec = step_lon.to_degrees().log10().abs().ceil() as u8;
@@ -235,8 +236,7 @@ impl ProjetedGrid {
             };
 
             self.parallels = {
-                let step_lat_precised =
-                    bbox.get_lat_size() * step_line_px / (camera.get_height() as f64);
+                let step_lat_precised = aspect * bbox.get_lat_size() * 0.15;
                 let step_lat = select_fixed_step(step_lat_precised);
 
                 let decimal_lat_prec = step_lat.to_degrees().log10().abs().ceil() as u8;
@@ -349,7 +349,7 @@ const GRID_STEPS: &[f64] = &[
     0.08726647,
     0.17453293,
     0.34906585,
-    std::f64::consts::FRAC_PI_4,
+    std::f64::consts::FRAC_PI_6,
 ];
 
 fn select_fixed_step(fov: f64) -> f64 {

src/glsl/webgl2/line/base.frag

@@ -1,17 +1,25 @@
 #version 300 es
 
-precision lowp float;
+precision highp float;
+
 out vec4 color;
-in float l;
+in vec2 l;
 
 uniform vec4 u_color;
+uniform float u_thickness;
+uniform float u_width;
+uniform float u_height;
 
 void main() {
-    // Multiply vertex color with texture color (in linear space).
-    // Linear color is written and blended in Framebuffer and converted to sRGB later
-    if (l > 0.05) {
+    if (l.x > 0.05) {
         discard;
     } else {
         color = u_color;
+
+        // distance from line to compute the anti-aliasing
+        float dist = abs((u_thickness + 2.0) * l.y);
+
+        float half_thickness = (u_thickness + 2.0) * 0.5;
+        color.a = color.a * (1.0 - smoothstep(half_thickness - 1.0, half_thickness, dist));
     }
 }

src/glsl/webgl2/line/inst_lonlat.vert

@@ -11,7 +11,7 @@ uniform float u_width;
 uniform float u_height;
 uniform float u_thickness;
 
-out float l;
+out vec2 l;
 
 #include ../projection/projection.glsl;
 
@@ -27,7 +27,6 @@ void main() {
     vec2 p_b_clip = proj(p_b_w);
 
     vec2 da = p_a_clip - p_b_clip;
-    l = dot(da, da);
 
     vec2 p_a_ndc = p_a_clip / (ndc_to_clip * czf);
     vec2 p_b_ndc = p_b_clip / (ndc_to_clip * czf);
@@ -37,6 +36,12 @@ void main() {
     vec2 y_b = normalize(vec2(-x_b.y, x_b.x));
 
     float ndc2pix = 2.0 / u_width;
-    vec2 p_ndc = p_a_ndc + x_b * vertex.x + u_thickness * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
+
+    vec2 p_ndc_x = x_b * vertex.x;
+    vec2 p_ndc_y = (u_thickness + 2.0) * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
+
+    vec2 p_ndc = p_a_ndc + p_ndc_x + p_ndc_y;
     gl_Position = vec4(p_ndc, 0.f, 1.f);
+
+    l = vec2(dot(da, da), vertex.y);
 }

src/glsl/webgl2/line/inst_ndc.vert

@@ -4,7 +4,7 @@ layout (location = 0) in vec2 p_a;
 layout (location = 1) in vec2 p_b;
 layout (location = 2) in vec2 vertex;
 
-out float l;
+out vec2 l;
 
 uniform float u_width;
 uniform float u_height;
@@ -16,6 +16,7 @@ void main() {
 
     float ndc2pix = 2.0 / u_width;
 
-    vec2 p = p_a + x_b * vertex.x + u_thickness * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
+    vec2 p = p_a + x_b * vertex.x + (u_thickness + 2.0) * y_b * vertex.y * vec2(1.0, u_width/u_height) * ndc2pix;
     gl_Position = vec4(p, 0.f, 1.f);
+    l = vec2(0.0, vertex.y);
 }

src/js/Aladin.js

@@ -736,7 +736,7 @@ export let Aladin = (function () {
         gridOptions: {
             enabled: false,
             showLabels: true,
-            thickness: 2,
+            thickness: 1,
             labelSize: 15,
         },
         projection: "SIN",

src/js/Catalog.js

@@ -36,13 +36,13 @@ import A from "./A.js";
 import { Footprint } from "./Footprint.js";
 
 /**
- * Represents options for configuring a catalog.
- *
- * @typedef {Object} CatalogOptions
+* Represents options for configuring a catalog.
+*
+* @typedef {Object} CatalogOptions
 * @property {string} url - The URL of the catalog.
 * @property {string} [name="catalog"] - The name of the catalog.
-* @property {string} [color] - The color associated with the catalog.
-* @property {number} [sourceSize=8] - The size of the sources in the catalog.
+* @property {string|Function} [color] - The color associated with the catalog. A function can be given similar to `shape`.
+* @property {number|Function} [sourceSize=8] - The size of the sources in the catalog. A function can be given similar to `shape`.
 * @property {string|Function|Image|HTMLCanvasElement|HTMLImageElement} [shape="square"] - The shape of the sources (can be, "square", "circle", "plus", "cross", "rhomb", "triangle").
 If a function is given, user can return Image, HTMLImageCanvas, HTMLImageElement or a string being in ["square", "circle", "plus", "cross", "rhomb", "triangle"]. This allows to define different shape for a specific catalog source.
 * @property {number} [limit] - The maximum number of sources to display.
@@ -95,6 +95,10 @@ export let Catalog = (function () {
         this.markerSize = options.sourceSize || 12;
         this.selectSize = this.sourceSize;
         this.shape = options.shape || "square";
+        if (typeof this.shape === "function") {
+            this.shapeFn = this.shape;
+            this.shape = "custom";
+        }
         this.maxNbSources = options.limit || undefined;
         this.onClick = options.onClick || undefined;
         this.readOnly = options.readOnly || false;
@@ -105,10 +109,11 @@ export let Catalog = (function () {
         // allows for filtering of sources
         this.filterFn = options.filter || undefined; // TODO: do the same for catalog
         this.selectionColor = options.selectionColor || "#00ff00";
-        this.hoverColor = options.hoverColor || this.color;
+        this.hoverColor = options.hoverColor || undefined;
 
         this.displayLabel = options.displayLabel || false;
-        this.labelColor = options.labelColor || this.color;
+        this.labelColor = options.labelColor || undefined;
+
         this.labelFont = options.labelFont || "10px sans-serif";
         if (this.displayLabel) {
             this.labelColumn = options.labelColumn;
@@ -475,6 +480,18 @@ export let Catalog = (function () {
         );
     };
 
+    Catalog.prototype.getCacheCanvas = function(shape, color, size) {
+        const key = `${shape}_${size}_${color}`;
+        if (!(key in this.cacheCanvas)) {
+            this.cacheCanvas[key] = Catalog.createShape(
+                shape,
+                color,
+                size
+            )
+        }
+        return this.cacheCanvas[key];
+    };
+
     /**
      * Set the shape of the sources
      *
@@ -493,16 +510,18 @@ export let Catalog = (function () {
         options = options || {};
         this.color = options.color || this.color || Color.getNextColor();
         this.selectionColor = options.selectionColor || this.selectionColor || Color.getNextColor();
-        this.hoverColor = options.hoverColor || this.hoverColor || this.color;
+        this.hoverColor = options.hoverColor || this.hoverColor || undefined;
         this.sourceSize = options.sourceSize || this.sourceSize || 6;
         this.shape = options.shape || this.shape || "square";
+        if (typeof this.shape === "function") {
+            this.shapeFn = this.shape;
+            this.shape = "custom"
+        }
         this.onClick = options.onClick || this.onClick;
 
-        this._shapeIsFunction = false; // if true, the shape is a function drawing on the canvas
-        if (typeof this.shape === "function") {
-            this._shapeIsFunction = true;
+        if (this.shapeFn) {
             // A shape function that operates on the canvas gives the ctx and fov params
-            this._shapeOperatesOnCtx = this.shape.length > 1;
+            this._shapeOperatesOnCtx = this.shapeFn.length > 1;
             // do not need to compute any canvas
 
             // there is a possibility that the user gives a function returning shape objects such as
@@ -517,31 +536,20 @@ export let Catalog = (function () {
             this._shapeIsImageOrCanvas = true;
         }
 
-        this.selectSize = this.sourceSize + 2;
+        if (typeof this.color === "function") {
+            this.colorFn = this.color;
+            this.color = "custom"
+        }
+
+        if (typeof this.sourceSize === "function") {
+            this.sourceSizeFn = this.sourceSize;
+            this.sourceSize = "custom";
+        } else {
+            this.selectSize = this.sourceSize + 2;
+        }
+
         // Create all the variant shaped canvas
         this.cacheCanvas = {}
-        this.cacheHoverCanvas = {}
-        this.cacheSelectCanvas = {}
-
-        for (var shape of Catalog.shapes) {
-            this.cacheCanvas[shape] = Catalog.createShape(
-                shape,
-                this.color,
-                this.sourceSize
-            )
-
-            this.cacheHoverCanvas[shape] = Catalog.createShape(
-                shape,
-                this.hoverColor,
-                this.selectSize
-            );
-
-            this.cacheSelectCanvas[shape] = Catalog.createShape(
-                shape,
-                this.selectionColor,
-                this.selectSize
-            );
-        }
 
         this.reportChange();
     };
@@ -592,48 +600,79 @@ export let Catalog = (function () {
     Catalog.prototype.computeFootprints = function (sources) {
         let footprints = [];
 
-        if (this._shapeIsFunction && !this._shapeOperatesOnCtx) {
+        if ((this.shapeFn || this.colorFn || this.sourceSizeFn) && !this._shapeOperatesOnCtx) {
             for (let source of sources) {
-                try {
-                    let shapes = this.shape(source);
-                    if (shapes) {
-                        shapes = [].concat(shapes);
+                if (this.shapeFn) {
+                    try {
+                        let shapes = this.shapeFn(source);
+                        if (shapes) {
+                            shapes = [].concat(shapes);
 
-                        // Result of the func is an image/canvas
-                        if (shapes.length == 1 && (shapes[0] instanceof Image || shapes[0] instanceof HTMLCanvasElement)) {
-                            source.setImage(shapes[0]);
-                        // Result of the func is shape label ('cross', 'plus', ...)
-                        } else if (shapes.length == 1 && typeof shapes[0] === "string") {
-                            // If not found, select the square canvas
-                            let shape = shapes[0] || "square";
-                            source.setShape(shape)
-                        // Result of the shape is a set of shapes or a footprint
-                        } else {
-                            for (var shape of shapes) {
-                                // Set the same color of the shape than the catalog. 
-                                // FIXME: the color/shape could be a parameter at the source level, allowing the user single catalogs handling different shapes
-                                shape.setColor(this.color)
-                                shape.setSelectionColor(this.selectionColor);
-                                shape.setHoverColor(this.hoverColor);
-                            }
-
-                            let footprint;
-                            if (shapes.length == 1 && shapes[0] instanceof Footprint) {
-                                footprint = shapes[0];
+                            // Result of the func is an image/canvas
+                            if (shapes.length == 1 && (shapes[0] instanceof Image || shapes[0] instanceof HTMLCanvasElement)) {
+                                source.setImage(shapes[0]);
+                            // Result of the func is shape label ('cross', 'plus', ...)
+                            } else if (shapes.length == 1 && typeof shapes[0] === "string") {
+                                // If not found, select the square canvas
+                                let shape = shapes[0] || "square";
+                                source.setShape(shape)
+                            // Result of the shape is a set of shapes or a footprint
                             } else {
-                                footprint = new Footprint(shapes, source);
+                                let color = (this.colorFn && this.colorFn(source)) || this.color;
+                                let hoverColor = this.hoverColor || color;
+
+                                for (var shape of shapes) {
+                                    // Set the same color of the shape than the catalog. 
+                                    // FIXME: the color/shape could be a parameter at the source level, allowing the user single catalogs handling different shapes
+                                    shape.setColor(color)
+                                    shape.setSelectionColor(this.selectionColor);
+                                    shape.setHoverColor(hoverColor);
+                                }
+
+                                let footprint;
+                                if (shapes.length == 1 && shapes[0] instanceof Footprint) {
+                                    footprint = shapes[0];
+                                } else {
+                                    footprint = new Footprint(shapes, source);
+                                }
+
+                                footprint.setCatalog(this);
+
+                                // store the footprints
+                                footprints.push(footprint);
                             }
-
-                            footprint.setCatalog(this);
-
-                            // store the footprints
-                            footprints.push(footprint);
                         }
+                    } catch (e) {
+                        // do not create the footprint
+                        console.warn("Shape computation error");
+                        continue;
+                    }
+                }
+
+                if (this.colorFn) {
+                    try {
+                        let color = this.colorFn(source);
+                        if (color) {
+                            source.setColor(color);
+                        }
+                    } catch (e) {
+                        // do not create the footprint
+                        console.warn("Source color computation error");
+                        continue;
+                    }
+                }
+
+                if (this.sourceSizeFn) {
+                    try {
+                        let size = this.sourceSizeFn(source);
+                        if (size) {
+                            source.setSize(size);
+                        }
+                    } catch (e) {
+                        // do not create the footprint
+                        console.warn("Source size computation error");
+                        continue;
                     }
-                } catch (e) {
-                    // do not create the footprint
-                    console.warn("Return of shape function could not be interpreted as a footprint");
-                    continue;
                 }
             }
         }
@@ -900,21 +939,21 @@ export let Catalog = (function () {
         // Draw the footprints first
         this.drawFootprints(ctx);
 
-        if (this._shapeIsFunction) {
+        if (this.shapeFn) {
             ctx.save();
         }
 
         const drawnSources = this.drawSources(ctx, width, height);
 
-        if (this._shapeIsFunction) {
+        if (this.shapeFn) {
             ctx.restore();
         }
 
         // Draw labels
         if (this.displayLabel) {
-            ctx.fillStyle = this.labelColor;
             ctx.font = this.labelFont;
             drawnSources.forEach((s) => {
+                ctx.fillStyle = this.labelColor || s.color || this.color;
                 this.drawSourceLabel(s, ctx);
             });
         }
@@ -988,7 +1027,7 @@ export let Catalog = (function () {
 
         if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
             if (this._shapeOperatesOnCtx) {
-                this.shape(s, ctx, this.view.getViewParams());
+                this.shapeFn(s, ctx, this.view.getViewParams());
             } else if (this._shapeIsImageOrCanvas) {
                 // Global catalog shape set as an Image, an HTMLCanvasElement or HTMLImageElement
                 let canvas = this.shape;
@@ -1011,23 +1050,34 @@ export let Catalog = (function () {
                     s.y - this.sourceSize / 2
                 );
             } else if (s.isSelected) {
-                let cacheSelectCanvas = this.cacheSelectCanvas[s.shape || this.shape] || this.cacheSelectCanvas["square"];
+                let selectSize = (s.size || this.sourceSize) + 2;
+                let shape = s.shape || this.shape || "square"
+                let color = this.selectionColor;
 
+                let cacheSelectedCanvas = this.getCacheCanvas(shape, color, selectSize)
                 ctx.drawImage(
-                    cacheSelectCanvas,
-                    s.x - this.selectSize / 2,
-                    s.y - this.selectSize / 2
+                    cacheSelectedCanvas,
+                    s.x - cacheSelectedCanvas.width / 2,
+                    s.y - cacheSelectedCanvas.height / 2
                 );
             } else if (s.isHovered) {
-                let cacheHoverCanvas = this.cacheHoverCanvas[s.shape || this.shape] || this.cacheHoverCanvas["square"];
+                let selectSize = (s.size || this.sourceSize) + 2;
+                let shape = s.shape || this.shape || "square"
+                let color = this.hoverColor || s.color || this.color;
 
+                let cacheHoverCanvas = this.getCacheCanvas(shape, color, selectSize)
                 ctx.drawImage(
                     cacheHoverCanvas,
-                    s.x - this.selectSize / 2,
-                    s.y - this.selectSize / 2
+                    s.x - cacheHoverCanvas.width / 2,
+                    s.y - cacheHoverCanvas.height / 2
                 );
             } else {
-                let cacheCanvas = this.cacheCanvas[s.shape || this.shape] || this.cacheCanvas["square"];
+                let shape = s.shape || this.shape || "square"
+                let size = s.size || this.sourceSize;
+                let color = s.color || this.color;
+
+                let cacheCanvas = this.getCacheCanvas(shape, color, size)
+                
                 ctx.drawImage(
                     cacheCanvas,
                     s.x - cacheCanvas.width / 2,

src/js/MOC.js

@@ -26,7 +26,7 @@ import { ALEvent } from "./events/ALEvent.js";
 * @property {Boolean} [perimeter=false] - Draw the perimeter of the MOC only with `options.color`.
 * @property {string} [edge=!fill && !perimeter] - Draw the edges of the HEALPix cells with `options.color`.
     The HEALPix cell edges compositing the MOC will be drawn if `fill` and `perimeter` are false
-* @property {number} [lineWidth=3] - The line width in pixels 
+* @property {number} [lineWidth=1] - The line width in pixels 
 * @property {number} [opacity=1.0] - The opacity of the colors
 */
 
@@ -93,7 +93,7 @@ export let MOC = (function() {
         }
 
         this.opacity = Math.max(0, Math.min(1, this.opacity)); // 0 <= this.opacity <= 1
-        this.lineWidth = options["lineWidth"] || 3;
+        this.lineWidth = options["lineWidth"] || 1;
 
         //this.proxyCalled = false; // this is a flag to check whether we already tried to load the MOC through the proxy
 

src/js/ProgressiveCat.js

@@ -215,7 +215,6 @@ export let ProgressiveCat = (function() {
     };
 
     ProgressiveCat.prototype = {
-
         setView: function(view, idx) {
             var self = this;
             this.view = view;
@@ -370,7 +369,7 @@ export let ProgressiveCat = (function() {
                 return;
             }
 
-            if (this._shapeIsFunction) {
+            if (this.shapeFn) {
                 ctx.save();
             }
 
@@ -433,7 +432,7 @@ export let ProgressiveCat = (function() {
                 }
             });
 
-            if (this._shapeIsFunction) {
+            if (this.shapeFn) {
                 ctx.restore();
             }
         },
@@ -475,6 +474,8 @@ export let ProgressiveCat = (function() {
             });
         },
 
+        getCacheCanvas: Catalog.prototype.getCacheCanvas,
+
         drawSource: Catalog.prototype.drawSource,
 
         getSources: function() {

src/js/Source.js

@@ -126,6 +126,14 @@ export let Source = (function() {
         this.shape = shape;
     }
 
+    Source.prototype.setColor = function(color) {
+        this.color = color;
+    }
+
+    Source.prototype.setSize = function(size) {
+        this.size = Math.max(size, 1.0);
+    }
+
     /**
      * Simulates a click on the source
      *

src/js/View.js

@@ -1604,9 +1604,14 @@ export let View = (function () {
                         return source;
                     });
 
+                    let tableColor = catalog.color;
+                    if (catalog.colorFn) {
+                        tableColor = "white" 
+                    }
+
                     let table = {
                         'name': catalog.name,
-                        'color': catalog.color,
+                        'color': tableColor,
                         'rows': sources,
                         'fields': catalog.fields,
                         'showCallback': ObsCore.SHOW_CALLBACKS(this.aladin)

src/js/gui/Box/StackBox.js

@@ -304,7 +304,6 @@ export class OverlayStackBox extends Box {
 
                                     let moc = A.MOCFromURL(url, {
                                         name: file.name,
-                                        lineWidth: 3.0,
                                     });
                                     self.aladin.addMOC(moc);
                                 },
@@ -347,7 +346,6 @@ export class OverlayStackBox extends Box {
                                                             { ra, dec, radius },
                                                             {
                                                                 name: "cone",
-                                                                lineWidth: 3.0,
                                                             }
                                                         );
                                                         self.aladin.addMOC(moc);
@@ -418,7 +416,6 @@ export class OverlayStackBox extends Box {
                                                         },
                                                         {
                                                             name: "rect",
-                                                            lineWidth: 3.0,
                                                         }
                                                     );
                                                     self.aladin.addMOC(moc);
@@ -463,7 +460,6 @@ export class OverlayStackBox extends Box {
                                                         { ra, dec },
                                                         {
                                                             name: "poly",
-                                                            lineWidth: 3.0,
                                                         }
                                                     );
                                                     self.aladin.addMOC(moc);
@@ -1162,9 +1158,14 @@ export class OverlayStackBox extends Box {
         }
 
         // retrieve SVG icon, and apply the layer color
+        let color = overlay.color;
+        if (overlay.colorFn) {
+            color = "white"
+        }
+
         return new Icon({
             size: "small",
-            url: Icon.dataURLFromSVG({ svg, color: overlay.color }),
+            url: Icon.dataURLFromSVG({ svg, color }),
             tooltip,
         });
     }

src/js/vo/samp.js

@@ -72,7 +72,7 @@ export class SAMPConnector {
             var params = message["samp.params"];
 
             const {url, name} = params;
-            let moc = A.MOCFromURL(url, {name, lineWidth: 3});
+            let moc = A.MOCFromURL(url, {name});
             aladin.addMOC(moc);
         };