Display a GPS location on a map in the application

,

I can see how to capture GPS locations in the app, but how do I display a captured GPS location on a map in the application?

If you just want to display the contents of a GPS location that was captured in the application, then you can do this by programmatically accessing and displaying any of the underlying values that form part of the set of GPS coordinates.

VIEW XML

<info-table>
  <row label="Latitude" value="{location.latitude}" />
  <row label="Longitude" value="{location.longitude}" />
  <row label="Horizontal Accuracy" value="{location.horizontal_accuracy}" />
</info-table>

<capture-coordinates bind="location" />

example contents of a set of GPS coordinates in JS:

{
  "latitude": -25.92593042155752,
  "longitude": 28.15002065192829,
  "altitude": 1570.0,
  "horizontal_accuracy": 10.0,
  "vertical_accuracy": null,
  "timestamp": "2013-10-17T07:25:21Z"
}


However, If you want to display GPS coordinates on a MAP you will need to use an external map service like Google Maps, MapBox or MapQuest.

You can do this by displaying a static HTML file using the html component, or by dynamically updating and serving an HTML file using CloudCode and custom web tasks.

PS. It is also possible to do this dynamically in the application JS using HTML Bridge and the html component, but this is fairly complicated and is only useful if the map is required offline.

For now let's only look at the first two options.


STATIC HTML EXAMPLE

This example will display two markers on a map using a static HTML file that was added to the application's assets. It uses a mapbox JS library to render the map and the markers. It will require a MapBox API token to work

HTML FILE

<!DOCTYPE html>
<html>

  <head>
    <meta charset=utf-8 />
    <title></title>
    <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 800px;
        }

        .map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 800px
        }
    </style>
  </head>
  <body>
    <div id='map-popups' class='map'> </div>
    <script>
      L.mapbox.accessToken = ''; //  <<<<====== INSERT MAPBOX API TOKEN HERE ======>>>>
      L.mapbox.config.FORCE_HTTPS = true;
      var mapPopups = L.mapbox.map('map-popups', 'mapbox.light')
        .setView([38.8, -95], 5);
      var myLayer = L.mapbox.featureLayer().addTo(mapPopups);

      var geojson = [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-122.413682, 37.775408]
          },
          properties: {
            title: 'NOV - Casper [Rover]',
            description: 'SN: EZY13209; Next Cal: 2007-09-13',
            'marker-color': '#d81e05',
            'marker-size': 'medium',
            'marker-symbol': 'airport'
          } 
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-77.031952,  38.913184]
          },
          properties: {
            title: 'Pathfinder - Broussard [Grunter]',
            description: 'SN: NPU37555; Next Cal: 2009-01-15',
            'marker-color': '#9a2979',
            'marker-size': 'medium',
            'marker-symbol': 'monument'
          } 
        }
      ];
      myLayer.setGeoJSON(geojson);
    </script>
  </body>
</html>

VIEW XML

<html src="html/maps-example.html" show-fullscreen-button="true"/>


DYNAMIC HTML EXAMPLE

This example will display a map that is being served from a CloudCode webtask (called view_map) on a specific URL with several map markers populated from data in the DB. It uses a mapbox JS library to render the map and the markers, and a handlebars template to generate the HTML. It to will require a MapBox API token to work.

CLOUDCODE TASK JS

import handlebars from 'handlebars';

// This must be defined, and should return either access.authorized() or access.unauthorized()
export async function authenticate({request, access}) {
    return access.authorized();
}

// HTTP GET request
export async function get({params, request, response, authContext}) {
    // Handle the request here

    let mapMarkers = await DB.map_marker.all().toArray();
    let geoJSON = mapMarkers.map(function (marker) {
        return {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [marker.coordinates_lat, marker.coordinates_lon]
            },
            properties: {
                title: marker.title,
                description: marker.description,
                'marker-color': marker.marker_color,
                'marker-size': 'medium',
                'marker-symbol': marker.marker_symbol
            } 
        };
    });


    let mapPage = handlebars.compile(`
        <!DOCTYPE html>
        <html>

          <head>
            <meta charset=utf-8 />
            <title></title>
            <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
            <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
            <style>
                body {
                    margin: 0;
                    padding: 0;
                    height: 800px;
                }

                .map {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                    height: 800px
                }
            </style>
          </head>
          <body>
            <div id='map-popups' class='map'> </div>
            <script>
              L.mapbox.accessToken = ''; //  <<<<====== INSERT MAPBOX API TOKEN HERE ======>>>>
              L.mapbox.config.FORCE_HTTPS = true;
              var mapPopups = L.mapbox.map('map-popups', 'mapbox.light')
                .setView([38.8, -95], 5);
              var myLayer = L.mapbox.featureLayer().addTo(mapPopups);

              var geojson = {{{mapMarkers}}}
              myLayer.setGeoJSON(geojson);
            </script>
          </body>
        </html>      
`);


    let data = {mapMarkers: JSON.stringify(geoJSON)};
    let html = mapPage(data);

    response.contentType('text/html');

    return html;
}

VIEW XML

<html src="https://{some_url}.poweredbyjourney.com/view_map" show-fullscreen-button="true"/>
1 Like