Create sky view with horizon

Can anyone tell me what parameters to use with d3-celestial to create the following effect:

So it would be a view of the sky as seen from a particular point on earth and looking into a certain direction. Also the directions (N, E, S, W) would be shown. I would also like to have a specific object in space (e.g. Sagittarius A*) marked so that when I change the time, I can create an animation that shows the movement of that object during a day.

What I have so far:

Config:

var config = {
  location: [9.728769, 99.985367],
  follow: 'center',
  projection: 'hammer',
  form: false,
  center: [0, -90, 0],
  interactive: false,
  zoomlevel: 1,
  background: {fill: '#fff', stroke: '#000', opacity: 1, width: 1},
  datapath: 'https://ofrohn.github.io/data/',
  stars: {
    show: false,
  },
  dsos: {show: false},
  mw: {
    style: {fill: '#996', opacity: 0.1}
  },
  constellations: {
    names: false,      // Show constellation names
  },
  horizon: {  //Show horizon marker, if location is set and map projection is all-sky
    show: true,
    stroke: '#cccccc',
    width: 1.0,
    fill: '#000000',
    opacity: 0.9
  },
  lines: {  // Display & styles for graticule & some planes
    graticule: {
      show: false,
      // grid values: "outline", "center", or [lat,...] specific position
      lon: {pos: [40, 0], fill: '#ff0e0e', font: '10px \'Lucida Sans Unicode\', Helvetica, Arial, sans-serif'},
      // grid values: "outline", "center", or [lon,...] specific position
      lat: {pos: [''], fill: '#eee', font: '10px Helvetica, Arial, sans-serif'}
    },
    equatorial: {show: false, stroke: '#aaaaaa', width: 1.3, opacity: 0.7},
    ecliptic: {show: false, stroke: '#66cc66', width: 1.3, opacity: 0.7},
    galactic: {show: false, stroke: '#cc6666', width: 1.3, opacity: 0.7},
    supergalactic: {show: false, stroke: '#cc66cc', width: 1.3, opacity: 0.7}
  },
}

And this for changing the time:

let dateTime = new Date(2020, 11, 20, 14, 12)
let hourCounter = 0

function incHourFunction () {
  hourCounter++

  dateTime.setHours(dateTime.getHours() + 1)
  Celestial.date(dateTime)
  Celestial.rotate({center: [hourCounter * 15, -90, 0]})

  if (hourCounter === 24) {
    hourCounter = 0
  }
}

setInterval(incHourFunction, 1000)

This gives me this initial image.

But when the animation starts, I get this. How can I keep the horizon straight? And how can I have the directions (N, E, S, W) displayed?

ofrohn / d3-celestial

Create sky view with horizon #107