|
POST
|
Craig, Thanks so much for the sample. It's great. I used both Firefox and Chrome and was able to cause both browsers to hang using your replication steps. Will look into this and post my findings.
... View more
04-08-2014
08:14 AM
|
0
|
0
|
2077
|
|
POST
|
Great! I've not done much with ASP.net personally but this solution looks best for your app. As long as getDraw() waits for the data from the database, you should have no issues.
... View more
04-08-2014
08:02 AM
|
0
|
0
|
1631
|
|
POST
|
I modified your sample a bit to console.log("clicked") when a particular button is pressed. http://jsfiddle.net/hzNmf/8/
... View more
04-07-2014
02:26 PM
|
0
|
0
|
2060
|
|
POST
|
Ran out of space in the other post. Here is a more advanced sample with click interaction between the grid and map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with a Dojo dGrid</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
height: 100%;
visibility: hidden;
}
#bottomPane { height: 200px; }
#grid { height: 100%; }
.dgrid { border: none; }
.field-id { cursor: pointer; }
</style>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
// Debug Globals
var map, grid, memStore, myFeatureLayer;
var statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";
var outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW500_CY"];
require([
"dojo/ready",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dijit/registry",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/parser",
"dgrid/extensions/ColumnResizer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function(
ready,
Grid,
Selection,
Memory,
array,
domStyle,
registry,
Map,
FeatureLayer,
SimpleFillSymbol,
QueryTask,
Query,
declare,
dojoNum,
on,
parser,
ColumnResizer
) {
ready(function() {
parser.parse();
// Create the grid
var StandardGrid = declare([Grid, Selection]);
grid = new StandardGrid({
bufferRows: Infinity,
cellNavigation: false,
escapeHTMLInData: false,
noDataMessage: "",
loadingMessage: "",
selectionMode: "single",
sortable: true
}, "grid");
grid.startup();
// add a click listener on the ID column
grid.on(".field-id:click", function(e){
// select the feature
var fl = map.getLayer("states");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML)];
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
if ( result.length ) {
// re-center the map to the selected feature
window.map.centerAt(result[0].geometry.getExtent().getCenter());
} else {
console.log("Feature Layer query returned no features... ", result);
}
});
});
// Create the map object
map = new Map("map", {
basemap: "gray",
center: [-101.426, 42.972],
zoom: 4
});
// Map Load Event
map.on("load", function( evt ){
console.log('map loaded');
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
populateGrid();
});
var fl = new FeatureLayer(statesUrl, {
id: "states",
mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
outFields: outFields
});
fl.on("load", function(data) {
fl.maxScale = 0; // show the states layer at all scales
fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
console.log('feature layer loaded', data);
console.log('data.layer.fields', data.layer.fields);
map.addLayer(fl);
});
fl.on("click", function(e){
var id = e.graphic.attributes.OBJECTID;
// select the feature that was clicked
var query = new Query();
query.objectIds = [id];
var states = map.getLayer("states");
states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
grid.row(id).element.scrollIntoView();
});
// change cursor to indicate features are click-able
fl.on("mouse-over", function() {
map.setMapCursor("pointer");
});
fl.on("mouse-out", function() {
map.setMapCursor("default");
});
function populateGrid() {
var qt = new QueryTask(statesUrl);
var query = new Query();
query.where = "1=1";
query.returnGeometry = false;
query.outFields = outFields;
qt.execute(query, function(results) {
console.log('results.features', results.features);
var data = array.map(results.features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"OBJECTID": feature.attributes[outFields[0]],
"NAME": feature.attributes[outFields[1]],
"MEDNW_CY": feature.attributes[outFields[2]],
"NW500_CY": feature.attributes[outFields[3]]
}
});
grid.set("columns", generateColumns(results.fields));
var memStore = new Memory({ data: data, "idProperty": "OBJECTID" });
grid.set("store", memStore);
});
}
// Returns Columns object for dgrid store
function generateColumns(fields){
var columns = [];
fields.forEach (function (field){
var objects = {};
objects.label = field.alias;
objects.field = field.name;
columns.push(objects);
});
return columns;
}
});// End Ready
});
</script>
</head>
<body class="tundra">
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
</div>
</div>
</body>
</html>
... View more
04-07-2014
11:48 AM
|
0
|
0
|
2166
|
|
POST
|
Check out this jsfiddle example using a featureLayer to populate a dgrid (no map involved): http://jsfiddle.net/wWTVL/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dynamic dgrid columns</title>
<link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dgrid/css/dgrid.css">
<style type="text/css">
body, html{
margin:0;
padding:0;
height:100%;
width:100%;
}
#grid{
border:0px;
width:100%;
height:100%;
}
</style>
<script src="http://jsdev.arcgis.com/3.7/"></script>
<script>
require([
"dojo/_base/declare",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dojo/ready",
"dojo/store/Memory",
"esri/layers/FeatureLayer",
"esri/tasks/query"
],
function(declare, OnDemandGrid, Keyboard, Selection, ready, Memory, FeatureLayer, Query){
ready(function () {
var dataStore;
var CustomGrid = declare([ OnDemandGrid, Keyboard, Selection ]);
var grid = new CustomGrid({
selectionMode: "single",
cellNavigation: false
}, "grid");
var featureLayerURL = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/usultras/FeatureServer/0";
var featureLayer = new FeatureLayer(featureLayerURL, {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
featureLayer.on("load", function() {
var featureArray = [];
var query = new Query();
query.where = "1 = 1";
featureLayer.queryFeatures(query).then(function(featureSet) {
console.log("query succeeded..", featureSet);
console.log("number of features:", featureSet.features.length);
for(var i=0; i<featureSet.features.length; i++){
//var featureID = featureSet.features.attributes[featureLayer.objectIdField];
var feature = featureSet.features.attributes;
featureArray.push(feature);
}
// Set Columns
grid.setColumns(getGridColumns(featureSet));
// If you use a store...
dataStore = new Memory ({"data": featureArray, "idProperty" : featureLayer.objectIdField});
grid.set("store", dataStore);
// If no store...
//grid.renderArray(featureArray);
grid.startup();
});
});
function getGridColumns(featureSet){
var columnsTemplate = [];
// Generate Dynamic Columns based on Feature Layer data
for(var i=0; i<featureSet.fields.length; i++){
var columnObj = {label: featureSet.fields.name, field: featureSet.fields.alias};
columnsTemplate.push(columnObj);
}
return columnsTemplate;
}
});
});
</script>
</head>
<body class="tundra">
<div id="grid"></div>
</body>
</html>
... View more
04-07-2014
11:47 AM
|
0
|
0
|
2166
|
|
POST
|
You're almost there. You need to do three more things: 1) Set up the columns 2) Set up the store 3) Connect the grid to the store. To set up the columns, use the SOC.fields object in your populateTable function. Since you've already created your data object, use that to populate the store. Make sure to set the idProperty on your store (MANY people forget). Connect the grid directly to the store (I don't use renderArray). function populateTable(SOC){
var data = [];
data = (SOC.features, function(feature){
return{
'SOC_Code': feature.attributes.SOC_Code
};
//rest of relevant output here
});
grid = new Grid({
renderRow:renderTable,
showHeader: false
}, "grid");
grid.set("columns", generateColumns(SOC.fields)); // Step 1
var memStore = new Memory({ data: data, idProperty: "unique_id_field_goes_here"}); // Step 2
grid.set("store", memStore); // Step 3
grid.startup();
}
function generateColumns(fields){
var columns = [];
fields.forEach (function (field){
var objects = {};
objects.label = field.alias;
objects.field = field.name;
objects.resizable = true;
columns.push(objects);
});
return columns;
} I like to use dgrid extensions so this is what your grid object may end up looking like:
var StandardGrid = declare([ Grid, DijitRegistry, Selection, ColumnHider, ColumnResizer, Pagination]);
var grid = new StandardGrid({
cellNavigation: false,
escapeHTMLInData: false,
noDataMessage: "",
loadingMessage: "",
selectionMode: "single",
query: complexQuery(),
pageSizeOptions: [100, 500, 1000],
rowsPerPage: 100,
sort:"name",
sortable: true,
columns: getColumns(),
store: new Memory({data: "", idProperty: "uID"})
}, "grid");
... View more
04-07-2014
09:31 AM
|
0
|
0
|
2166
|
|
POST
|
Interesting issue. What is the spatial reference of the Aerial basemap you are using? Also, could you recreate a sample of the issue using jsfiddle.net so I can take a look? Thanks!
... View more
04-07-2014
08:26 AM
|
0
|
0
|
2077
|
|
POST
|
Basically I have an event on an ASP.Net button in an Update Panel which retrieves x and y coordinates from a database. Then I am populating a hidden field with these coordinates and I have a JavaScript function which displays points according to the coordinates retrieved from the database and stored in the hidden field. My problem is how do I call this function after the hidden field is populated, with out refreshing the page. You should be able to set up a callback function for when you receive the x,y data from your database. In this callback, trigger the display function. Personally, I would use dojo/Deferred. http://dojotoolkit.org/documentation/tutorials/1.9/deferreds/
... View more
04-07-2014
08:19 AM
|
0
|
0
|
1631
|
|
POST
|
I updated your jsfiddle sample to work correctly. I tried to avoid removing code. http://jsfiddle.net/qxut9/3/
... View more
04-04-2014
11:56 AM
|
0
|
0
|
917
|
|
POST
|
I am seeing the behavior you describe. After refreshing several times, sometimes Cities appears higher than Breweries in the Layers menu. You are correct that they are added in the order that they load, because that's how your application is set up. By using the "layers-add-result" event, you are waiting until all the layers are successfully added to the map, in the order that they are loaded. This is not wrong, but may not be exactly what you want. If you want to guarantee the layers are added to the map in a specific order, you could use a deferred list to make sure all requests are resolved before adding the actual layers.
... View more
04-03-2014
10:05 AM
|
0
|
0
|
2499
|
|
POST
|
I managed to get your desired functionality working correctly but I had to strip some of your code out to simplify the sample.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Resize map problem</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/dgrid.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/skins/claro.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: false
};
</script>
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript">
// Globals
var map, resizeEvt, pathName = "http://gis.dhss.mo.gov";
// var fieldNames = [];
require([
"dojo/parser","dojox/mobile", "esri/sniff", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent", "esri/dijit/Popup",
"esri/dijit/InfoWindow", "dojo/dom", "dijit/registry", "dojo/on", "dojo/dom-construct", "dojo/query",
"esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer","esri/dijit/InfoWindow", "esri/InfoTemplate",
"esri/tasks/query", "esri/tasks/QueryTask", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic",
"esri/geometry/Circle", "esri/geometry/Geometry","esri/geometry/Point", "dojo/_base/declare","dojo/request", "dojo/promise/all", "dojo/store/Memory",
"esri/renderers/SimpleRenderer","dojo/_base/Color", "dojo/_base/array", "dijit/TooltipDialog","dijit/popup","esri/lang",
"dojo/dom-style", "dijit/form/Button", "dijit/form/FilteringSelect",
"dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider","dgrid/extensions/DijitRegistry","dgrid/extensions/ColumnResizer","dgrid/Selection",
"dijit/TitlePane", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/form/Form",
"dojo/domReady!"
], function(
parser, mobile, has, Map, esriConfig, SpatialReference, Extent, Popup,
InfoWindow, dom, registry, on, domConstruct,query,
FeatureLayer, ArcGISDynamicMapServiceLayer, InfoWindow, InfoTemplate,
Query, QueryTask, SimpleFillSymbol, SimpleLineSymbol, Graphic,
Circle, Geometry, Point, declare, request, all, Memory, SimpleRenderer, Color, arrayUtil, TooltipDialog,DijitPopup,esriLang,
domStyle, Button, FilteringSelect,
Grid, ColumnHider, DijitRegistry, ColumnResizer,Selection, TitlePane, ContentPane, BorderContainer, Form
){
parser.parse();
esriConfig.defaults.io.proxyUrl = "http://wwwgis.dhss.mo.gov/Website/proxy/proxy.ashx";
var spatialReference = new SpatialReference({ wkid: 102100});
var startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);
var highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 3), new Color([255, 255, 0, 0.1]))
var countyFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([94, 149, 193]), 2), new Color([203, 221, 235, 0.5]))
var popup = new Popup({ fillSymbol: highlightFillSymbol }, domConstruct.create("div"));
var dialog = new TooltipDialog({
id: "tooltipDialog",
style: "position: absolute; width: 90px; font: normal normal normal 10pt Helvetica;z-index:100"
});
dialog.startup();
map = new Map("mapDiv", {
center: [-92.593, 38.6],
zoom: 6,
basemap:"gray",
autoResize:false
});
var countyLayer = new FeatureLayer(pathName + "/ArcGIS/rest/services/county_simple/MapServer/0", {
id: "countyLayer"
});
var countyRenderer = new SimpleRenderer(countyFillSymbol);
countyLayer.setRenderer(countyRenderer);
map.addLayers([countyLayer]);
map.on("load", function(){
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
});
countyLayer.on("mouse-over", function(evt){
var t = "<b>${NAME}</b>";
var content = esriLang.substitute(evt.graphic.attributes,t);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightFillSymbol);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.85);
DijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
on(window, resizeEvt, function(){
// Only resize the map if the titlePane.open is true
if(dijit.byId("tp_map").open){ resizeMap(); }
});
// Show Event for the TitlePane
on(dijit.byId("tp_map"), "show", function(){
console.log('show');
resizeMap();
});
// Hide Event for the TitlePane
on(dijit.byId("tp_map"), "hide", function(){
console.log('hide');
closeDialog();
});
function closeDialog() {
map.graphics.clear();
DijitPopup.close(dialog);
}
function resizeMap() {
console.log('resize');
map.reposition();
map.resize();
}
});
</script>
</head>
<body class="claro">
<div id='mainWindow' data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="reportContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="tp_map" class="gridPane" data-dojo-type="dijit/TitlePane" data-dojo-props= "title:'Click a county to find information', open:true" >
<div id="mapDiv"> </div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
overflow:auto;
}
#mainWindow{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mapDiv{
width:100%;
height:100%;
padding:0;
margin:0;
}
.gridPane{
width:100% !important;
height:100% !important;
padding:0;
margin:0;
}
#banner {
height:auto;
margin: 0;
padding: 0;
}
#header{
background-image: url("../images/logo.jpg");
background-repeat: no-repeat;
background-color:#1E3A62; /*#dcd9c6;*/
color: white;
font-size:20pt; text-align: left;
font-weight:bold;
font-family:"Century Gothic";
height:100px;
margin: 0;
}
#subHeader {
font-size:16px;
background-color:#cbddeb;
font-weight: bold;
padding:0;
margin: 0;
}
.basicContainer{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
height:auto;
}
#countySelect {
z-index: 999;
}
#reportContainer {
height:100%;
}
/*
#tp_map{
height:auto;
}
*/
.esriPopup .title {
background-color:#CBDDEB;
color: #CBDDEB;
font-size:smaller;
height:5px;
}
.esriPopup .titlePane {
background-color:#CBDDEB;
line-height: 22px;
padding-left: 8px;
}
/*
.hidden {
visibility:hidden;
display:none;
}
.visible {
visibility:visible;
height:100%;
display:block;
}
*/
/*
.reportTitlePane{
color: white;
background-color: #76a2c5;
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
overflow: auto;
}
*/
/*used by the formatted grid*/
.claro .dijitTitlePaneTitle {
background: #d3e3ef;
border:solid 1px #29201A;
}
.claro .dijitTitlePaneContentInner {
padding: 1;
font-size: 12px;
overflow:auto;
}
.claro .dijitTitlePaneTextNode {
font-weight: bold;
font-size: 12px;
}
.dgrid {
position: relative;
overflow: auto;
/* This is needed by IE to prevent crazy scrollbar flashing */
border: 1px solid #dddddd;
/* height: 30em; */
display: block;
color:black;
}
.dgrid-grid {
/*
height: 200px;
*/
height: auto;
/*
width: auto;
*/
}
.dgrid-header {
font-weight: normal;
font-size:11px;
height: auto;
}
.dgrid-content {
position: relative;
margin-top: 16px;
width:inherit;
}
.dgrid .dgrid-cell {
min-width: 50px;
border-color: #dddddd;
}
.dgrid .dgrid-scroller {
max-height: 200px;
position: relative;
}
.dgrid .field-OBJECTID, .field-Shape.len {
min-width: 0px;
}
.title {
font-weight: bold;
font-size: medium;
padding-top: 11px;
}
.details {
padding: 2px;
font-size: medium;
}
h2, h3, h4 {
color: #000000;
}
#downloadForm {
height: 0px;
width: 0px;
display:none;
}
Compare the changes I've made and let me know if you have any questions.
... View more
04-03-2014
09:37 AM
|
0
|
0
|
917
|
|
POST
|
I would generally try to avoid changing TOC.js because I would have to manually add these changes to any future updates to the TOC itself. However, in this case, I think it would be easiest to modify TOC.js to fit your needs.
... View more
04-01-2014
12:51 PM
|
0
|
0
|
3072
|
|
POST
|
If the total size of your data is less than 5 MB, you can serialize the data and store it using the browser's local storage mechanism. However, if your data is greater than 5 MB and you lack an internet connection, this becomes much more complicated and you might want to look into using a native application, rather than a web application. If being a Javascript application is a requirement, and you need to store more data than local storage allows, you may want to look into a hybrid application using a framework like PhoneGap (http://phonegap.com/).
... View more
04-01-2014
12:44 PM
|
0
|
0
|
643
|
|
POST
|
Hi Josie. It's hard to troubleshoot without seeing the rest of your code. If you could create a working sample that shows off the issue using jsfiddle.net, I can take a look. Also, try to create a new thread if you have a specific question. People are less likely to respond when you post a question in a thread that is 2 years old.
... View more
04-01-2014
12:32 PM
|
0
|
0
|
2901
|
|
POST
|
Hi Heath! According to the documentation, routeTask.solve() returns a deferred. https://developers.arcgis.com/javascript/jsapi/routetask-amd.html Because of this, you can use .then() to trigger a callback function with the results from your solve. function solveRoute() { removeEventHandlers(); routeTask.solve(routeParams).then(function(results){ var totalDriveTime = results.routeResults[0].directions.totalDriveTime; var totalLength = results.routeResults[0].directions.totalLength; var totalTime = results.routeResults[0].directions.totalTime; alert("Distance : "+totalLength+" miles\nEstimated Time : "+totalDriveTime+" minutes"); }); //alert("Distance : 3 miles\nEstimated Time : 60 minutes"); } "results" is an object that represents the response of the solve request. This is where you will access your solve data. Notice how the alert is called inside the callback function. The "results" object has tons of information regarding the solve. Below is an example function that logs certain properties to the console. function solveRoute() { removeEventHandlers(); routeTask.solve(routeParams).then(function(results){ console.log("results", results); console.log("results.routeResults[0]", results.routeResults[0]); console.log("results.routeResults[0].route", results.routeResults[0].route); console.log("results.routeResults[0].directions", results.routeResults[0].directions); console.log("results.routeResults[0].directions.totalDriveTime", results.routeResults[0].directions.totalDriveTime); console.log("results.routeResults[0].directions.totalLength", results.routeResults[0].directions.totalLength); console.log("results.routeResults[0].directions.totalTime", results.routeResults[0].directions.totalTime); console.log("results.routeResults[0].directions.summary", results.routeResults[0].directions.summary); console.log("results.routeResults[0].directions.summary.envelope", results.routeResults[0].directions.summary.envelope); }); } Hope this helps. Let me know if you have any questions.
... View more
04-01-2014
12:28 PM
|
0
|
0
|
1821
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-26-2014 09:56 AM | |
| 1 | 09-18-2014 11:50 AM | |
| 1 | 09-19-2014 11:28 AM | |
| 1 | 07-09-2014 01:43 PM | |
| 1 | 07-09-2014 02:05 PM |
| Online Status |
Offline
|
| Date Last Visited |
08-14-2024
05:31 PM
|