1

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>
  • 1
    Looking at your code your "map" control and rest Asp.Net control are in separate div's so you can use Update Panel which will update only Asp.Net Control and will not refresh entire page. – Gunner Aug 7 '13 at 5:53
  • 1
    Your page is doing a complete postback. Instead you should use Ajax to get the data without refreshing the page. – Devdatta Tengshe Aug 7 '13 at 6:28
  • @Gunner you are right on. If you can change your comment to an answer I will gladly mark it as such. – ShinyCy Aug 7 '13 at 15:01
  • @devdatta-tengshe you too are right on and the same applies, if you answer this question I will mark it as answered. – ShinyCy Aug 7 '13 at 15:02
4

Over the past several years, there has been a movement of doing more things via Ajax, rather than doing things on the server side and posting an updated page back.

The ESRI JavaScript API makes ample use of Ajax and the easiest thing for you would be to call a Javascript function on the click of your button.

This Javascript function could call the required service via Ajax, and that way the new data will come without a page refresh.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.