Cara Membuat Peta Langsung Lokasi ISS dengan Python dan Plotly Dash

Apr 10 2023

Lihat lintang/bujur Stasiun Luar Angkasa Internasional setiap detik. Stasiun Luar Angkasa Internasional adalah satelit luar angkasa berawak yang diluncurkan hampir 25 tahun yang lalu.

Lihat lintang/bujur Stasiun Luar Angkasa Internasional setiap detik.

Stasiun Luar Angkasa Internasional adalah satelit luar angkasa berawak yang diluncurkan hampir 25 tahun yang lalu. Pada 8 April 2023, ada 7 orang di dalamnya , yang mengorbit Bumi dengan kecepatan lebih dari 17.000 mph.

Dimana orang-orang ini? Mari cari tahu dan buat dasbor langsung dengan Python 3, Plotly Dash, dan Open Notify API .

Foto oleh Kai Dahms di Unsplash

Ini adalah kelanjutan dari artikel pertama kami tentang Cara Menemukan Lokasi ISS dengan Python, R, atau Bash . Kami akan menggunakan kode dari tutorial itu, yang mengambil lintang dan bujur dari Open Notify API , lalu pasang data lintang/bujur itu ke dalam aplikasi Plotly Dash.

Persyaratan

Piton 3
Plotly Dash — membuat dasbor
Permintaan — mendapatkan data lokasi ISS dari Open Notify
Panda — membantu Plotly melakukan tugasnya

pip install dash
pip install requests
pip install pandas

Langkah

Dapatkan kode dari tutorial ISS API asli
Buat aplikasi Plotly Dash kosong
Tambahkan peta kosong ke dasbor
Colokkan data ISS ke peta

Langkah 1: Dapatkan Kode dari Tutorial Asli

Kode dari tutorial aslinya hanya 4 baris:

# basic_iss.py

import requests

open_notify_api = "http://api.open-notify.org/iss-now.json"
iss_location = requests.get(open_notify_api)
print(iss_location.json())

Menjalankan di atas dalam filenya sendiri membawa kita ke latitudedan longitudedi mana ISS berada saat ini juga:

Kami akan membuat permintaan ini sekali per detik dalam kode di bawah ini, sehingga kami mendapatkan pembaruan lokasi ISS yang konstan dan langsung.

Langkah 2: Buat Aplikasi Dash Plotly Kosong

Kita akan mulai dengan aplikasi Plotly Dash kosong, karena Dash memiliki banyak bagian yang bergerak. Buat file baru , beri nama app.py, dan masukkan kode di bawah ini ke dalamnya.

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('Hello World')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Di atas, kami membuat aplikasi dengan app = Dash(), lalu menambahkan h1header HTML berukuran sederhana yang berbunyiHello World.

Jika kita menjalankan ini di file baru, bernama app.py, kode kita akan memulai "situs web" lokal yang dapat kita kunjungi di browser kita. Di bawah, output memberitahu kita bahwa aplikasi Dash kita berjalan pada http://127.0.0.1:8050/.

Jika kita masuk ke http://127.0.0.1:8050/browser kita, kita melihat halaman dengan header besar yang bertuliskan "Hello World."

Sekarang mari tambahkan beberapa teks lagi dan peta kosong untuk memasukkan data ISS kita.

Langkah 3: Tambahkan Peta Kosong ke Dasbor

Dash memiliki banyak cara untuk menambahkan grafik, peta, dan komponen HTML lainnya ke dasbor.

Kami akan menambahkan beberapa elemen HTML ke app.layout()(tempat yang sama kami menambahkan ‘Hello World’tajuk kami), dan kemudian di Langkah 4, kami akan memasukkan data lokasi ISS ke dalamnya.

Kami akan melakukan perubahan ini:

Ubah judul tajuk menjadiISS Location Tracker
Tambahkan area teks untuk menulis lintang dan bujur
Tambahkan peta untuk memvisualisasikan data lintang/bujur

Ubah Headernya

Ganti nama html.H1menjadi ISS Location Trackeratau yang serupa.

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('ISS Location Tracker')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Kami akan menampilkan angka lintang dan bujur di samping grafik dan peta. ( Apa itu "div"? )

# app.py

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text')
]) 

