I'm creating an interactive web application that allows the user to define a date range of events, then view drive times to their specific events.
I have the query working just fine, however, I cannot figure out how to only display the drive times for the event selected within the query. (There is a box 'Drive Time' for each query result)
Below is the code, please take a look at the " function showDriveTime(locationID) "
var fl; var today = new Date(); var sqlAll = "StartDate >= "+formatDate(today,"#MM/dd/yyyy 00:00:00#"); var weeks2 = new Date(); weeks2.setDate(today.getDate()+14); var sqlWeeks2 = "StartDate >= "+formatDate(today,"#MM/dd/yyyy 00:00:00#")+" AND StartDate <= "+formatDate(weeks2,"#MM/dd/yyyy 00:00:00#"); var weeks4 = new Date(); weeks4.setDate(today.getDate()+31); var sqlWeeks4 = "StartDate >= "+formatDate(today,"#MM/dd/yyyy 00:00:00#")+" AND StartDate <= "+formatDate(weeks4,"#MM/dd/yyyy 00:00:00#"); var months3 = new Date(); months3.setDate(today.getDate()+91); var sqlMonths3 = "StartDate >= "+formatDate(today,"#MM/dd/yyyy 00:00:00#")+" AND StartDate <= "+formatDate(months3,"#MM/dd/yyyy 00:00:00#"); var months6 = new Date(); months6.setDate(today.getDate()+180); var sqlMonths6 = "StartDate >="+formatDate(today,"#MM/dd/yyyy 00:00:00#")+" AND StartDate <="+formatDate(months6,"#MM/dd/yyyy 00:00:00#"); var layer1; // define global variables var query, queryTask, map, querySet, infoTemplate, symbol; var layer, map, visible = []; var dynamicMapServiceLayer; var DTlayer; function init() { //create map and add layer // initial extent var initExtent = new esri.geometry.Extent({"xmin":-10026637,"ymin":5150020,"xmax":-10024728,"ymax":5851042,"spatialReference": {"wkid":102100}}); map = new esri.Map("mapDiv",{extent:initExtent});
// add background base layer var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(basemap); // add event layer (and turn off drive time layer) var imageParameters = new esri.layers.ImageParameters(); imageParameters.layerIds = [1]; // turn on event layer //imageParameters.layerIds = [0,1]; // turn on both event and drive time layers imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW; //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE var layerDefs = []; //layerDefs[5] = "STATE_NAME='Kansas'"; //layerDefs[4] = "STATE_NAME='Kansas' and POP2007>25000"; layerDefs[0,2] = "EventID = -1"; imageParameters.layerDefinitions = layerDefs;
var content = "<b>Address:</b> ${Address1} ${City}, ${State} ${Zip}<br>" + "<b>Date:</b> ${StartDate}<br>"+ "<b>Fee:</b> $${Cost}<br>"+ "${Description}"; var infoTemplate = new esri.InfoTemplate("${EventName}", content); fl = new esri.layers.FeatureLayer("http://studentgisserver.uww.edu/ArcGIS/rest/services/Workforce3/MapServer/0",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["*"], infoTemplate: infoTemplate }); map.addLayers([fl]); //initialize query task queryTask = new esri.tasks.QueryTask("http://studentgisserver.uww.edu/ArcGIS/rest/services/Workforce3/MapServer/0"); //queryTask1 = new esri.tasks.QueryTask("http://studentgisserver.uww.edu/ArcGIS/rest/services/Workforce3/MapServer/1"); //initialize query query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["Address1","City","State","Zip","Cost","URL","EventID","LocationID","EventName","Description"]; infoTemplate: infoTemplate;
//create symbol for selected features symbol = new esri.symbol.SimpleMarkerSymbol(); symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND); symbol.setSize(16); symbol.setColor(new dojo.Color([200,150,75,0.7])); }
queryTask.execute(query,function(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); // anything found? if (featureSet.features.length != 0) { var i = featureSet.features.length; // records found //alert(i + " records found. Displaying."); showResults(featureSet); infoTemplate: infoTemplate; } else { // no records found //alert("No records found"); } }); }
function showResults(featureSet) { //get number of records in set var il = featureSet.features.length; //alert("number of results: " + il);
var features = featureSet.features;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map. strHTML = ""; i = 0; dojo.forEach(features,function(feature){ var graphic = feature; graphic.setSymbol(symbol);
//Set the infoTemplate. graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer. map.graphics.add(graphic); //Add entry to query result list -- built from table attributes attributes = graphic.attributes; address = attributes["Address1"] + ", " + attributes["City"] + " " + attributes["State"] + " " + attributes["Zip"]; strHTML = strHTML + "<b>Name:</b> " + attributes["EventName"] + "<br />"; strHTML = strHTML + "<b>Address:</b> " + address + "<br />"; strHTML = strHTML + "<b>Cost:</b> $" + attributes["Cost"] + "<br />"; strHTML = strHTML + "<b>Web:</b> " + "<a href='" + attributes["URL"] + "' class='info'>" + attributes["URL"] + "</a><br />"; strHTML = strHTML + "<b>Information:</b> " + attributes["Description"] + "<br />"; strHTML = strHTML + "<input type='button' class='btn' onclick='zoomTo("+i+")' value='Zoom to' /> "; strHTML = strHTML + "<input type='button' class='btn' onclick='showDriveTime()' value='Drive times' /> "; strHTML = strHTML + "<input type='button' class='btn' onclick='directions(\""+address+"\")' value='Directions' /><br /><br />"; strHTML = strHTML + "<br/>"; //increment value i = i + 1; }); //Add query result to div //alert("adding results to div, strHTML = " + strHTML); dojo.byId("results").innerHTML = strHTML; } function directions(address) { // open window to google maps with selected location as destination address url = "http://maps.google.com/maps?daddr="+address; window.location = url; }
function showDriveTime(locationID) { alert("Ran DT"); console.log("running drive time code"); var sqlWhere1 = "LocationID = " + locationID; var layerDefinitions = [1]; layerDefinitions[1] = sqlWhere1; map.addLayer(dynamicMapServiceLayer); }
function zoomTo(featureNum) { // zoom to the feature that the user has selected // distance around point to buffer new extent var factor = 2000; // get feature user clicked on graphic = querySet.features[featureNum]; // get feature geometry and define new extent pt = graphic.geometry; var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.SpatialReference); // set new extent map.setExtent(extent.expand(2)); }
function changeMap(range) { //alert("range = "+range); switch(range) { case "sqlAll": executeQueryTask(sqlAll); case "sqlWeeks2": executeQueryTask(sqlWeeks2); break; case "sqlWeeks4": executeQueryTask(sqlWeeks4); break; case "sqlMonths3": executeQueryTask(sqlMonths3); break; case "sqlMonths6": executeQueryTask(sqlMonths6); break; } }
function changeMap1(range) { alert("range"); switch(range) { case "PrairieDT": alert("ran it"); executeQueryTask(PrairieDT); break; } } /* function updateLayerVisibility() { var inputs = dojo.query(".list_item"), input; //in this application layer 2 is always on.
visible = [1]; for (var i=0, il=inputs.length; i<il; i++) { if (inputs.checked) { visible.push(inputs.id); } } //if there aren't any layers visible set the array value to = -1 if(visible.length === 1){ visible.push(0);