Tom:
See my code below:
<%@ Page Title="" Language="C#" AutoEventWireup="true" Inherits="SOEApp" Codebehind="SOEApp.aspx.cs" %>
<!DOCTYPE html>
<%--http://stackoverflow.com/questions/10489977/validation-xhtml-1-0-transitional-element-html-cannot-be...>
<html>
<%-- <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">--%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<%--06/30/2015 Add IE=edge--%>
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=edge" />
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Untitled Document</title>
<script type="text/javascript">
// var djConfig = { parseOnLoad: true };
// reference: http://dojotoolkit.org/reference-guide/1.9/loader/amd.html
// var djConfig = {
// parseOnLoad: true,
// baseUrl: './',
// modulePaths: {
// // if use local copy, make sure the path reference is relative to 'baseUrl', e.g.: 'agsjs': '../build/agsjs'
// 'agsjs': 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.04/build/agsjs'
// }
// };
var djConfig = {
parseOnLoad: true,
packages: [{
"name": "agsjs",
//"location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
}]
};
</script>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://js.arcgis.com/3.13/" type="text/javascript"></script>
<%--Add by ?parameter=1 by refeering http://forums.asp.net/t/1586914.aspx--%>
<%-- <link href="../Scripts/dojo/arcgis3.8_dojo_dijit_claro.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css?parameter=1">--%>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css?parameter=1">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css?parameter=1">
<%-- <script src="../Scripts/j3.7.js" type="text/javascript"></script>--%>
<%-- <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7" type="text/javascript"></script>--%>
<%-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://trainingcloud.arcgis.com/BAAJ/styles/css/BAAJ_Clean.css" />--%>
<style>
html, body { height: 98%;
width: 98%;
margin: 0;
padding: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 90%; }
#header {
color: Purple;
height: 60px;
width: 660px;
overflow-y: hidden;
background: #fff url("../Images/MetroBackgound.png" ); /*no-repeat top right; */
} /* url("http://i246.photobucket.com/albums/gg113/comicrazee/ICCHeader1.gif") no-repeat top right; */
#rightPane { width:16%; background-color:white; font-color:black; }
#rightPane { width: 300px; overflow: auto; }
/* this line hide layers when out of scale for the inline TOC */
#scaleDiv .agsTOCOutOfScale { display: none; }
#footer { background-color:Silver; }
#tocPane, #segmentPane, #pointPane {
font-size:small;
}
</style>
<!-- Requires and Functions -->
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("esri.map");
dojo.require("esri.layers.GraphicsLayer");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.TitlePane");
dojo.require("esri.tasks.query");
dojo.require("dojo.data.ItemFileReadStore");
// dojo.require("esri/symbols/SimpleMarkerSymbol");
// dojo.require("esri/symbols/SimpleLineSymbol");
// dojo.require("dijit.layout.AccordionContainer"); // For TOC
dojo.require("agsjs.dijit.TOC"); // For TOC
// Adding the 2 below causes problem in API V2.x
dojo.require("dojo.dom");
dojo.require("dojo.domReady!");
////debugger;
var map;
var serverURL0 = '<%=ConfigurationManager.AppSettings["serverURL"].ToString() %>';
var serverURL = serverURL0 + '<%=ConfigurationManager.AppSettings["RailLRSDef"].ToString() %>';
var serverAnno = '<%=ConfigurationManager.AppSettings["RailAnno"].ToString() %>';
var gLayer;
//var featureLayer;
var initialExtent = new esri.geometry.Extent({
xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 102100 }
});
var queryTask;
var queryParams;
var querySymbol;
function init() {
map = new esri.Map("map", { extent: initialExtent, zoom: 9 });
var streetURL = '<%=ConfigurationManager.AppSettings["baseMapStreetURL"].ToString() %>';
var basemap = new esri.layers.ArcGISDynamicMapServiceLayer(streetURL, { id: 'basemap', opacity: 0.7 });
// var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer(serverURL + "/0", { "opacity": 0.5 } );
gLayer = new esri.layers.GraphicsLayer();
gLayer.id = "gLayer";
//createBasemapGallery();
// Disable submit Button initially
////debugger;
document.getElementById("submitButton").disabled = true;
document.getElementById("submitButton2").disabled = true;
var operational2 = new esri.layers.ArcGISDynamicMapServiceLayer(serverAnno, { id: 'operational2', opacity: 0.8 });
var operational = new esri.layers.ArcGISDynamicMapServiceLayer(serverURL, { id: 'operational', opacity: 0.8 });
//map.addLayer(operational2, operational, basemap, operational);
// TOC - http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/examples/toc.html
dojo.connect(map, 'onLayersAddResult', function (results) {
// var standardTOC = new agsjs.dijit.TOC({
// map: map
// }, 'standardDiv');
// standardTOC.startup();
// var inlineTOC = new agsjs.dijit.TOC({
// map: map,
// style: 'inline'
// }, 'inlineDiv');
// inlineTOC.startup();
var sliderTOC = new agsjs.dijit.TOC({
map: map,
layerInfos: [{
layer: operational,
title: "LRS Rails",
collapsed: true,
//noLayers: true,
slider: true
}, {
layer: operational2,
title: "LRS Annotation",
collapsed: true
//noLayers: true // used in V2.x
//slider: true
}, {
layer: basemap,
title: "BaseMap",
noLayers: true,
slider: true
}], style: 'inline'
}, 'sliderDiv');
sliderTOC.startup();
// var scaleTOC = new agsjs.dijit.TOC({
// map: map,
// layerInfos: [{
// layer: operational,
// title: "Operational Layers",
// showGroupCount: true
// }]
// }, 'scaleDiv');
// scaleTOC.startup();
});
map.addLayers([operational2]);
map.addLayers([operational]);
map.addLayers([basemap]);
//resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
//the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
var resizeTimer;
// dojo.connect(map, 'onLoad', function (theMap) {
dojo.map.on('onLoad', function (theMap) {
// dojo.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
dojo.map.on('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 500);
});
});
}
function drawPoint() {
var e = document.getElementById('DropDownRouteID2');
var routeById2 = e.options[e.selectedIndex].text;
var m = document.getElementById('measurePoint').value;
var soePoint = '<%=ConfigurationManager.AppSettings["SOEPoint"].ToString() %>';
var myURL = serverURL + soePoint + routeById2 + '&Chainmarker=' + m + '&f=pjson';
$.support.cors = true;
$.ajax({
type: 'Get',
url: myURL,
dataType: 'json',
callbackParamName: 'callback',
crossDomain: true,
success: function (response) {
//debugger;
drawResponseGeometries2(response);
},
error: function (xhr, status, error) {
////debugger;
console.log(error);
}
});
}
function drawResponseGeometries2(response) {
////debugger;
map.graphics.clear(); // clear graphicsLayer if exists
var pointJson = response.Geometry[0];
var point = new esri.geometry.Point(pointJson);
var symbol = new esri.symbol.SimpleMarkerSymbol({
"color": [255, 0, 0, 128],
"size": 10,
"angle": -30,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSLSSolid",
"outline": {
"color": [0, 0, 0, 255],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
});
// var symbol = new esri.symbol.SimpleMarkerSymbol (
// esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15,
// new esri.symbol.SimpleLineSymbol(
// new esri.symbol.SimpleLineSymbol.STYLE_SOLID,
// new Color([0, 0, 255, 0.5]), 8 ),
// new Color([0, 0, 255])
// );
var g = new esri.Graphic(point, symbol);
map.graphics.add(g);
map.setExtent(initialExtent.expand(0.5)); // 0.125 or 0.25
map.centerAt(point);
// map.centerAndZoom(point.geometry, 14); //map.centerAndZoom(point, 20);
}
function toggleMeasure2() {
////debugger;
var m = parseFloat(document.getElementById('measurePoint').value);
var mMin = parseFloat(document.getElementById('LabelMinValue2').innerText);
var mMax = parseFloat(document.getElementById('LabelMaxValue2').innerText);
if (mMin <= m && m <= mMax) {
document.getElementById('submitButton2').disabled = false;
} else if (mMin > m || mMax < m) {
document.getElementById('measurePoint').value = '';
document.getElementById('submitButton2').disabled = true;
} else { }
}
function drawLine() {
//alert("You entered: " + dojo.byId("findText").value);
var e = document.getElementById('DropDownRouteID');
var routeById = e.options[e.selectedIndex].text;
var mA = document.getElementById('MeasureA').value;
var mB = document.getElementById('MeasureB').value;
////debugger;
var soeSegment = '<%=ConfigurationManager.AppSettings["SOESegment"].ToString() %>';
var myURL = serverURL + soeSegment + routeById + '&Chainmarker_Start=' + mA + '&Chainmarker_End=' + mB + '&f=json';
$.support.cors = true;
// http://www.codemonkeez.com/2011/12/ie9-cross-sitedomain-scripting-with.html
// for jQuery V1.9 or after, error on .browser. To use .browser, have to use V 1.8- http://stackoverflow.com/questions/14524289/browser-is-undefined-error*/
/*
if (jQuery.browser.msie && window.XDomainRequest) {
//debugger;
var xdr = new XDomainRequest();
xdr.onload = function () {
callback(xdr);
};
xdr.onerror = error;
xdr.open('Get', myURL);
xdr.send(data);
} else {
//debugger;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
callback(xmlHttp);
};
xmlHttp.open('Get', url, true);
xmlHttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');
xmlHttp.send(data);
return xmlHttp;
}
*/
$.ajax({
type: 'Get',
url: myURL,
dataType: 'json',
callbackParamName: 'callback',
crossDomain: true,
success: function (response) {
////debugger;
drawResponseGeometries(response);
},
error: function (xhr, status, error) {
////debugger;
console.log(error);
}
});
////debugger;
document.getElementById('submitButton').disabled = true;
}
function clear() {
map.graphics.clear();
document.getElementById('MeasureA').value = '';
document.getElementById('MeasureB').value = '';
document.getElementById('submitButton').disabled = true;
document.getElementById('measurePoint').value = '';
document.getElementById('submitButton2').disabled = true;
document.getElementById('Checkbox1').checked = false;
document.getElementById('Checkbox2').checked = false;
document.forms[0].elements["DropDownRouteID"].selectedIndex = 0;
document.forms[0].elements["DropDownRouteID2"].selectedIndex = 0;
if (gLayer != "undefined" && gLayer.graphics.length != 0) {
for (var i = gLayer.graphics.length - 1; i > -1; i--) {
gLayer.remove(gLayer.graphics);
}
}
map.setExtent(initialExtent);
}
// This draws the SOE response points on the map
function drawResponseGeometries(response) {
map.graphics.clear(); // clear graphicsLayer if exists
var polylineJson = response.Geometry[0];
var polyline = new esri.geometry.Polyline(polylineJson);
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 3); // Red
var g = new esri.Graphic(polyline, symbol, null, null);
map.graphics.add(g);
map.setExtent(g.geometry.getExtent().expand(4));
}
function toggleMeasures() {
var mA = parseFloat(document.getElementById('MeasureA').value);
var mB = parseFloat(document.getElementById('MeasureB').value);
var mMin = parseFloat(document.getElementById('LabelMinValue').innerText);
var mMax = parseFloat(document.getElementById('LabelMaxValue').innerText);
if (mA < mB && mMin <= mA && mB <= mMax) {
document.getElementById('submitButton').disabled = false;
} else if (mMin > mA) {
document.getElementById('MeasureA').value = '';
document.getElementById('MeasureA').focus(); // Not working
} else if (mMax < mB) {
document.getElementById('MeasureB').value = '';
document.getElementById('MeasureB').focus(); // Not working
} else {
////debugger;
if (mB > mA) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
}
function MeasureA_onkeyPress(evt) {
// //debugger;
map.graphics.clear();
document.getElementById('measurePoint').value = '';
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 13) {
document.getElementById('MeasureB').focus();
toggleMeasures();
} else if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
else {
return true;
}
}
function MeasureB_onkeyPress(evt) {
// //debugger;
map.graphics.clear();
document.getElementById('measurePoint').value = '';
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 13) {
toggleMeasures();
} else if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
else {
return true;
}
}
function measurePoint_onkeyPress(evt) {
// //debugger;
map.graphics.clear();
document.getElementById('MeasureA').value = '';
document.getElementById('MeasureB').value = '';
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 13) {
toggleMeasure2();
} else if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
else {
return true;
}
}
// //http://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values
// function isNumberKey2(charCode) {
// //debugger;
// if (charCode > 31 && (charCode < 48 || charCode > 57))
// return false;
// return true;
// }
function isNumberKey(evt) {
////debugger;
map.graphics.clear();
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
// function createBasemapGallery() {
// var basemapGallery = new esri.dijit.BasemapGallery({ map: map, showArcGISBasemaps: true }, "basemapGallery");
// basemapGallery.startup();
// }
function chkBoxEvt(cb) {
////debugger;
var s;
var gLayer = new esri.layers.GraphicsLayer();
if (cb.id == "Checkbox1") {
s = 'DropDownRouteID';
document.getElementById('Checkbox2').value = "off";
document.forms[0].elements["Checkbox2"].checked = false;
document.forms[0].elements["DropDownRouteID2"].selectedIndex = 0;
} else {
s = 'DropDownRouteID2';
document.getElementById('Checkbox1').value = "off";
document.forms[0].elements["Checkbox1"].checked = false;
document.forms[0].elements["DropDownRouteID"].selectedIndex = 0;
}
var routeID = document.getElementById(s).value;
if (cb.checked) {
if (typeof (gLayer) != "undefined") { // && gLayer.graphics.length != 0) {
gLayer.setVisibility(true);
// } else {
doQuery(routeID);
}
} else {
////debugger;
gLayer.setVisibility(false);
}
}
function doQuery(route) {
queryTask = new esri.tasks.QueryTask(serverURL + "/0");
queryParams = new esri.tasks.Query();
queryParams.returnGeometry = true;
queryParams.outSpatialReference = map.spatialReference;
querySymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,
new dojo.Color([255, 130, 100]), 3);
//new esri.symbol.SimpleLineSymbol();
//querySymbol.setColor(new dojo.Color([255, 255, 0, 0.5]));
queryParams.where = "TRACKNAME LIKE '" + route + "'";
queryTask.execute(queryParams, showResults);
////debugger;
}
function showResults(featureSet) {
////debugger;
gLayer = new esri.layers.GraphicsLayer();
gLayer.id = "gLayer";
var queryFeatures = featureSet.features;
for (var i = 0; i < queryFeatures.length; i++) {
queryFeatures.setSymbol(querySymbol);
gLayer.add(queryFeatures);
//map.graphics.add(queryFeatures);
}
map.addLayers([gLayer]);
}
function CleanMeasureInputs() {
//debugger;
document.getElementById('MeasureA').value = '';
document.getElementById('MeasureB').value = '';
document.getElementById('measurePoint').value = '';
}
dojo.addOnLoad(init);
</script>
<%-- </head>--%>
<body class="claro">
<div id="appContent" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true"
style="width:100%; height:90%; margin:0;">
<div id="header" dojotype="dijit.layout.ContentPane" region="top">
<tr>
<h1 style="height:30px;" >Locate A Route's Point or Segment</h1>
</tr>
<tr>
<td cospan="3" style="border-bottom: olive thick solid; height:20px; ">
<table style="width:100%;" >
<%-- <h5 style="width:250px; padding-left:10px;">WMATA GIS Application </h5>--%>
<td style="width:90%; padding-left:10px; align:left; padding-top:0px">
<asp:Label ID="LabelHeader2" runat="server" Text="WMATA GIS Application"
style="color: #0033CC" ></asp:Label>
</td>
<td style="height: 20px; width: 25px; padding-right:5px; padding-top:0px; align:right">
<asp:HyperLink ID="HyperLink3" Text="Help"
ToolTip = "How to Use Procedure"
runat="server" NavigateUrl="http://metroweb/departments/IT/apps2/gis/Documents/LocateSegment.pdf">
</asp:HyperLink>
</td>
</table>
</td>
</tr>
</div>
<!-- <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">
</div>-->
<form id="form1" runat="server">
<div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
<div id="tocPane" name="tocPane" dojotype="dijit.TitlePane" title="Table of Contents" style="overflow:hidden;" open="false" >
<div id="sliderDiv">
</div>
</div>
<div id="segmentPane" dojotype="dijit.TitlePane" title="Locate A Route's Segment" style="font-size:small">
<div style="color:Purple; height:30px" >Choose a Route ID and 2 Measure Values:</div>
<div style="height:30px">Route ID:
<asp:DropDownList ID="DropDownRouteID" runat="server" onselectedindexchanged="DropDownRouteID_SelectedIndexChanged"
AutoPostBack="True" >
</asp:DropDownList>
<%-- <input id="Checkbox1" type="checkbox" onclick="chkBoxEvt(this)" onchange="chkBoxEvt(this)" />Show Route
--%> </div>
<div style="height:30px">Measure Start:
<input id="MeasureA" runat="server" onkeypress="return MeasureA_onkeyPress(event)" onchange="toggleMeasures()"
style="width:50px" />
<asp:Label ID="LabelMin" runat="server" Text="Min.:" Width="35" ForeColor="Gray"></asp:Label>
<asp:Label ID="LabelMinValue" runat="server" Text="" Width="50" ForeColor="Gray" Style="text-align: right"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="ft." ForeColor="Gray"></asp:Label>
</div>
<div style="height:30px">Measure End:
<input id="MeasureB" runat="server" onkeypress="return MeasureB_onkeyPress(event)" onchange="toggleMeasures()" style="width:50px" />
<asp:Label ID="LabelMax" runat="server" Text="Max.:" Width="35" ForeColor="Gray"></asp:Label>
<asp:Label ID="LabelMaxValue" runat="server" Text="" Width="50" ForeColor="Gray" Style="text-align: right"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="ft." ForeColor="Gray"></asp:Label>
</div>
<div style="height:30px">
<button id="submitButton" dojotype="dijit.form.Button" onclick="drawLine();">Draw Polyline</button>
<button id="clearButton" dojotype="dijit.form.Button" onclick="clear();">Clear</button>
</div>
</div>
<div id="pointPane" dojotype="dijit.TitlePane" title="Locate A Route's Point" open="false" >
<div style="color:Purple; height:30px" >Choose a Route ID and a Measure Value:</div>
<div style="height:30px">Route ID:
<asp:DropDownList ID="DropDownRouteID2" runat="server" onselectedindexchanged="DropDownRouteID2_SelectedIndexChanged"
AutoPostBack="True" >
</asp:DropDownList>
<%-- <input id="Checkbox2" type="checkbox" onclick="chkBoxEvt(this)" onchange="chkBoxEvt(this)" />Show Route
--%> </div>
<div>
Measure:
<input id="measurePoint" runat="server" onkeypress="return measurePoint_onkeyPress(event)" onchange="toggleMeasure2()"
style="width:50px" />
<%-- <input id="measurePoint" runat="server" onkeypress="return isNumberKey(event)" onChange="toggleMeasure2()"
style="width:50px" />--%>
</div>
<div style="height:30px">
<asp:Label ID="LabelMin2" runat="server" Text="Min.:" Width="32" ForeColor="Gray"></asp:Label>
<asp:Label ID="LabelMinValue2" runat="server" Text="" Width="48" ForeColor="Gray" Style="text-align: right"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="ft." ForeColor="Gray"></asp:Label>
<asp:Label ID="LabelMax2" runat="server" Text="Max.:" Width="32" ForeColor="Gray"></asp:Label>
<asp:Label ID="LabelMaxValue2" runat="server" Text="" Width="48" ForeColor="Gray"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="ft." ForeColor="Gray"></asp:Label>
</div>
<div style="height:30px">
<button id="submitButton2" dojotype="dijit.form.Button" onclick="drawPoint();" onclick="return submitButton2_onclick();">Draw Point</button>
<button id="clearButton2" dojotype="dijit.form.Button" onclick="clear();">Clear</button>
</div>
</div>
<%-- <div dojotype="dijit.TitlePane" title="Switch Basemap" open="false">
<div id="basemapGallery" >
</div>
</div>--%>
</div>
</form>
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
<div id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
<center>Created by WMATA GIS Team</center>
</div>
</div>
</body>
</html>