This code uses ArcGIS JS API 3.5 to have a user designate a location on a map. It then blasts those coordinates into a SQL Server 2008 database and returns (using the confirm location button) some information from an ArcSDE geodatabase.
The problem I have is when the user clicks the 'Confirm Location' button and the page postsback. On postback it clears both the map extent and the graphic which the user had just defined, which leaves the user in the dark as to where they have just pointed.
Is there any way to avoid this reset?
<!DOCTYPE html>
<html>
<head id="head1" runat="server">
<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=5, maximum-scale=1,user-scalable=no"/>
<title>Find Project Location</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/>
<style>
html, body, #map {
height:96%;
width:100%;
margin:0;
padding:0%;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.virtualearth.VETiledLayer");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.geometry");
var map = null;
var gsvc = null;
var pt = null;
function initialize() {
map = new esri.Map("map", {
basemap: "topo",
center: [-120.255, 44.022],
zoom: 7
});
var basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
dojo.connect(map, "onClick", projectToWGS84);
}
function projectToWGS84(evt) {
map.graphics.clear();
var point = evt.mapPoint;
var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
var graphic = new esri.Graphic(point, symbol);
var outSR = new esri.SpatialReference({ wkid: 4326});
map.graphics.add(graphic);
gsvc.project([ point ], outSR, function(projectedPoints) {
pt = projectedPoints[0];
var latitude = pt.y;
var longitude = pt.x;
graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
"<p> X: " + pt.x +
"<br/> Y: " + pt.y
));
document.getElementById('HiddenLat').value = latitude;
document.getElementById('HiddenLong').value = longitude;
map.infoWindow.setTitle(graphic.getTitle())
map.infoWindow.setContent(graphic.getContent())
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});
}
dojo.ready(initialize);
</script>
</head>
<body class = "claro">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:96%;margin:0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit.TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" >
</div>
</div>
</div>
</div>
</div>
</div>
<form id="Form1" runat="server">
<div id="buttongridview">
<asp:HiddenField runat="server" ID="HiddenCoord" Value="" />
<asp:HiddenField runat="server" ID="HiddenLat" Value="" />
<asp:HiddenField runat="server" ID="HiddenLong" Value="" />
<asp:Button ID="Button1" runat="server" Text="Calculate Location"
onclick="Button1_Click" />
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
CssClass="ogmodefaultgrid" PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt"
AutoGenerateColumns="False" AllowSorting="True" RowStyle-Wrap="true"
AllowPaging="true" PageSize="15"
CellSpacing="2" Font-Size="Small" PagerSettings-Mode="Numeric">
<Columns>
<asp:BoundField HeaderText="latitude" DataField="latitude"
SortExpression="latitude"
ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField HeaderText="Longitude"
InsertVisible="False" DataField="longitude"
SortExpression="longitude"
ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField HeaderText="Township Section and Range"
InsertVisible="False" DataField="trs"
SortExpression="trs"
ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left"/>
<asp:BoundField HeaderText="County"
InsertVisible="False" DataField="county"
SortExpression="county"
ItemStyle-HorizontalAlign="Left"
HeaderStyle-HorizontalAlign="Left"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click"
Text="Submit Location" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
