Giter Site home page Giter Site logo

stephenhouser / qso-mapper Goto Github PK

View Code? Open in Web Editor NEW
20.0 4.0 7.0 84 KB

JavaScript Webpage to plot ADIF (Amateur Radio QSOs) on a Map

Home Page: https://stephenhouser.com/qso-mapper

License: MIT License

HTML 31.98% CSS 2.15% JavaScript 65.86%
amateur-radio maps qso adif openstreetmap leaflet

qso-mapper's Introduction

QSO Mapper

Show Amateur Radio QSOs on an interactive map and table.

There are two basic ways this web application is designed to be used:

  1. Uploading local ADIF files from a web browser for local display (default).
  2. Using the URL parameter to load a web-accessible ADIF file and possibly share your QSOs and map.

Both ways require you to get your own access token for the map provider you choose to use. The default map provider is OpenStreetMap which is open but prefers you get map tiles from a third-party like MapBox. If you fork (or clone) this repo for you own use, you should really get an API key from MapBox. Then change the mapTiles variable in leaflet-map.js to mapbox and set mapAccessToken to your API token.

The project stated using Google Maps but that fork has not been updated. The code is in google-map.js and commented out in index.html (for now). OpenStreetMap and Leflet are used in the current branch. These are both open products.

Uploading Local ADIF File(s)

This method is intended to be used to view a log of contacts (QSOs) that you have on your computer in ADIF format. The application works in this mode by default.

Upload QSO Map Example

By using Select file... at the top-right of the application window you can upload a local ADIF file. The QSOs in the file will be loaded and shown on the interactive map as markers or Maidenhead (grid square) Locators. The Reset button will clear the markers so you can load a different file. You can load multiple files, just don't click Reset between each load and the new QSOs will be added to the current ones.

When using the application this way, the map is not directly sharable with others. To share the map you could send your ADIF file to someone else and they would upload and view the same way. However, a better way to share your QOS map is to use the second method below and not this one.

Using a URL to ADIF File(s)

This method allows you to show and share a log of your contacts. You upload your ADIF file to a website and then others can see the QSOs mapped directly, without uploading anything.

Shared QSO Map Example

The application loads a web-accessible ADIF file and displays it on the map. The file could be on another server or in the same location (or same repository) as the application code.

To use this mode of the application, simply supply a url parameter to the index page. The application will try to load the contents of the referenced URL as an ADIF file. If the loading succeeds, the QSO records from the file will be shown on the map.

When using this variant of the application, the Select file... and Reset are disabled and you are only able to load a single ADIF file URL.

You should consider forking the repository if you intend on using this long-term. That way you can change the map tile access token to your own token making sure it works for you long-term. If you don't fork and use your own, you run the risk of what I have here running out of quota and not working at all for you.

Customization

Map Tiles

As noted above the default map provider is OpenStreetMap. The mapTiles variable in leaflet-map.js is thus set to openstreetmap. To use MapBox, change this variable to mapbox and set the mapAccessToken to a proper API key from MapBox.

Map Markers

If you want to use a different marker icon, take a look in leaflet-map.js at the function createMarker(). There is a brief bit of commented out code that will make a small blue marker from an icon in the icons directory.

Mentions

I wanted to thank the Linux in the Ham Shack podcast folks, who picked up on my pushing to GitHub and mentioned the project in their Party Like it's 1499 episode. As an ex-scoutmaster for a Boy Scout troop, I think it would be an excellent idea to use QSO Mapper to show your Jamboree on the Air contacts!

qso-mapper's People

Contributors

andreask79 avatar myzinsky avatar stephenhouser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

qso-mapper's Issues

Some markers are off the mark

There's a few markers in the sample ADIF file (short) that seem to have the wrong sign on their longitude. Seems to only happen with ones +/- 10. They fall outside their grid square. Could be just I have a bad ADIF file export (it came from Ham Radio Deluxe).

What to do...? check if the lat/lon is in the grid and plot it. If it's not check the -longitude and correct it? or just leave as is and blame the exporting program?

Adding the URL for the ADI file

Hi Stephen, I am not a programmer but understand HTML, JS and CSS quite well...... but...