if __name__ == '__main__':
    app.run_server(debug=True)

Tambahkan Peta Kosong

Untuk melakukan ini, kita akan menggunakan kelas Komponen Inti Dash, dcc, dan Plotly express, yang keduanya membantu membuat peta dan grafik.

Impor mereka seperti ini:

from dash import dcc
import plotly.express as px

Tambahkan dcc.Graphelemen ke tata letak
Buat peta kosong dengan Plotly express

# app.py
...

# This makes the actual map
fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

# We added the map as a `Graph` at the end of the layout
app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig)
])

Jenis proyeksi peta lain yang tersedia, seperti "ortografi" di kiri dan kanan.

Sekarang, kami sedang membaca untuk mengawinkan data kami dengan grafik dan peta Bumi kami.

Langkah 4: Colokkan Data ISS ke Aplikasi Dash

Kita harus melakukan 3 hal:

Tambahkan kode yang mendapatkan data dari Open Notify API (dari tutorial ISS sebelumnya)
Tetapkan interval untuk seberapa sering memperbarui grafik (dalam milidetik)
Tambahkan 2 fungsi baru untuk teks lat/panjang dan peta, yang memberi tahu Dash cara menyambungkan data ke dalamnya

Kode asli untuk mendapatkan lokasi ISS hanya 4 baris:

import requests

open_notify_api = "http://api.open-notify.org/iss-now.json"
iss_location = requests.get(open_notify_api)
print(iss_location.json())

def get_iss_location():
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()
    
    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

Tetapkan interval untuk seberapa sering memperbarui dasbor

Karena Open Notify API memperbarui lokasi ISS setiap detik, kami ingin dasbor kami melakukan hal yang sama.

Kami harus memberi tahu Dash seberapa sering kami ingin memperbaruinya dengan menggunakan dcc.Interval().

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

Tambahkan 2 fungsi baru untuk memperbarui teks dan peta lat/panjang

Kami akan membuat 2 fungsi, satu untuk memperbarui div angka mentah garis lintang/garis bujur dan satu untuk peta Bumi.

Fungsi akan mulai seperti ini:

@app.callback()
def update_lat_long_text():
    ...

@app.callback()
def update_map():
    ...

Kami menetapkan bahwa ini adalah fungsi callback dengan @app.callback(). Fungsi panggilan balik pada dasarnya adalah fungsi yang dimulai saat hal lain terjadi — dalam hal ini, setiap kali 1 detik berlalu (yang akan kami jelaskan sebentar lagi). Kami juga akan memberikan fungsi callback ini beberapa argumen untuk membantu Dash menyambungkan data dengan benar.

Baca lebih lanjut tentang callback dasar di Plotly Dash dan function decorators .

Memperbarui Teks Lintang/Bujur

Kami akan mengisi:

@app.callback()
def update_lat_long_text():
    ...

Kami juga akan menggunakan @app.callback()untuk memberi tahu Dash elemen HTML mana yang akan dimasukkan ke dalam data baru dan kapan update_lat_long_text()harus diaktifkan.

Gunakan get_iss_location()seperti itu, lalu kembalikan sebagai elemen HTML yang diformat.

@app.callback(...)
def update_lat_long_text():
    # Get ISS location data
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    # Put the ISS location data into two HTML "spans" (the <span> element)
    return [
        html.Span('Latitude: {}'.format(latitude)),
        html.Span('Longitude: {}'.format(longitude))
    ]

from dash.dependencies import Input, Output
...

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
   def update_lat_long_text():
        ...

Inputmemberi tahu Dash kapan harus berlari update_lat_long_text(). Dalam hal ini, ia menggunakan dcc.Interval()fungsi yang ID-nya adalah ‘interval-component’, yang berjalan setiap detik. Untuk itu, update_lat_long_text()juga akan berjalan setiap detik.
Outputmemberi tahu Dash elemen HTML mana yang akan diperbarui. Dalam hal ini, itu adalah div yang kami buat dengan html.Div(id=’lat-long-text’)yang ingin kami tampilkan lat/long sebagai angka.

Jika kita menjalankan kode sampai titik ini, Lintang dan Bujur kini ditampilkan di aplikasi web.

Kode dengan pembaruan teks Lintang/Bujur:

