{
    "title": "Create sources with a custom draw function",
    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
    "js": "// Start up Aladin Lite\nvar aladin = A.aladin('#aladin-lite-div', {target: '12 25 41.512 +12 48 47.2', fov: 0.8});\n\n// define custom draw function\nvar drawFunction = function(source, canvasCtx, viewParams) {\n    canvasCtx.beginPath();\n    canvasCtx.arc(source.x, source.y, source.data['size'] * 2, 0, 2 * Math.PI, false);\n    canvasCtx.closePath();\n    canvasCtx.strokeStyle = '#c38';\n    canvasCtx.lineWidth = 3;\n    canvasCtx.globalAlpha = 0.7,\n    canvasCtx.stroke();\n    var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);\n\n    // object name is displayed only if fov<10°\n    if (fov>10) {\n        return;\n    }\n\n    canvasCtx.globalAlpha = 0.9;\n    canvasCtx.globalAlpha = 1;\n\n    var xShift = 20;\n\n    canvasCtx.font = '15px Arial'\n    canvasCtx.fillStyle = '#eee';\n    canvasCtx.fillText(source.data['name'], source.x + xShift, source.y -4);\n\n    // object type is displayed only if fov<2°\n    if (fov>2) {\n        return;\n    }\n    canvasCtx.font = '12px Arial'\n    canvasCtx.fillStyle = '#abc';\n    canvasCtx.fillText(source.data['otype'], source.x + 2 + xShift, source.y + 10);\n};\n\n// create sources objects\nvar M87 = A.source(187.7059308, 12.3911233, {name: 'M 87', size: 4.5, otype: 'LINER AGN'});\nvar M49 = A.source(187.444992, 8.000411, {name: 'M 49', size: 6.28, otype: 'Seyfert 2'});\nvar M100 = A.source(185.728746, 15.822381, {name: 'M 100', size: 7.23, otype: 'AGN'});\nvar M84 = A.source(186.26559721, 12.88698314, {name: 'M 84', size: 3.91, otype: 'Seyfert 2'});\nvar M60 = A.source(190.916700, 11.552611, {name: 'M 60', size: 4.75, otype: 'Galaxy in pair of galaxies'});\nvar NGC4388 = A.source(186.445083, 12.662069 , {name: 'NGC 4388', size: 3.72, otype: 'Seyfert 2'});\nvar NGC4261 = A.source(184.84673421, 5.82491522 , {name: 'NGC 4261', size: 2.78, otype: 'LINER AGN'});\nvar M86 = A.source(186.549225, 12.945969, {name: 'M 86', size: 6.03, otype: 'Galaxy in group of galaxies'});\n// create catalog layer with custom draw function\nvar cat = A.catalog({name: 'Virgo cluster', shape: drawFunction});\n// add sources to the new layer\ncat.addSources([M87, M49, M100, M84, M60, NGC4388, NGC4261, M86]);\naladin.addCatalog(cat);",
    "explain": "In this example, object labels only appear when the FoV is smaller than 10°. <br/>Object types are displayed when FoV is smaller than 2°."
}