Aman_vbulletin3_import28283
New Member
A friend and I are building a network analyst(NA) page and he worked the NA piece and I constructed our page with the appropriate widgets etc. When we tried to marry the two however the NA worked but would not provide directions, we lost the ability to turn layers on and off in the legend (may be a dynamic layer versus feature layer issue) and our scale bar disappeared. The code individually works but together it seems to have gone sideways. I cannot seem to see the issue, does anyone else?\[code\] <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"><!--The viewport meta tag is used to improve the presentation and behavior Apple devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>D&G Enterprises</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/layout/resources/FloatingPane.css"><link rel="stylesheet" href="http://www.mas-gis.info/mgriffi1/dglayout.css"><style> <!--//i have a css which is refrenced at http://www.mas-gis.info/mgriffi1/dglayout.css and updated through an FTP--> </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> <!--Below is where the widgets are brought in to allow for various containers and functions--><script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("esri.map"); dojo.require("esri.dijit.Legend"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.arcgis.utils"); dojo.require("dijit.form.CheckBox"); dojo.require("esri.dijit.Scalebar"); dojo.require("esri.dijit.Popup"); dojo.require("esri.tasks.closestfacility"); dojo.require("esri.dijit.Gauge"); dojo.require("esri.dijit.OverviewMap"); dojo.require("dijit.dijit"); dojo.require("dijit.form.ComboBox"); var map, legendLayers = [], incidentsGraphicsLayer, routeGraphicLayer; var closestFacilityTask, params; function init() { map = new esri.Map("map", { basemap: "topo", center: [-85.271244, 36.415895], zoom: 11, showInfoWindowOnClick:false }); var scalebar = new esri.dijit.Scalebar({ map:map, attachTo:"bottom-left"}); var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/FireStations/MapServer",{id:'fire'}); legendLayers.push({layer:fireLayer,title:"Fire Departments"}); var policeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Police/MapServer",{id:'police'}); legendLayers.push({layer
oliceLayer,title:'Police Stations'}) var hospitalsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Hospitals/MapServer",{id:'hospitals'}); legendLayers.push({layer:hospitalsLayer,title:'Hospitals'}); var emsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Ambulance/MapServer",{id:'ems'}); legendLayers.push({layer:emsLayer,title:'EMS Services'}); var drugstoreLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/DrugStores/MapServer",{id:'drugstore'}); legendLayers.push({layer:drugstoreLayer,title:'Drugstores'}); /*var wellsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Wells/MapServer",{id:'wells'}); legendLayers.push({layer:wellsLayer,title:'Well Locations'});*/ var countiesLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Counties/MapServer",{id:'counties'}); legendLayers.push({layer:countiesLayer,title:'Counties'}); dojo.connect(map,'onLayersAddResult',function(results){ var legend = new esri.dijit.Legend({ map:map, layerInfos:legendLayers },"legendDiv"); legend.startup(); }); dojo.connect(map,'onLayersAddResult',function(results){ //add check boxes dojo.forEach(legendLayers,function(layer){ var layerName = layer.title; var checkBox = new dijit.form.CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function(evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //check box labels dojo.place(checkBox.domNode,dojo.byId("toggle"),"after"); var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after"); dojo.place("<br />",checkLabel,"after"); }); }); } //Declare map, incident graphics, route graphics and closest facility and paramsvar map, incidentsGraphicsLayer, routeGraphicLayer;var closestFacilityTask, params;//Call basemapfunction init() { map = new esri.Map("map", { basemap: "streets", center: [-85.25, 36.4], zoom: 10, showInfoWindowOnClick:false }); //MapClickHandler for CF params dojo.connect(map, "onClick", mapClickHandler); params = new esri.tasks.ClosestFacilityParameters(); params.returnIncidents=false; params.returnRoutes=true; params.returnDirections=true;//Onload call map from above dojo.connect(map, "onLoad", function(map) {//Declare incident point symbol. I colored red and changed to cross to be more specific var incidentPointSymbol = new esri.symbol.SimpleMarkerSymbol( esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 18, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("red"), 2 ), new dojo.Color("black") ); //Create the incident graphics layer and simple renderer incidentsGraphicsLayer = new esri.layers.GraphicsLayer(); var incidentsRenderer = new esri.renderer.SimpleRenderer(incidentPointSymbol); incidentsGraphicsLayer.setRenderer(incidentsRenderer);//Add the incident graphic layer to the map map.addLayer(incidentsGraphicsLayer);//Create the same here for the route graphic layer routeGraphicLayer = new esri.layers.GraphicsLayer(); var routePolylineSymbol = new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("red"), 4.0 ); var routeRenderer = new esri.renderer.SimpleRenderer(routePolylineSymbol); routeGraphicLayer.setRenderer(routeRenderer);//Add the route graphics layer to map map.addLayer(routeGraphicLayer);//Adding the layers firestations, counties, and state var fireStations = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/FireStations/MapServer/0"); var counties = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Counties/MapServer/0"); var drugStores = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/DrugStores/MapServer/0"); var hospitals = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Hospitals/MapServer/0"); var police = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Police/MapServer/0"); var ambulance = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Ambulance/MapServer/0"); //Mark, I took the Legened addresult code and addeed here, this loaded the legend //We still have an issue with the toggles being linked to Dynamic Layers though and them not being read dojo.connect(map,'onLayersAddResult',function(results){ var layerInfo = dojo.map(results, function(layer,index){ return {layer:layer.layer,title:layer.layer.name}; }); if(layerInfo.length > 0){ var legendDijit = new esri.dijit.Legend({ map:map, layerInfos:layerInfo },"legendDiv"); legendDijit.startup(); } }); //load layers into map (this is temporary and will slow down app//I will move these calls to a selector combo box etc... soon, but this //helps to test the layers and routing for now map.addLayers([counties,fireStations,drugStores,hospitals,police,ambulance]);//Set the facilities to a new feature layer from new feature set//Note, you can chsnge the facilities.features layer to any of the layers above//to see if the routing is working var facilities = new esri.tasks.FeatureSet(); facilities.features = fireStations.graphics;//Global parameters pointing facilities to "facilities" feature layers above params.facilities = facilities; params.outSpatialReference = map.spatialReference;});//Ok, set up the CF layer here to become active closestFacilityTask = new esri.tasks.ClosestFacilityTask("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/SF_NA9/NAServer/Closest%20Facility");}//This function is used to clear all of the graphics displayed belowfunction clearGraphics() { //clear graphics dojo.byId("directionsDiv").innerHTML= ""; map.graphics.clear(); routeGraphicLayer.clear(); incidentsGraphicsLayer.clear(); } //mapClickHandler initializes new incident point geometry as location and clears the //inner html of the directionsDiv for the new pointfunction mapClickHandler(evt) { clearGraphics(); dojo.byId("directionsDiv").innerHTML= ""; var inPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,map.spatialReference); var location = new esri.Graphic(inPoint); incidentsGraphicsLayer.add(location);//Push Incident point geometry into map var features = []; features.push(location); var incidents = new esri.tasks.FeatureSet(); incidents.features = features; params.incidents = incidents;//setting features to receive mouseover for highlight of route map.graphics.enableMouseEvents();//connecting route graphic to mouseover event dojo.connect(routeGraphicLayer,"onMouseOver", function(evt){//clear existing directions and highlight symbol map.graphics.clear();//Displays prescribed text in the inner html of the directionsDiv dojo.byId("directionsDiv").innerHTML= "Hover over the route to view directions";//Declare highlight symbol and graphic var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255],0.25), 4.5); var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);//Add highlight to map and route map.graphics.add(highlightGraphic); dojo.byId("directionsDiv").innerHTML = esri.substitute(evt.graphic.attributes,"${*}"); });//solve, I am trying to pull the time attribute here for drive time: stuck closestFacilityTask.solve(params,function(solveResult){ var time = closestFacilityTask.directionsTimeAttribute; var directions = solveResult.directions; dojo.forEach(solveResult.routes, function(route, index){//build an array of route info var attr = dojo.map(solveResult.directions[index].features,function(feature){ return feature.attributes.text; }); var infoTemplate = new esri.InfoTemplate("Attributes"+"Minutes", "${*}"); //Set up info template for routes and assign attributes route.setInfoTemplate(infoTemplate); route.setAttributes(attr);//Add the route graphic to the map and prescribed inner html for directionsDiv routeGraphicLayer.add(route); dojo.byId("directionsDiv").innerHTML = "Hover over the route to view directions"; });//display any messages: Scans for solve result messages and handles errors if(solveResult.messages.length > 0){ dojo.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0]; } });} //Call init here dojo.ready(init);</script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false"> Site Finder <div id="subheader">Helping Emergency Services Locate Remote Incidents</div> </div> <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"> <div data-dojo-type="dijit.layout.AccordionContainer"> <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true"> <div id="legendDiv"></div> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers'" > <span style="padding:10px 0;">Click to toggle the layers.</span> <div id="toggle" style="padding: 2px 2px;"></div> </div> </div> </div> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> </div> <div id="directions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" class="panel"> <b>Click the map to find routes for the <select name="numLocations" data-dojo-type="dijit.form.ComboBox" value="http://stackoverflow.com/questions/15605510/1" onChange="params.defaultTargetFacilityCount=this.value;clearGraphics();" style="width:60px;"> <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> closest facilities to the input point.</b> <div id="directionsDiv"></div> </div> </body> </html>\[/code\]
oliceLayer,title:'Police Stations'}) var hospitalsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Hospitals/MapServer",{id:'hospitals'}); legendLayers.push({layer:hospitalsLayer,title:'Hospitals'}); var emsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Ambulance/MapServer",{id:'ems'}); legendLayers.push({layer:emsLayer,title:'EMS Services'}); var drugstoreLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/DrugStores/MapServer",{id:'drugstore'}); legendLayers.push({layer:drugstoreLayer,title:'Drugstores'}); /*var wellsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Wells/MapServer",{id:'wells'}); legendLayers.push({layer:wellsLayer,title:'Well Locations'});*/ var countiesLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Counties/MapServer",{id:'counties'}); legendLayers.push({layer:countiesLayer,title:'Counties'}); dojo.connect(map,'onLayersAddResult',function(results){ var legend = new esri.dijit.Legend({ map:map, layerInfos:legendLayers },"legendDiv"); legend.startup(); }); dojo.connect(map,'onLayersAddResult',function(results){ //add check boxes dojo.forEach(legendLayers,function(layer){ var layerName = layer.title; var checkBox = new dijit.form.CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function(evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //check box labels dojo.place(checkBox.domNode,dojo.byId("toggle"),"after"); var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after"); dojo.place("<br />",checkLabel,"after"); }); }); } //Declare map, incident graphics, route graphics and closest facility and paramsvar map, incidentsGraphicsLayer, routeGraphicLayer;var closestFacilityTask, params;//Call basemapfunction init() { map = new esri.Map("map", { basemap: "streets", center: [-85.25, 36.4], zoom: 10, showInfoWindowOnClick:false }); //MapClickHandler for CF params dojo.connect(map, "onClick", mapClickHandler); params = new esri.tasks.ClosestFacilityParameters(); params.returnIncidents=false; params.returnRoutes=true; params.returnDirections=true;//Onload call map from above dojo.connect(map, "onLoad", function(map) {//Declare incident point symbol. I colored red and changed to cross to be more specific var incidentPointSymbol = new esri.symbol.SimpleMarkerSymbol( esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 18, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("red"), 2 ), new dojo.Color("black") ); //Create the incident graphics layer and simple renderer incidentsGraphicsLayer = new esri.layers.GraphicsLayer(); var incidentsRenderer = new esri.renderer.SimpleRenderer(incidentPointSymbol); incidentsGraphicsLayer.setRenderer(incidentsRenderer);//Add the incident graphic layer to the map map.addLayer(incidentsGraphicsLayer);//Create the same here for the route graphic layer routeGraphicLayer = new esri.layers.GraphicsLayer(); var routePolylineSymbol = new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("red"), 4.0 ); var routeRenderer = new esri.renderer.SimpleRenderer(routePolylineSymbol); routeGraphicLayer.setRenderer(routeRenderer);//Add the route graphics layer to map map.addLayer(routeGraphicLayer);//Adding the layers firestations, counties, and state var fireStations = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/FireStations/MapServer/0"); var counties = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/TN_Counties/MapServer/0"); var drugStores = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/DrugStores/MapServer/0"); var hospitals = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Hospitals/MapServer/0"); var police = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Police/MapServer/0"); var ambulance = new esri.layers.FeatureLayer("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/Ambulance/MapServer/0"); //Mark, I took the Legened addresult code and addeed here, this loaded the legend //We still have an issue with the toggles being linked to Dynamic Layers though and them not being read dojo.connect(map,'onLayersAddResult',function(results){ var layerInfo = dojo.map(results, function(layer,index){ return {layer:layer.layer,title:layer.layer.name}; }); if(layerInfo.length > 0){ var legendDijit = new esri.dijit.Legend({ map:map, layerInfos:layerInfo },"legendDiv"); legendDijit.startup(); } }); //load layers into map (this is temporary and will slow down app//I will move these calls to a selector combo box etc... soon, but this //helps to test the layers and routing for now map.addLayers([counties,fireStations,drugStores,hospitals,police,ambulance]);//Set the facilities to a new feature layer from new feature set//Note, you can chsnge the facilities.features layer to any of the layers above//to see if the routing is working var facilities = new esri.tasks.FeatureSet(); facilities.features = fireStations.graphics;//Global parameters pointing facilities to "facilities" feature layers above params.facilities = facilities; params.outSpatialReference = map.spatialReference;});//Ok, set up the CF layer here to become active closestFacilityTask = new esri.tasks.ClosestFacilityTask("http://masgis2.asu.edu:6080/arcgis/rest/services/DGEnterprises/SF_NA9/NAServer/Closest%20Facility");}//This function is used to clear all of the graphics displayed belowfunction clearGraphics() { //clear graphics dojo.byId("directionsDiv").innerHTML= ""; map.graphics.clear(); routeGraphicLayer.clear(); incidentsGraphicsLayer.clear(); } //mapClickHandler initializes new incident point geometry as location and clears the //inner html of the directionsDiv for the new pointfunction mapClickHandler(evt) { clearGraphics(); dojo.byId("directionsDiv").innerHTML= ""; var inPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,map.spatialReference); var location = new esri.Graphic(inPoint); incidentsGraphicsLayer.add(location);//Push Incident point geometry into map var features = []; features.push(location); var incidents = new esri.tasks.FeatureSet(); incidents.features = features; params.incidents = incidents;//setting features to receive mouseover for highlight of route map.graphics.enableMouseEvents();//connecting route graphic to mouseover event dojo.connect(routeGraphicLayer,"onMouseOver", function(evt){//clear existing directions and highlight symbol map.graphics.clear();//Displays prescribed text in the inner html of the directionsDiv dojo.byId("directionsDiv").innerHTML= "Hover over the route to view directions";//Declare highlight symbol and graphic var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255],0.25), 4.5); var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);//Add highlight to map and route map.graphics.add(highlightGraphic); dojo.byId("directionsDiv").innerHTML = esri.substitute(evt.graphic.attributes,"${*}"); });//solve, I am trying to pull the time attribute here for drive time: stuck closestFacilityTask.solve(params,function(solveResult){ var time = closestFacilityTask.directionsTimeAttribute; var directions = solveResult.directions; dojo.forEach(solveResult.routes, function(route, index){//build an array of route info var attr = dojo.map(solveResult.directions[index].features,function(feature){ return feature.attributes.text; }); var infoTemplate = new esri.InfoTemplate("Attributes"+"Minutes", "${*}"); //Set up info template for routes and assign attributes route.setInfoTemplate(infoTemplate); route.setAttributes(attr);//Add the route graphic to the map and prescribed inner html for directionsDiv routeGraphicLayer.add(route); dojo.byId("directionsDiv").innerHTML = "Hover over the route to view directions"; });//display any messages: Scans for solve result messages and handles errors if(solveResult.messages.length > 0){ dojo.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0]; } });} //Call init here dojo.ready(init);</script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false"> Site Finder <div id="subheader">Helping Emergency Services Locate Remote Incidents</div> </div> <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"> <div data-dojo-type="dijit.layout.AccordionContainer"> <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true"> <div id="legendDiv"></div> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers'" > <span style="padding:10px 0;">Click to toggle the layers.</span> <div id="toggle" style="padding: 2px 2px;"></div> </div> </div> </div> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> </div> <div id="directions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" class="panel"> <b>Click the map to find routes for the <select name="numLocations" data-dojo-type="dijit.form.ComboBox" value="http://stackoverflow.com/questions/15605510/1" onChange="params.defaultTargetFacilityCount=this.value;clearGraphics();" style="width:60px;"> <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> closest facilities to the input point.</b> <div id="directionsDiv"></div> </div> </body> </html>\[/code\]