4

How do I structure this ajax call to receive GPS point data from a REST service point and display the points as tracks on an OpenLayers map. So far I have the following code;

dataProvider.requestJSON = function(trackId) {
    $.ajax({
        url: "https://services.arcgis.com/Sf0q24s0oDKgX14j/arcgis/rest/services/gpsData/FeatureServer/0/query?where=Source= " + trackId + " &outFields=*&f=geojson",
        method: 'GET',

        success: function(response) {
            visualizer.sendDataToMap(response);
            
        },
        error: function(error) {
        }
    });
};

The idea is to have the user input the trackId on the application and visualize the respective track. The trackId is called source on the GeoJSON. How can I fetch the GPS data from the service endpoint and display them on an OpenLayers map as tracks? I would like to implement the solution with jQuery/AJAX, AngularJS and OpenLayers.

Improve this question
2
  • If I open your url with trackId 1, 2, 3, etc. I get a geojson contains points with ele and time properties. Do you want to display the points, or create a linestring linking the points?
    – Mike
    May 15, 2021 at 11:46
  • I would like to create a linestring linking the points. The user selects the track by ID (labelled source on the gps data) and a track is displayed on the map. I am not quite sure how to structure the success object on the ajax call and also how to prepare the data to be converted to linestrings using openlayers.Thanks
    – kudah
    May 15, 2021 at 11:53

1 Answer 1

Reset to default
6

Here is a simple OpenLayers example https://codesandbox.io/s/simple-forked-4m0d8 which will fetch a TrackID, convert the points, elevation and times into an XYZM format linestring and display it.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Map</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <br />
    <div class="tileCoord">
      <span>Track ID: <input type="number" id="trackId" value="1" /></span>
      <span>&nbsp;&nbsp;</span>
      <button id="fetch">Fetch Track</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

JavaScript:

import "ol/ol.css";
import Feature from "ol/Feature";
import GeoJSON from "ol/format/GeoJSON";
import LineString from "ol/geom/LineString";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import View from "ol/View";

const vectorSource = new VectorSource();

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: vectorSource
    })
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

document.getElementById("fetch").addEventListener("click", function () {
  const trackId = document.getElementById("trackId").value;
  fetch(
    "https://services.arcgis.com/Sf0q24s0oDKgX14j/arcgis/rest/services/gpsData/FeatureServer/0/query?where=Source=" +
      trackId +
      "&outFields=*&f=geojson"
  )
    .then(function (response) {
      return response.text();
    })
    .then(function (result) {
      const points = new GeoJSON().readFeatures(result);
      if (points.length > 0) {
        const coordinates = points.map(function (point) {
          const xy = point.getGeometry().getCoordinates();
          const properties = point.getProperties();
          return [xy[0], xy[1], properties.ele, properties.time];
        });
        const lineString = new Feature(
          new LineString(coordinates).transform(
            "EPSG:4326",
            map.getView().getProjection()
          )
        );
        lineString.setId(trackId);
        vectorSource.addFeature(lineString);
        map.getView().fit(lineString.getGeometry().getExtent());
      }
    });
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.