I cannot figure out how and where to put the URL code reading the ***.adi file from a server.

Any help is appreciated.

Jan, PA2P

Log table not populated when loading from URL on Firefox

When loading an ADIF file from the url parameter on Firefox (Linux) the log table does not get populated.

Frankly, I don't like the dependency on bootstrap-table which requires jQuery, so maybe a rewrite of this functionality is in order.

ADIF from Log4OM doesn't work

Any idea why an exported ADIF from Log4OM wouldn't work? I get "TypeError: qsoMatches is null" in the browser log.

Here's an example entry from my ADIF:

<A_INDEX:1>3 <ANT_AZ:1>0 <ANT_EL:1>0 BAND:320m CALL:6GB1MIR COMMENT:24QRP via temporary dipole CONT:2EU COUNTRY:7England CQZ:214 DISTANCE:76504.84 DXCC:3223 <EQSL_QSL_RCVD:1>R <EQSL_QSL_SENT:1>R FREQ:914.081389 GRIDSQUARE:4IO91 ITUZ:227 <LOTW_QSL_RCVD:1>R <LOTW_QSL_SENT:1>R MODE:4MFSK SUBMODE:3FT4 <MY_CITY:6>Peoria <MY_CNTY:6>Peoria <MY_STATE:2>IL <MY_COUNTRY:13>United States <MY_CQ_ZONE:1>4 <MY_DXCC:3>291 <MY_GRIDSQUARE:6>EN50ER <MY_ITU_ZONE:1>8 <MY_NAME:10>Adam Gerik <MY_POSTAL_CODE:5>61603 <MY_RIG:12>ICOM IC-7300 <MY_STATE:2>IL <STATION_CALLSIGN:6>KD9NYE PROGRAMID:7LOG4OM2 PROGRAMVERSION:72.6.1.0 <QSL_RCVD:1>R <QSL_RCVD_VIA:1>E <QSL_SENT:1>R <QSL_SENT_VIA:1>E <QSO_COMPLETE:1>Y <QSO_DATE:8>20200528 <QSO_DATE_OFF:8>20200528 SWL:1N <TIME_OFF:6>213034 <TIME_ON:6>213016 <TX_PWR:1>5 <K_INDEX:1>1 <MY_LAT:7>40.7292 <MY_LON:7>-89.625 <MY_ANTENNA:9>67FT EFHW <QSO_RANDOM:1>Y SFI:268 <APP_L4ONG_SATELLITE_QSO:1>N <APP_L4ONG_CONTEST:1>N <APP_L4ONG_QSO_CONFIRMATIONS:577>[{"CT":"QSL","S":"Requested","R":"Requested","SV":"Electronic","RV":"Electronic"},{"CT":"EQSL","S":"Requested","R":"Requested","SV":"Electronic","RV":"Electronic"},{"CT":"LOTW","S":"Requested","R":"Requested","SV":"Electronic","RV":"Electronic"},{"CT":"QRZCOM","S":"Requested","R":"No","SV":"Electronic","RV":"Electronic"},{"CT":"HAMQTH","S":"Yes","R":"No","SV":"Electronic","RV":"Electronic","SD":"2020-05-28T00:00:00Z"},{"CT":"HRDLOG","S":"Requested","R":"No","SV":"Electronic","RV":"Electronic"},{"CT":"CLUBLOG","S":"Requested","R":"No","SV":"Electronic","RV":"Electronic"}] <APP_L4ONG_QSO_AWARD_REFERENCES:185>[{"AC":"CCC","R":"G*","G":"EUROPE","SUB":[],"GRA":[]},{"AC":"DXCC","R":"223","G":"EU","SUB":[],"GRA":[]},{"AC":"WAC","R":"EU","SUB":[],"GRA":[]},{"AC":"WAZ","R":"14","SUB":[],"GRA":[]}]

Failing to parse ADIF when <eoh> is <EOH>

If you tack an 'i' on the end of the match string in adif.js

from:
var filePartsMatch = cleanAdifData.match(/(.)<eoh>(.)/);

to:
var filePartsMatch = cleanAdifData.match(/(.)<eoh>(.)/i);

that would fix it right up.
Cheers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.