Search code examples
javascriptcanvas

Color of polyline in Aladin lite

I am using Aladin lite library in my web app. I would like to create interactive map of sky with all constellations. However, when I add new overlay layer and draw lines of any constellation, some lines are brighter and wider then others. Here is fiddle. I would like to have all lines with lineWidth: 1 and color: '#FFF'. Is there any way fix it?

enter image description here

const aladin = A.aladin('#aladin-lite-div',  {survey: "P/DSS2/color", fov: 30, target: "Betelgeuse" })

const constellations = A.graphicOverlay({ color: '#FFF', lineWidth: 0.5 })
aladin.addOverlay(constellations)

// Each array item is [[startX, startY], [endX, endY]] of single line.
const lines = [[[72.46, 6.961], [72.653, 8.9]], [[72.46, 6.961], [72.802, 5.61]], [[72.46, 6.961], [81.283, 6.35]], [[72.653, 8.9], [73.724, 10.15]], [[72.802, 5.605], [73.563, 2.44]], [[73.563, 2.441], [74.637, 1.71]], [[73.724, 10.151], [74.093, 13.51]], [[74.093, 13.514], [76.142, 15.4]], [[76.142, 15.404], [77.425, 15.6]], [[78.635, -8.202], [81.119, -2.4]], [[81.119, -2.397], [83.002, -0.3]], [[81.283, 6.35], [83.002, -0.3]], [[81.283, 6.35], [83.785, 9.93]], [[81.283, 6.35], [88.793, 7.41]], [[83.002, -0.299], [84.053, -1.2]], [[83.785, 9.934], [88.793, 7.41]], [[84.053, -1.202], [85.19, -1.94]], [[85.19, -1.943], [86.939, -9.67]], [[85.19, -1.943], [88.793, 7.41]], [[88.595, 20.276], [90.98, 20.14]], [[88.595, 20.276], [91.893, 14.77]], [[88.793, 7.407], [90.596, 9.65]], [[90.596, 9.648], [92.985, 14.21]], [[90.98, 20.138], [92.985, 14.21]], [[91.893, 14.768], [92.985, 14.21]]]

for (const line of lines) {
        const polyline = A.polyline(line)
    constellations.add(polyline)
}
<!-- include Aladin Lite CSS file in the head section of your page -->
<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
 
<!-- you can skip the following line if your page already integrates the jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
 
<!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
<div id="aladin-lite-div" style="width:400px;height:400px;"></div>

<script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>

Solution

  • What you are seeing is caused by the spherical projection...
    If you individually zoom in the lines they look the same

    See my example below, it should be a bunch of identical parallel lines, but they do not quite look the same

    const aladin = A.aladin('#aladin-lite-div',  {survey: "P/DSS2/color", fov: 100, target: "Betelgeuse" })
const constellations = A.graphicOverlay({ color: '#FFF', lineWidth: 0.5 })
aladin.addOverlay(constellations)

for (i = -10; i < 20; i++) {  
    const polyline = A.polyline([[70, i], [105, i]])
    constellations.add(polyline)
}
    <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
<div id="aladin-lite-div" style="width:400px;height:400px;"></div>
<script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>

    What can we do?

    • If we increase the lineWidth they look a bit more uniform
    • Not use Aladin, get the image you need and draw directly to a canvas