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');
}
});
