AnsweredAssumed Answered

Request and Render JSON information from InstaMapper’s GPS Tracker API

Question asked by GEOLucas on Jan 22, 2016
Latest reply on Jan 22, 2016 by rscheitlin

I am just learning the ArcGIS API for Javascript so I'm not sure if this is possible or not.
I have an app running on my Android device from InstaMapper. The app assigns each phone on my account an ID and provides the lat/long for each device through their API. The InstaMapper API serves out the information in JSON format that can be accessed from their URL:http://ww2.insta-mapper.com/api/api_multi.php?key=<INSERT_KEY_ID>&device_id=<INSERT DEVICE ID>

 

I've successfully tested accessing the JSON information using the Access Data (JSON) example from the JavaScript API for ArcGIS site.

The JSON that was returned looks like this.

{

    "minutes": "4665",

    "Datetime": "2016-01-19 10:52:38",

    "lng": "-103.89639282",

    "lat": "48.77193832",

    "device_id": "999999991",

    "friendly_name": "John",

    "speed": "0.0",

    "altitude": "4211",

    "accuracy": "20",

    "heading": "334",

    "kph": "0",

    "battery": "96"

  },

  {

    "minutes": "4665",

    "Datetime": "2016-01-19 10:52:37",

    "lng": "-103.89639282",

    "lat": "48.77193832",

    "device_id": "999999992",

    "friendly_name": "JANE",

    "speed": "0.0",

    "altitude": "4211",

    "accuracy": "20",

    "heading": "319",

    "kph": "0",

    "battery": "96"

  },

 

I am trying to make an app that shows runners in a race by taking the lat,lng from the JSON and show a point on the map for each device in my account. If I can access the other information like kph or time that would be great too but right now I just need to see the location on a map.

I was able to do this with the FLEX API for ArcGIS awhile ago but trying to switch over to Javascript now and I just don't know enough to get this to work. I've tried requesting the json and rendering it using the examples and help I've researched online but I just don't know enough to get it show up.

Any help would be really appreciated.Thanks

 

I've put the following together from an example on the JavaScript API site but I'm thinking it's so far from working I don't know if it's of any use.

 

//create a feature collection for runner

        var featureCollection = {

          "layerDefinition": null,

          "featureSet": {

            "features": [],

            "geometryType": "esriGeometryPoint"

          }

        };

  featureCollection.layerDefinition = {

          "geometryType": "esriGeometryPoint",

          "objectIdField": "ObjectID",

          "drawingInfo": {

            "renderer": {

              "type": "simple",

              "symbol": {

                "type": "esriPMS",

                "url": "src/img/0.png",

                "contentType": "image/png",

                "width": 15,

                "height": 15

              }

            }

          },

          "fields": [{

            "name": "ObjectID",

            "alias": "ObjectID",

            "type": "esriFieldTypeOID"

          }, {

            "name": "description",

            "alias": "Description",

            "type": "esriFieldTypeString"

          }, {

            "name": "title",

            "alias": "Title",

            "type": "esriFieldTypeString"

          }]

        };

 

  //define a popup template

        var popupTemplate = new PopupTemplate({

          title: "{title}",

          description: "{description}"

        });

 

  //create a feature layer based on the feature collection

        featureLayer = new FeatureLayer(featureCollection, {

          id: 'runnerLayer',

          infoTemplate: popupTemplate

        });

 

 

         map.on("layers-add-result", function(results) {

          requestRunner();

        });

      

        map.addLayers([featureLayer]);

 

  function requestRunner() {

    

        var requestHandle = esriRequest({

          url: "http://www.insta-mapper.com/api/api_single.php?device_id=<INSERT_DEVICE_ID>",

          callbackParamName: "jsoncallback"

        });

        requestHandle.then(requestSucceeded, requestFailed);

      }

 

      function requestSucceeded(response, io) {

        //loop through the items and add to the feature layer

        var features = [];

        array.forEach(response.items,

  function(item) {

          var attr = {};

          attr["description"] = item.friendly_name;

          attr["title"] = item.device_id;

 

         var geometry = new Point(item);

 

          var graphic = new Graphic(geometry);

          graphic.setAttributes(attr);

          features.push(graphic);

         });

 

        featureLayer.applyEdits(features, null, null);

     }

 

 

      function requestFailed(error) {

        console.log('failed');

      }

    });

Outcomes