Convert webpage from Google Maps to leaflet.js

[mhostetter]

Google Maps has been reducing free, API key-less usage. I think moving to the open-source leaflet library is a better alternative. https://leafletjs.com/

[potto216]

Sounds good I'll take a look at it today

…

On Wed, Jul 31, 2019, 11:23 AM Matt Hostetter ***@***.***> wrote: Google Maps has been reducing free, API key-less usage. I think moving to the open-source leaflet library is a better alternative. https://leafletjs.com/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#27?email_source=notifications&email_token=ACLYMF5LZXXLEIHPCCOBA3DQCGU5ZA5CNFSM4IIH3SI2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HCTD52A>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACLYMF6OLHIAE4K7F5NYPBTQCGU5ZANCNFSM4IIH3SIQ> .

[potto216]

Looks like leaflet with OpenStreetMap is a good choice that doesn't require an API key or registration. Should have the Google listener calls converted to leaflet's on calls for a sort of working webpage this weekend.

[mhostetter]

Ok, I'm working on this in parallel. I had a couple webserver issues with socketio, flask, and gevent last night that I'm working through. I have a branch leaflet-js that's based off of my GNU Radio 3.8 branch. I'll push that up later.

[potto216]

Oh okay, then I'll stop looking at this and go back to #1

[mhostetter]

I'm going to push up my code. Do you have GNU Radio 3.8 installed? I was planning to push to the maint-3.8 branch. If not, I can try to cherry pick the features onto the 3.7 branch (slightly more effort). Just curious.

[mhostetter]

Ok, so I pushed the leaflet code up. Can you run git fetch, get checkout maint-3.7, rebuild, and see how it works for you?

[potto216]

Looks good using maint-3.7. I was able to track planes (below).

[mhostetter]

Awesome! Let me know if you run into issues.

[edersonrmachado]

Hello! I've installed gr-adsb from maint-3.7 to be able to see the airplanes in the leaflet.js map (avoiding google and API keys), but I'm facing some problems. I'd appreciate some help, if possible. I'm using mozilla web browser and python2.7.

Avoiding favicon web page error

To avoid favicon web page error I've added a 32x32 pixels random image (called favicon.png) into gr-adsb/web/static/img folder and specifying this path in file index.html ( gr-adsb/web/static folder), line(23):

Starting webserver

I've started to receive ADSB packets and running the server python webserver.py but I cant see airplanes in map. When I open http//:localhost:5001 I see that decoded values are published by ZMQ as expected :

I can also access this variables in webserver.py and print it in terminal adding print(planes) line to webserver.py (line 52):

Which gives as result:

Problem

But the part of the code that webserver.py sends this values to map.js, (socketio.emit("updatePlane", plane)), is not working as expected:

while True:
        # Receive decoded ADS-B message from the decoder over ZMQ
        pdu_bin = socket.recv()
        pdu = pmt.deserialize_str(pdu_bin)
        plane = pmt.to_python(pmt.car(pdu))
        socketio.emit("updatePlane", plane) # THIS PART

I'd realized that, adding a console.log (line 122) in map.js file and observing web.console:

Adding console.log

Observing web.console

So it seems that updatePlane function is not reached. Do you have any idea what may be causing this problem?

[edersonrmachado]

Hi! I've found the reason that I was not seeing the airplanes on map. The issue is related to np.NaN assignment to any airplane field, which generates an error in the threading module. This error is not directly noticeable at the terminal. To be able to detect it, firstly I've printed out the plane dictionary adding print(plane), line 49, in webserver.py as follow:

47     pdu = pmt.deserialize_str(pdu_bin)
48     plane = pmt.to_python(pmt.car(pdu))
49     print(plane) #added 
50     socketio.emit("updatePlane", plane)

Then, once I just trying to send one position, I've started the GNU flowgraph and after $python webserver.py the following plane was printed:

plane = {'num_msgs': 17371, 'df': 17, 'timestamp': 1603863411.3755796, 'altitude': 3000, 'longitude': -51.15799847771143, 'datetime': '2020-10-28 05:36:51.375580 UTC', 'icao': 'aaabbb', 'callsign': None, 'snr': 14.885303115844726, 'latitude': -29.85725532143806, 'vertical_rate': nan, 'speed': None, 'heading': None}

To test it , I changed the code to send just this plane information:

47     pdu = pmt.deserialize_str(pdu_bin)
48     #plane = pmt.to_python(pmt.car(pdu)) 
49     plane = {'num_msgs': 17371, 'df': 17, 'timestamp': 1603863411.3755796, 'altitude': 3000, 'longitude': -51.15799847771143, 'datetime': '2020-10-28 05:36:51.375580 UTC', 'icao': 'aaabbb', 'callsign': None, 'snr': 14.885303115844726, 'latitude': -29.85725532143806, 'vertical_rate': nan, 'speed': None, 'heading': None}
50     socketio.emit("updatePlane", plane)

After runs the flowgraph, and $ python webserver.py, this terminal output was produced:

Exception in thread Thread-1:
Traceback (most recent call last):
  File "/usr/lib/python2.7/threading.py", line 801, in __bootstrap_inner
    self.run()
  File "/usr/lib/python2.7/threading.py", line 754, in run
    self.__target(*self.__args, **self.__kwargs)
  File "webserver.py", line 49, in background_thread
    plane = {'num_msgs': 17371, 'df': 17, 'timestamp': 1603863411.3755796, 'altitude': 3000, 'longitude': -51.15799847771143, 'datetime': '2020-10-28 05:36:51.375580 UTC', 'icao': 'aaabbb', 'callsign': None, 'snr': 14.885303115844726, 'latitude': -29.85725532143806, 'vertical_rate': nan, 'speed': None, 'heading': None}
NameError: global name 'nan' is not defined

And aircraft is not shown, but changing 'vertical_rate': nan to 'vertical_rate': None in plane dict., it's possible to see aircraft on map:

So, once I'm working with adsb for academic purposes, my adsb transmitted position was created and encoded without information in some fields, which maybe is not common with real aircraft encoded position. In my case, I will try changing np.Nan assignment to None assignment in Decoder.py in order to avoid this issue.
Thanks for this great project, it really helps me!!

[mhostetter]

@edersonrmachado good detective work.

I'm not sure why only the vertical_rate isn't converted from np.NaN to None by pmt.to_python(). I would add something like this below that line:

# Receive decoded ADS-B message from the decoder over ZMQ
pdu_bin = socket.recv()
pdu = pmt.deserialize_str(pdu_bin)
plane = pmt.to_python(pmt.car(pdu))
plane = {key: value if value != np.NaN else None for (key, value) in plane.items()}

Are you still experiencing this issue? I haven't noticed it in my experience. It could be that some planes in your area never broadcast the vertical rate and so that dictionary never populates with something other than np.NaN, and that value blocks the javascript from interpreting it, and hence never displays the plane? Whereas, for me, the same thing happens but the plane quickly broadcasts a valid vertical rate and I quickly get past the error you observed? Not sure...

[edersonrmachado]

Thanks @mhostetter,
I'm not actually getting data from real planes. Since it is currently difficult to receive data from real planes here, for academic purposes, I ended up creating the frames and sending them on one USRP channel and receiving them on another (using a direct connection with -30dB attenuation cable). When I noticed this issue some time ago, I was creating only Aircraft Position frames, now I adjusted the code to also create Aircraft velocity frames (subtypes 1 - ground velocity and 3 airspeed), so I will see how it will behave ;)

[mhostetter]

Cool picture! Fun with SDR 😄. Keep me updated with things you discover with my OOT as you find them. I appreciate the help.