# app.py

import requests

from dash import Dash, html, dcc
import plotly.express as px
from dash.dependencies import Input, Output

app = Dash(__name__)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()

    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
def update_lat_long_text(interval):
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    style = {'padding': '10px', 'fontSize': '22px'}
    return [
        html.Span('Latitude: {}'.format(latitude), style=style),
        html.Span('Longitude: {}'.format(longitude), style=style)
    ]


if __name__ == '__main__':
    app.run_server(debug=True)

Memperbarui Peta

Ayo isi update_map()fungsi kita. Fungsi ini akan:

Dapatkan data lokasi ISS
Simpan dalam daftar
Buat garis jalur ISS di atas peta kita

lat_long = {
    'latitude': [],
    'longitude': []
}
...

@app.callback(Output('map', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_map(interval):
    iss_location = get_iss_location()
    latitude = float(iss_location["iss_position"]["latitude"])
    longitude = float(iss_location["iss_position"]["longitude"])

    lat_long['latitude'].append(latitude)
    lat_long['longitude'].append(longitude)
    
    fig = px.line_geo(lat=lat_long['latitude'], lon=lat_long['longitude'])
    fig.update_geos(projection_type="natural earth")
    fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})
    fig.update_traces(line=dict(color="Red", width=4))

    return fig

Garis merah digambar dengan semua koordinat disimpan dalam `lat_long` selama periode 20 menit.

Jika Anda menjalankan app.pysemua kode di bawah ini, Anda akan melihat garis merah yang melacak lokasi ISS sekali per detik:

Kami mendapatkan hasil di atas dengan membiarkan dasbor berjalan selama satu jam. ISS bergerak dengan kecepatan 17.100 mph, jadi dibutuhkan sekitar 90 menit untuk mengorbit penuh mengelilingi Bumi.

Skrip Lengkap

# Track the ISS's location in real time with Plotly Dash

import requests

from dash import Dash, html, dcc
import plotly.express as px
from dash.dependencies import Input, Output

app = Dash(__name__)

def get_iss_location():
    # Get ISS lat/long location and return as two decimals. Example: [-10.000, 34.000]
    open_notify_api = "http://api.open-notify.org/iss-now.json"
    iss_location = requests.get(open_notify_api)
    iss_json = iss_location.json()

    latitude = float(iss_json["iss_position"]["latitude"])
    longitude = float(iss_json["iss_position"]["longitude"])

    return [latitude, longitude]

lat_long = {
    'latitude': [],
    'longitude': []
}

fig = px.line_geo()
fig.update_geos(projection_type="natural earth")
fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})

app.layout = html.Div([
    html.H1('ISS Location Tracker'),
    html.Div(id='lat-long-text'),
    dcc.Graph(id='map', figure=fig),
    dcc.Interval(
            id='interval-component',
            interval=1000, # in milliseconds
            n_intervals=0
        )
])

@app.callback(Output('lat-long-text', 'children'),
              Input('interval-component', 'n_intervals'))
def update_lat_long_text(interval):
    iss_location = get_iss_location()
    latitude = iss_location[0]
    longitude = iss_location[1]

    style = {'padding': '10px', 'fontSize': '22px'}
    return [
        html.Span('Latitude: {}'.format(latitude), style=style),
        html.Span('Longitude: {}'.format(longitude), style=style)
    ]

@app.callback(Output('map', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_map(interval):
    iss_location = get_iss_location()

    lat_long['latitude'].append(iss_location[0])
    lat_long['longitude'].append(iss_location[1])
    
    fig = px.line_geo(lat=lat_long['latitude'], lon=lat_long['longitude'])
    fig.update_geos(projection_type="natural earth")
    fig.update_layout(height=500, margin={"r":0,"t":0,"l":0,"b":0})
    fig.update_traces(line=dict(color="Red", width=4))

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

Berbagi Data Antara Plotly Dash Callback
Memilih berbagai jenis proyeksi peta di Plotly Dash

Jika Anda memiliki pertanyaan atau umpan balik, kirim email kepada kami di [email protected] atau kirim pesan kepada kami di Instagram (@protobioengineering) .

Jika Anda menyukai artikel ini, pertimbangkan untuk mendukung kami dengan menyumbangkan kopi .