POST
|
Thanks Robert - that visually does what I need, but I am getting errors in the console which is leading me to believe that I may be doing something that's going to come back to bite me. I wrote in an app.removeGraphics function (see below) that loops through the graphics layer and identifies a graphic based on a graphic attribute. IF=f that attribute is there, the graphic is removed. When I toggle one line on and off the graphic clears and no errors are logged to the console. However, when I have 2 or more toggled turned on, the routes still are removed when toggled off, but I get an error in the console. I tried logging the graphicsLayer.graphics properties to the console directly after and new line gets toggled on and then again once a line gets toggled off and then removed. The logs beforehand loos as expected, but when I toggle off a line a get an empty array back even though there is still at least one graphic left visible on the graphics layer. Error: main.js:2446 Uncaught TypeError: Cannot read property 'attributes' of undefined New function:
app.removeGraphic = function (graphicsLayer, description){
for (gL = 0; graphicsLayer.graphics.length; gL++){
if (graphicsLayer.graphics[gL].attributes[0] == description){
graphicsLayer.remove(graphicsLayer.graphics[gL]);
graphicsLayer.redraw();
}
}
}
... View more
04-10-2017
02:20 PM
|
0
|
4
|
3085
|
POST
|
Robert - My intention is that it is but I must be doing this incorrectly. In my app.routesGraphicFunction (line 66), at the very end of the function I create a new Graphic (line 76). in the function, rather than assigning a variable to the new graphic, I assign an argument that can be passed into the function with the idea that the argument value is the unique id. So in this example, when I call the app.routesGraphicFunction, I pass the argument redRoute as the new graphic variable. 'redRoute' was already defined as a global variable on line 11. What is an alternative for identifying a unique graphic?
... View more
04-10-2017
11:44 AM
|
0
|
6
|
3085
|
POST
|
I have a series of graphics that get added to a single graphics layer when a user toggles on a switch. There are different toggles for each graphic (they're routes to bus lines) but all route graphics are being added to the same graphics layer. When a user toggles off a certain route, I want the route to be removed from the graphics layer, but keep the other routes on the graphics layers if they're toggled on. I have assigned the graphic being added a unique ID, however, using graphicsLayerName.remove(graphicID) isn't working for me. //create graphic layer
app.routesGraphicsLayer = new GraphicsLayer({
id:'routesGraphicsLayer'
])
//Add graphics layer
app.map.addLayer(app.routesGraphicsLayer)
app.routesGraphicsLayer.hide() //will get shown when toggled on
//Create unique variable names for graphic IDs
var redRoute;
//When Toggled ON:
app.handleLayerVis = function (switchName, state) {
require(["dojo/dom","dojo/dom-class","dojox/mobile/Switch"], function(dom,domClass,Switch){
console.log(switchName + " -- " + state);
if (state === "on") {
console.log('app.showLoading()');
app.showLoading();
}
//hide popup
if (state === "off") {
app.map.infoWindow.hide();
}
switch (switchName) {
case "redShuttleSwitch":
if (state === "on") {
//Turn off All Active Shuttles if its currently toggled on
app.switchLogic();
//Request Route
app.esriRouteRequest(15).then(function (routeResponse) {
app.routesGraphicFunction("Red", routeResponse, app.routesGraphicsLayer, redRoute);
//Display route
app.showGraphicsLayer('routesGraphicsLayer');
});
else {
//when route gets toggled off, remove graphic from graphics layer
app.routesGraphicsLayer.remove(redRoute);
app.routesGraphicsLayer.redraw();
}
break;
app.esriRouteRequest = function() {
var routeRequest = new esriRequest({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetRoutesForMapWithScheduleWithEncodedLine",
content: {
apikey: "ride1791",
},
handleAs: "json",
callbackParamName: "method"
});
routeRequest.then(app.routeRequestSucceeded, app.requestFailed);
return routeRequest;
}
app.routeRequestSucceeded = function(data) {
routesArray = [];
for (i = 0; i < data.length; i++) {
routesArray.push(data[i]);
}
return routesArray;
}
app.routesGraphicFunction = function (colorDescription, data, graphicslayer, routeGraphic) {
var routeObjects = data;
for (i = 0; i < routeObjects.length; i++) {
if (routeObjects[i].Description == colorDescription){
//Create Symbology
var routeSLS = new SimpleLineSymbol ().setStyle(SimpleLineSymbol.STYLE_SOLID).setWidth(4).setColor(new Color(routeObjects[i].MapLineColor));
//Create InfoTemplate
var routesInfoTemplate = new InfoTemplate (routeObjects[i].Description+" Line", "<b>Stops Schedule: </b>" + app.moreInfoHyperlink(routeObjects[i].StopTimesPDFLink))
//Create Graphic
routeGraphic = new Graphic(new Polyline(app.decodeGooglePolyline(routeObjects[i].EncodedPolyline), app.map.SpatialReference), routeSLS, routeObjects[i].StopTimesPDFLink, routesInfoTemplate);
}
}
//Add graphics to graphics layer
graphicslayer.add(routeGraphic);
}
... View more
04-10-2017
11:01 AM
|
0
|
8
|
8343
|
POST
|
Are many-to-many relationships viewable on AGOL or Web App Builder? I can only seem to find info on Collector and the ABD editor widget. Thanks
... View more
04-04-2017
10:51 AM
|
0
|
0
|
517
|
POST
|
Did you ever find an answer to this? I'm experiencing the same problem. I've tried adding the feature layer to a different webmap but I get the same results.
... View more
03-16-2017
09:12 AM
|
0
|
1
|
2869
|
POST
|
Thanks for the tip Robert. There is nothing being logged after the for loop.And the log statements outside the for loop are still inconsistent. Sometimes I get info back and sometimes the array is empty even when graphics are present.
... View more
01-31-2017
06:10 PM
|
0
|
0
|
613
|
POST
|
Thanks Robert. I can get the console.log statement to work prior to the set interval and after the setInterval, but not within the setInterval which is where it would be most helpful so I can troubleshot. Is this not possible? vehicle.on("stateChanged", function(newstate) {
if (newstate === "on") {
//Request vehicle locations
esriVehicleRequest(15).then(function(vehicleResponse) {
vehicleGraphicFunction(vehicleResponse);
vehicleLocationGraphicsLayer.show();
});
console.log(vehicleLocationGraphicsLayer.graphics); //working for the moment
vehicleInterval = setInterval(function(){
esriVehicleRequest(15).then(function(vehicleResponse){
for (gl = 0; gl<vehicleLocationGraphicsLayer.graphics; gl++){
for (i=0; i < vehicleResponse.length; i++){
vehicleLocationGraphicsLayer.graphics[gl].attributes = vehicleResponse[i].VehicleID;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].attributes);
vehicleLocationGraphicsLayer.graphics[gl].geometry.x = vehicleResponse[i].Longitude;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.x);
vehicleLocationGraphicsLayer.graphics[gl].geometry.y = vehicleResponse[i].Latitude;
//console.log(vehicleLocationGraphicsLayer.graphics[gl].geometry.y);
}
}
});
vehicleLocationGraphicsLayer.redraw();
//console.log("Test");
}, 2000);
}
else {
//Stop setInterval
clearVehicleInterval(vehicleInterval);
//Clear graphics
vehicleLocationGraphicsLayer.clear();
//Hide graphics layer
vehicleLocationGraphicsLayer.hide();
}
console.log ("Post: ", vehicleLocationGraphicsLayer.graphics);
... View more
01-31-2017
02:40 PM
|
0
|
2
|
613
|
POST
|
Thanks for the suggestion Robert, but it still doesn't log anything.
... View more
01-31-2017
01:10 PM
|
0
|
4
|
613
|
POST
|
I need to access the geometry properties of a graphics array so that I can update the associate attribute values, but when I try and view the properties of my graphics layer the Array is empty - but the graphics are shown on the map. I've tried changing the log statement to not anything until the graphics "load", "update" or 'update-end" but then it doesn't log anything. What happening here? Note: The relevant code starts on line 42 // Create the map
var map = new Map("map", {
basemap: "topo",
center: [-111.841947, 40.765530],
zoom: 15
});
//Create Graphics Layer
var stopsGraphicsLayer = new GraphicsLayer({
id: "stopsGraphicsLayer"
});
var vehicleLocationGraphicsLayer = new GraphicsLayer({
id: "vehicleLocationGraphicsLayer"
});
var basemap = new ArcGISTiledMapServiceLayer("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
map.addLayer(basemap);
//add graphics layer
map.addLayer(vehicleLocationGraphicsLayer);
map.addLayer(stopsGraphicsLayer);
//Create Toggles
var vehicleInterval;
var vehicle = new Switch({
id: "vehicle", //defines css - and you can not repeat and id
value: "off",
"class": "mblSwSquareShape"
});
vehicle.placeAt(document.body); // e.g add the switch to body
vehicle.startup();
vehicle.on("stateChanged", function(newstate) {
if (newstate === "on") {
//Request vehicle locations
esriVehicleRequest(15).then(function(vehicleResponse) {
vehicleGraphicFunction(vehicleResponse);
vehicleLocationGraphicsLayer.show();
//I've tried "update", 'update-end' as well with no success
vehicleLocationGraphicsLayer.on("load", function(){
console.log(vehicleLocationGraphicsLayer);
})
//logs an empty array
//console.log( vehicleLocationGraphicsLayer);
vehicleInterval = setInterval(function(){
//Make an esriRequest
esriVehicleRequest(15).then(function(vehicleResponse){
//Update each graphic in the GL with data from the esriRequest
for (graphics = 0; graphics < vehicleLocationGraphicsLayer.graphics.length; graphics++){
//update each graphic in the GL with data from the vehicleResponse
}
//vehicleLocationGraphicsLayer.redraw();
});
}, 2000);
});
}
else {
//Stop setInterval
clearVehicleInterval(vehicleInterval);
//Clear graphics
vehicleLocationGraphicsLayer.clear();
//Hide graphics layer
vehicleLocationGraphicsLayer.hide();
}
});
function clearVehicleInterval(graphicsLayer) {
clearInterval(graphicsLayer);
}
function esriVehicleRequest(routeID) {
return new esriRequest({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
content: {
apikey: "ride1791",
routeID: routeID
},
handleAs: "json",
callbackParamName: "method"
}).then(function(data) {
return data;
});
}
function vehicleGraphicFunction(data) {
var vehicleObjects = data
var vehicleGraphic;
var vehicleAttributes;
for (i=0; i < vehicleObjects.length; i++ ){
//Create Symbology
var vehiclePNG = new PictureMarkerSymbol({
url: "http://batholithtest.fm.utah.edu/map.utah.edu/app/resources/images/icons/shuttleicons/nightred.png",
height: 30,
width: 30
});
//Create Graphic
vehicleGraphic = new Graphic(new Point(vehicleObjects[i].Longitude, vehicleObjects[i].Latitude, map.SpatialReference), vehiclePNG, vehicleObjects[i].VehicleID);
//add graphics to layer
vehicleLocationGraphicsLayer.add(vehicleGraphic);
}
}
});
... View more
01-31-2017
11:52 AM
|
0
|
6
|
1668
|
POST
|
I am accessing a service from another provider to create part of an application. I make an esriRequest to grab Lat/Long coordinates and create a graphics. This initial request also contains some attributes that I would like to display in the InfoTemplate (and have done so successfully). However, there is a separate request that is needed to fetch the rest of the attributes that I would like to display within the same infoTemplate. Is this even possible? If not, I would most likely choose to use the data from the SECOND request to show in the infoTemplate and have not had any success in being able to do so. Using Chrom dev tools I can see the request being successfully made, but the infoTemplate remains empty. I think its because I'm not correctly passing in the attributes parameter to the graphic when its getting created. I thought that by returning the 'vehicleTemplateArray' I would be able to achieve this but its not working. How do I make this work? Thank you. //Create Toggles
var vehicleInterval;
var vehicle = new Switch({
id: "vehicle", //defines css - and you can not repeat and id
value:"off",
class:"mblSwSquareShape"
});
vehicle.placeAt(document.body); // e.g add the switch to body
vehicle.startup();
vehicle.on("stateChanged",function(newstate){
if (newstate === "on"){
//Request vehicle locations
esriVehicleRequest(15).then(function(vehicleResponse){
vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
});
vehicleInterval = setInterval(function(){
vehicleLocationGraphicsLayer.clear();
esriVehicleRequest(15).then(function(vehicleResponse){
vehicleGraphicFunction(new Color([255,0,0]), vehicleResponse);
});
}, 3000);
}
else
{
//Stop setInterval
clearVehicleInterval(vehicleInterval);
//Clear graphics
vehicleLocationGraphicsLayer.clear();
//Hide graphics layer
vehicleLocationGraphicsLayer.hide();
}
});
function clearVehicleInterval (graphicsLayer){
clearInterval(graphicsLayer);
}
function esriVehicleRequest(routeID) {
var vehicleRequest = new esriRequest({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
content: {
apikey: "ride1791",
routeID: routeID, //needs to become an input variable
},
handleAs: "json",
callbackParamName: "method"
});
vehicleRequest.then(vehicleRequestSucceeded, requestFailed);
return vehicleRequest;
}
function vehicleRequestSucceeded(data) {
var vehicleArray = [];
//Get vehicle points
for (i = 0; i < data.length; i++) {
vehicleArray.push(data[i]);
}
return vehicleArray;
}
function vehicleGraphicFunction(color, data) {
var vehicleObjects = data;
for (i = 0; i < vehicleObjects.length; i++) {
//Create Symbology
var vehicleSMS = new SimpleMarkerSymbol().setSize(30).setColor(new Color(color));
//Create InfoTemplate
//These attributes are part of the intial esriRequest and I CAN show them
//I would like to combine this with a second request OR only show the second request
//var vehicleInfoTemplate = new InfoTemplate ("<b>Name: </b>"+vehicleObjects.Name, "<b>Speed: </b>"+Math.round(vehicleObjects.GroundSpeed)+"mph");
//Create Graphic
var vehicleGraphic = new Graphic(new Point(vehicleObjects[i].Longitude, vehicleObjects[i].Latitude, map.SpatialReference), vehicleSMS, vehicleInfoTemplateRequestSucceeded, esriVehicleInfoTemplateRequest(data[i].VehicleID));
//Add graphics to graphics layer
map.getLayer(vehicleLocationGraphicsLayer);
vehicleLocationGraphicsLayer.add(vehicleGraphic);
vehicleLocationGraphicsLayer.show();
}
}
function esriVehicleInfoTemplateRequest (vehicleID) {
var vehicleInfoTemplateRequest = new esriRequest ({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetVehicleRouteStopEstimates",
content: {
vehicleIDStrings: vehicleID, //comma seperated integers of vehicle IDs to retrieve - GetMapVehiclePoints method
quantity: 1,
},
handleAs: "json",
callbackParamName: "method"
});
vehicleInfoTemplateRequest.then(vehicleInfoTemplateRequestSucceeded, requestFailed);
return vehicleInfoTemplateRequest;
}
function vehicleInfoTemplateRequestSucceeded (data){
console.log(data);
var vehicleTemplateArray = [];
for (i = 0; i < data.length; i++){
vehicleTemplateArray.push(data[i]);
var vehicleInfoTemplate = new InfoTemplate ("<b>VehicleID: </b>"+data[i].VehicleID, data[i].Estimates[i].Description+": "+data[i].Estimates[i].EstimateTime);
}
//console.log(vehicleTemplateArray);
return vehicleTemplateArray;
return vehicleInfoTemplate;
}
function requestFailed(error) {
console.log("Error: ", error.message);
}
});
... View more
12-13-2016
01:19 PM
|
0
|
1
|
403
|
POST
|
That appears to be working. I see that the brackets just had to be removed from this line in the stopsGraphic function var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(color); thank you
... View more
11-30-2016
12:52 PM
|
0
|
0
|
1007
|
POST
|
Actually, the code doesn't seem to acknowledge different colors that are passed through. I just tried 255,0,0 (red) and still had black symbols being returned which I'm assuming is a default color if a color isn't assigned. EDIT: It seems to work in your JSBin but if I copy/paste it into an html file the colors don't change. Thoughts?
... View more
11-30-2016
12:24 PM
|
0
|
4
|
1007
|
POST
|
Thank you Kelly - That works but I'm not clear as to why. Is there a resource you can point me to? I appreciate your time.
... View more
11-30-2016
11:44 AM
|
0
|
1
|
1007
|
POST
|
I am using the esri/request function to return an array of Long, Lat coordinates that I can then symbolize and add to a graphics layer. I have been able to successfully do this by creating the symbology and graphics within the stopsRequestSucceeded callback method. My issue is that I need to be able to repeat this call for approximately 15 different sets of data that would all need to be symbolized differently, and using the current method that I have working, I would have to write 15 different successful callback methods. To get around this I am trying to write two different functions. First, I narrowed the scope of the stopsRequestSucceeded method to push all the results to an array. This does work (at least according to my console.log statement. Next, I wrote a second function that would call the stopsRequestSucceeded function so that I can loop through the returned array and assign symbology and create a graphic. However, when I call the stopsRequestSucceeded function within the second, stopsGraphic function, the variable is empty. What am I doing wrong? require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/request",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/Color",
"esri/InfoTemplate",
"dojo/dom",
"dojo/on",
"dojo/dom-class",
"dojo/_base/json",
"dojox/mobile/Switch",
"dojo/parser",
"dojo/ready"],
function (Map,ArcGISTiledMapServiceLayer, GraphicsLayer, esriRequest,SimpleMarkerSymbol, Graphic, SpatialReference, Point, Color, InfoTemplate,
dom, on, domClass, dojoJson, Switch, parser, ready){
// Create the map
var map = new Map("map", {
basemap: "topo",
center: [-111.841947,40.765530],
zoom: 15
});
//Create Graphics Layer
var stopsGraphicsLayer = new GraphicsLayer({
id: "stopsGraphicsLayer"
});
var vehicleLocationGraphicsLayer = new GraphicsLayer ({
id: "vehicleLocationGraphicsLayer"
});
var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
map.addLayer(basemap);
//add graphics layer
map.addLayer(vehicleLocationGraphicsLayer);
map.addLayer(stopsGraphicsLayer);
//hide graphics layer
vehicleLocationGraphicsLayer.hide();
stopsGraphicsLayer.hide();
//Create Toggles
var vehicle = new Switch({
id: "vehicle", //defines css - and you can not repeat and id
value:"off",
class:"mblSwSquareShape"
});
vehicle.placeAt(document.body); // e.g add the switch to body
vehicle.startup();
vehicle.on("stateChanged",function(newstate){
if (newstate === "on"){
//Request vehicle locations
esriVehicleRequest(15);
//request stop locations
esriStopRequest(15);
stopsGraphic(0,0,0);
}
else
{
vehicleLocationGraphicsLayer.hide();
stopsGraphicsLayer.clear();
stopsGraphicsLayer.hide();
}
});
function esriVehicleRequest(routeID){
var vehicleRequest = new esriRequest ({
url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
content: {
apikey: "ride1791",
routeID: routeID, //needs to become an input variable
},
handleAs: "json",
callbackParamName: "method"
});
vehicleRequest.then(vehicleRequestSucceeded, requestFailed);
}
function vehicleRequestSucceeded(data) {
//Get vehicle points
for (i=0; i < data.length; i++) {
console.log("Vehicle Points: ", data[i].Longitude , data[i].Latitude);
}
}
function esriStopRequest (routeID){
var stopsRequest = new esriRequest ({
url: "http://uofubus.com/Services/JSONPRelay.svc/GetStops",
content: {
apikey: "ride1791",
routeID: routeID,
},
handleAs: "json",
callbackParamName: "method"
});
stopsRequest.then(stopsRequestSucceeded, requestFailed); //both methods are registered as part of esri request
}
/*
//THIS WORKS BUT I NEED TO BE ABLE TO APPLY DIFF SYMBOLOGY TO EACH NEW ARRAY RETURNED
function stopsRequestSucceeded (data){
//Get Stops
for(i=0; i < data.length; i++){
//Create Symbology
var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([0,0,0]));
//Create InfoTemplate
//Create Graphic
var stops = new Graphic (new Point (data.Longitude, data.Latitude, map.SpatialReference), stopsSMS);
console.log(stops);
//Add graphics to graphics layer
map.getLayer(stopsGraphicsLayer);
stopsGraphicsLayer.add(stops);
map.graphics.add(stops);
}
//Once all the graphics are added to the graphics layer, show GL
stopsGraphicsLayer.show();
console.log("graphics layer added: ");
console.log(stopsGraphicsLayer);
} */
//New Return Data Function
function stopsRequestSucceeded(data){
var stopsArray = [];
//Get Stops
for(i=0; i < data.length; i++){
stopsArray.push(data[i]);
}
console.log ("Stops Array:", stopsArray);
return stopsArray;
}
//Get data from the stopsRequestSucceeded function, apply symbology and create graphics
function stopsGraphic(color){
var stopObjects = stopsRequestSucceeded();
console.log(stopObject); //not logging anything
for(i=0; i < stopObjects.length; i++) {
//Create Symbology
var stopsSMS = new SimpleMarkerSymbol().setSize(15).setColor(new Color([color]));
//Create Graphic
var stops = new Graphic (new Point (stopObjects[i].Longitude, stopObjects[i].Latitude, map.SpatialReference), stopsSMS);
console.log(stops);
//Add graphics to graphics layer
map.getLayer(stopsGraphicsLayer);
stopsGraphicsLayer.add(stops);
map.graphics.add(stops);
}
}
function requestFailed(error) {
console.log("Error: ", error.message);
}
});
... View more
11-30-2016
10:05 AM
|
0
|
8
|
1309
|
Title | Kudos | Posted |
---|---|---|
1 | 02-12-2016 08:53 AM | |
1 | 02-05-2016 03:48 PM | |
1 | 10-21-2016 02:26 PM | |
1 | 01-20-2016 10:59 AM | |
2 | 08-31-2017 09:06 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|