Using NMEA GPS Data in Web Map

This example demonstrates the use of NMEA GPGGA to display position on a map using HTML5 and javascript(OpenLayers). This example makes use of CDP's built in webserver. All programming is done in javascript (How to Use JavaScript to Access Automation System). The NMEA0183IO communication with the GPS is preconfigured as a NMEA GPGGA string and set up by following NMEA 0183 I/O Configuration Manual. The NoCode setup of different automation protocols is typical to CDP Studio, the independent automation software for open PC-based real-time distributed control systems.

How to Run the Example

To run the example from CDP Studio, open Welcome mode and find it under Examples. Next, in Configure mode right-click on the system project and select Run & Connect. See the Running the Example Project tutorial for more information.

To view the map: When the application is running and connected, click on the application in Configure mode Project tree and choose the Table Editor tab. Go to the Properties section, find the property called WebURL. This is the link for the web browser. You can also open the browser directly by clicking the icon next to the url. Note that there is a WebFilesToServe property in the application configuration that must list all files and folders that should be accessible in the web browser. If the WebFilesToServe is not set up correctly, then the web browser might not show the content correctly, or it might not function correctly. Then the map should open in your web browser.

Project Overview

This example includes

• A simple system (project) consisting of one console application, and one HTML5 application.
• The console application includes an NMEAOnSerial component configured to communicate with a G-Star IV GPS using the NMEA protocol.
• The web application has a simple map based on OpenLayers(http://openlayers.org) showing your current position.

This Example is made using an external GPS device on serial. Most users will not have this device available and the system is therefore configured with default coordinates showing London, capital of Great Britain.

Control Application

The control application (called NMEAGPSApp) includes an NMEAOnSerial component (added from the NMEA0183IO resources). The NMEAOnSerial component is configured to receive from the G-Star IV GPS through serial COM port number 5 on Windows (Com port assignments vary from device to device; make sure to check your device manager to configure the correct device if you have one).

The data received from the GPS is NMEA0183 GPGGA formatted string data, and can be inspected in NMEAGPSApp NMEAOnSerial IOConfig GPGGA_Receive.

Web Application

The Web application contains a simple map from OpenLayers(http://openlayers.org) showing the position of your GPS.

The javascript reads out Latitude and Longitude using promise-based client.find-calls. The CDP Client documentation explains the API.

To inspect the code that gets the GPS position from CDP and shows it in the map, go to Code mode, expand NMEAGPSApp Other files Application www nmeagps and open the component.js file.

Manual Testing

To test the application without a device, the user can enter converted GPS coordinates directly into the Latitude and Longitude channels in NMEAGPSApp NMEAOnSerial IOConfig GPGGA_Receive.

The channels are in NMEA(National Marine Electronics Association) format. Today in the world of GPS, NMEA is a standard data format supported by all GPS manufacturers. NMEA 0183 I/O Configuration Manual.

The format for NMEA coordinates is (d)ddmm.mmmm d=degrees and m=minutes.

You can use this site to find your Longitude and Latitude https://www.gps-latitude-longitude.com

Convert your GPS coordinates by simply multiplying the integer part by 100 and the decimal part by 60, then add the two numbers together. Multiply by -1 for W and S.

Example : London - GPS coordinates conversion

Latitude  : 51.507351 => (51 * 100) + (0.507351 * 60)      => 5130.44106 NMEA

Longitude : -0.127758 =>  (0 * 100) + (0.127758 * 60) * -1 => -7.66548 NMEA

Troubleshooting

If you have problems running or viewing the example, see Troubleshooting.