ThinkGeo.com    |     Documentation    |     Premium Support

Need some advice to handle "flicker"

Dear ThinkGeo Support.



Could you give me advice to build my project,  cause in this project, some many "flicker"(i think, this is postback event) in a page.

This my .aspx file


<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <cc2:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
        CollapsedSize="0"
        ExpandedSize="200"
        ImageControlID="imgLeft"
        ExpandedImage="/images/collapsible.png"
        CollapsedImage="/images/expended.png"
        ExpandDirection="Horizontal"
        TargetControlID="pnlLeft"
        ExpandControlID="pnlHeaderLeft"
        CollapseControlID="pnlHeaderLeft"
        SuppressPostBack="true" />
    <cc2:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
        CollapsedSize="0"
        ExpandedSize="200"
        ImageControlID="imgRight"
        ExpandedImage="/images/expended.png"
        CollapsedImage="/images/collapsible.png"
        ExpandDirection="Horizontal"
        TargetControlID="pnlRight"
        ExpandControlID="pnlHeaderRight"
        CollapseControlID="pnlHeaderRight"
        SuppressPostBack="true" />
 
    <table border="1">
        <tr>
            <td style="text-align:right; background-color:Green; height:20px; vertical-align:middle; cursor:pointer; ">
                <asp:Panel ID="pnlHeaderLeft" runat="server" CssClass="collapsePanelHeader">
                    <asp:Image ID="imgLeft" runat="server" ImageUrl="~/images/expended.png" Width="16px"  />
                </asp:Panel>
            </td>
            <td rowspan="2" style="width:100%;">
 
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                         
                        <cc1:Map ID="Map1" runat="server" Height="560px"  Width="100%" OnClick="Map1_Click"  OnTrackShapeFinished="Map1_TrackShapeFinished"></cc1:Map>            
 
                         
                    </ContentTemplate>
                   <Triggers>
                       <asp:AsyncPostBackTrigger ControlID="buttonNormal" EventName="Click" />
                       <asp:AsyncPostBackTrigger ControlID="Map1" EventName="Click" />
                       <asp:AsyncPostBackTrigger ControlID="Map1" EventName="TrackShapeFinished" />
                   </Triggers>
                </asp:UpdatePanel>
                         
                                             <asp:ImageButton ID="buttonDrawRectangle" runat="server" ToolTip="Draw Rectangle"
                             ImageUrl="~/images/rectangle28.png" OnClick="buttonDrawRectangle_Click"/>
 
                <asp:ImageButton ID="buttonNormal" runat="server" ToolTip="Normal Mode" ImageUrl="~/images/Cursor.png"  OnClick="buttonNormal_Click" />
                
                                                                         
            </td>
            <td style="background-color:Green; height:20px; vertical-align:middle; cursor:pointer; ">
                <asp:Panel ID="pnlHeaderRight" runat="server" CssClass="collapsePanelHeader">
                    <asp:Image ID="imgRight" runat="server" ImageUrl="~/images/collapsible.png" Width="16px"  />
                </asp:Panel>
            </td>
        </tr>
        <tr>
            <td style="vertical-align:top;">
                <asp:Panel ID="pnlLeft" runat="server" >
                    <input id="Checkbox1" type="checkbox" />
                    <asp:Panel ID="pnlpetroleumLayers" GroupingText="Petroleum Layers" Height="200px"  ScrollBars="Auto" runat="server">
                        <asp:CheckBoxList ID="chkpetrolyrs" AutoPostBack="true" runat="server" OnSelectedIndexChanged="chkpetrolyrs_SelectedIndexChanged">
                            <asp:ListItem Text="Well" Selected="True" Value="well"></asp:ListItem>
                            <asp:ListItem Text="Seismic 2D" Value="seis2D" ></asp:ListItem>
                        </asp:CheckBoxList>
                    </asp:Panel>
                    <asp:Panel ID="pnlbasemap" GroupingText="Basemap" Height="300px"  ScrollBars="Auto" runat="server">
                        <asp:CheckBoxList ID="chkbasemap" runat="server">
                            <asp:ListItem Text="Offline" Value="off" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Batyhmetric" Value="bathy" ></asp:ListItem>
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:Panel>
            </td>
            <td style="vertical-align:top;">
                <asp:Panel ID="pnlRight" runat="server" Height="300px">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                                <asp:GridView ID="FeaturesGridView" runat="server" Font-Size="10px" Font-Names="Verdana"
                                    HorizontalAlign="Center" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC"
                                    BorderStyle="None" BorderWidth="1px" CellPadding="3">
                                    <FooterStyle BackColor="White" ForeColor="#000066" />
                                    <RowStyle ForeColor="#000066" />
                                    <Columns>
                                        <asp:BoundField DataField="WELL_NAME" HeaderText="Well Name">
                                            <ItemStyle HorizontalAlign="Center" />
                                        </asp:BoundField>
                                    </Columns>
                                    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                                    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                                    <EmptyDataTemplate>
                                        <table>
                                            <tr>
                                                <td>Data Not Found</td>
                                            </tr>
                                        </table>
                                    </EmptyDataTemplate>
                                </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                             
                            <asp:AsyncPostBackTrigger ControlID="buttonNormal" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                 </asp:Panel>
            </td>
        </tr>
    </table>
     
 
             
     
</form>

thank you.



boby

Hi Bobby, 
  
 Please don’t use Map1 as trigger to update updatepanel. 
  
 That will cause some problem. 
  
 Please comment that and see whether that’s why cause your issue? 
  
 Regards, 
  
 Don

hi, Don, 
  
 Thank you for your replay, I’ve done auggestions you say, but, that’s not my prob, that still “flicker”, i try to send my project to you, but my attach more than 2MB, this my full code. 
  
  
    <form id=“form1” runat=“server”>
        <asp:ScriptManager ID=“ScriptManager1” runat=“server”></asp:ScriptManager>
        <cc2:CollapsiblePanelExtender ID=“CollapsiblePanelExtender1” runat=“server”
            CollapsedSize=“0”
            ExpandedSize=“200”
            ImageControlID=“imgLeft”
            ExpandedImage="/images/collapsible.png"
            CollapsedImage="/images/expended.png"
            ExpandDirection=“Horizontal”
            TargetControlID=“pnlLeft”
            ExpandControlID=“pnlHeaderLeft”
            CollapseControlID=“pnlHeaderLeft”
            SuppressPostBack=“true” />
        <cc2:CollapsiblePanelExtender ID=“CollapsiblePanelExtender2” runat=“server” 
            CollapsedSize=“0”
            ExpandedSize=“200”
            ImageControlID=“imgRight”
            ExpandedImage="/images/expended.png"
            CollapsedImage="/images/collapsible.png"
            ExpandDirection=“Horizontal”
            TargetControlID=“pnlRight”
            ExpandControlID=“pnlHeaderRight”
            CollapseControlID=“pnlHeaderRight”
            SuppressPostBack=“true” />

        <table border=“1”>
            <tr>
                <td style=“text-align:right; background-color:Green; height:20px; vertical-align:middle; cursor:pointer; “>
                    <asp:Panel ID=“pnlHeaderLeft” runat=“server” CssClass=“collapsePanelHeader”>
                        <asp:Image ID=“imgLeft” runat=“server” ImageUrl=”~/images/expended.png” Width=“16px”  />
                    </asp:Panel>
                </td>
                <td rowspan=“2” style=“width:100%;”>

                    <asp:UpdatePanel ID=“UpdatePanel1” runat=“server”>
                        <ContentTemplate>
                            <asp:Label ID=“Label1” runat=“server” Text=“Label”></asp:Label>
                            <cc1:Map ID=“Map1” runat=“server” Height=“560px” Width=“100%”  OnClick=“Map1_Click”  OnTrackShapeFinished=“Map1_TrackShapeFinished”></cc1:Map>            
                        </ContentTemplate>
                       <Triggers>
                           <asp:AsyncPostBackTrigger ControlID=“buttonNormal” EventName=“Click” />
                           <asp:AsyncPostBackTrigger ControlID=“chkpetrolyrs” EventName=“SelectedIndexChanged” />
                       </Triggers>
                    </asp:UpdatePanel>
                    <asp:ImageButton ID=“buttonDrawRectangle” runat=“server” ToolTip=“Draw Rectangle”
                                 ImageUrl="~/images/rectangle28.png" OnClick=“buttonDrawRectangle_Click”/>
                    <asp:ImageButton ID=“buttonNormal” runat=“server” ToolTip=“Normal Mode” ImageUrl="~/images/Cursor.png"  OnClick=“buttonNormal_Click” />
                </td>
                <td style=“background-color:Green; height:20px; vertical-align:middle; cursor:pointer; “>
                    <asp:Panel ID=“pnlHeaderRight” runat=“server” CssClass=“collapsePanelHeader”>
                        <asp:Image ID=“imgRight” runat=“server” ImageUrl=”~/images/collapsible.png” Width=“16px”  />
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td style=“vertical-align:top;”>
                    <asp:Panel ID=“pnlLeft” runat=“server” >
                        <input id=“Checkbox1” type=“checkbox” />
                        <asp:Panel ID=“pnlpetroleumLayers” GroupingText=“Petroleum Layers” Height=“200px”  ScrollBars=“Auto” runat=“server”>
                            <asp:CheckBoxList ID=“chkpetrolyrs” AutoPostBack=“true” runat=“server” OnSelectedIndexChanged=“chkpetrolyrs_SelectedIndexChanged”>
                                <asp:ListItem Text=“Well” Selected=“True” Value=“well”></asp:ListItem>
                                <asp:ListItem Text=“Seismic 2D” Value=“seis2D” ></asp:ListItem>
                            </asp:CheckBoxList>
                        </asp:Panel>
                        <asp:Panel ID=“pnlbasemap” GroupingText=“Basemap” Height=“300px”  ScrollBars=“Auto” runat=“server”>
                            <asp:CheckBoxList ID=“chkbasemap” runat=“server”>
                                <asp:ListItem Text=“Offline” Value=“off” Selected=“True”></asp:ListItem>
                                <asp:ListItem Text=“Batyhmetric” Value=“bathy” ></asp:ListItem>
                            </asp:CheckBoxList>
                        </asp:Panel>
                    </asp:Panel>
                </td>
                <td style=“vertical-align:top;”>
                    <asp:Panel ID=“pnlRight” runat=“server” Height=“300px”>
                        <asp:UpdatePanel ID=“UpdatePanel2” runat=“server”>
                            <ContentTemplate>
                                    <asp:GridView ID=“FeaturesGridView” runat=“server” Font-Size=“10px” Font-Names=“Verdana”
                                        HorizontalAlign=“Center” AutoGenerateColumns=“False” BackColor=“White” BorderColor="#CCCCCC"
                                        BorderStyle=“None” BorderWidth=“1px” CellPadding=“3”>
                                        <FooterStyle BackColor=“White” ForeColor="#000066" />
                                        <RowStyle ForeColor="#000066" />
                                        <Columns>
                                            <asp:BoundField DataField=“WELL_NAME” HeaderText=“Well Name”>
                                                <ItemStyle HorizontalAlign=“Center” />
                                            </asp:BoundField>
                                        </Columns>
                                        <PagerStyle BackColor=“White” ForeColor="#000066" HorizontalAlign=“Left” />
                                        <SelectedRowStyle BackColor="#669999" Font-Bold=“True” ForeColor=“White” />
                                        <HeaderStyle BackColor="#006699" Font-Bold=“True” ForeColor=“White” />
                                        <EmptyDataTemplate>
                                            <table>
                                                <tr>
                                                    <td>Data Not Found</td>
                                                </tr>
                                            </table>
                                        </EmptyDataTemplate>
                                    </asp:GridView>
                            </ContentTemplate>
                            <Triggers>
                                
                                <asp:AsyncPostBackTrigger ControlID=“buttonNormal” EventName=“Click” />
                            </Triggers>
                        </asp:UpdatePanel>
                     </asp:Panel>
                </td>
            </tr>
        </table>
    </form>
 
  
  
  
  
    public partial class sampleMap : System.Web.UI.Page
    {
        #region “All Logic binding layers-still construction”

        private LayerOverlay sffl(string pathShapefile, int defaultStyle, string defaultStylePathImage, bool useText, string fieldDisplName, 
            string overlayname, bool displLayer = true)
        {
            ShapeFileFeatureLayer sffl_virtual = new ShapeFileFeatureLayer(MapPath(pathShapefile));
            sffl_virtual.RequireIndex = false;
            
            switch (defaultStyle)
            {
                case 1:

                    if (defaultStylePathImage != “”)
                    {
                        sffl_virtual.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = new PointStyle(new GeoImage(MapPath(defaultStylePathImage)));
                    }
                    else
                    {
                        sffl_virtual.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = new PointStyle(PointSymbolType.Circle, new GeoSolidBrush(GeoColor.SimpleColors.Black), 3);
                    }
                    break;
            }

            if (useText)
            {
                sffl_virtual.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle(fieldDisplName, “Arial”, 8, DrawingFontStyles.Bold, GeoColor.StandardColors.Red, 8, 0);
                sffl_virtual.ZoomLevelSet.ZoomLevel01.DefaultTextStyle.PointPlacement = PointPlacement.CenterRight;
                sffl_virtual.ZoomLevelSet.ZoomLevel06.DefaultTextStyle.PointPlacement = PointPlacement.LowerCenter;
            }

            sffl_virtual.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            sffl_virtual.DrawingMarginPercentage = 10;

            LayerOverlay shapeOverlay = new LayerOverlay(overlayname, false, TileType.SingleTile);
            shapeOverlay.Layers.Add(overlayname.Replace(" “,”"), sffl_virtual);
            shapeOverlay.TransitionEffect = TransitionEffect.None;
            shapeOverlay.Redraw();
            shapeOverlay.IsVisible = displLayer;
            shapeOverlay.IsVisibleInOverlaySwitcher = displLayer;
            
            return shapeOverlay; // lOverlay(sffl_virtual, overlayname);
        }

        protected LayerOverlay lOverlay(ShapeFileFeatureLayer sffl, string overlayname)
        {
            LayerOverlay shapeOverlay = new LayerOverlay(overlayname, false, TileType.SingleTile);
            shapeOverlay.Layers.Add(overlayname.Trim(), sffl);
            shapeOverlay.TransitionEffect = TransitionEffect.None;

            return shapeOverlay;
        }

        //protected LayerOverlay lOverlay(ShapeFileFeatureLayer sffl, string overlayname)
        //{
        //    LayerOverlay shapeOverlay = new LayerOverlay(overlayname, false, TileType.SingleTile);
        //    shapeOverlay.Layers.Add(overlayname.Trim(), sffl);
        //    shapeOverlay.TransitionEffect = TransitionEffect.None;

        //    return shapeOverlay;
        //}

        #endregion

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
                Map1.CurrentExtent = new RectangleShape(112, -6.4567, 114, -6.8345);
                Map1.MapUnit = GeographyUnit.DecimalDegree;
               
                //Map1.MapTools.OverlaySwitcher.Enabled = true;
                Map1.MapTools.MouseCoordinate.Enabled = true;

                //—
                ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(MapPath("/shp/Archipelago.shp"));
                worldLayer.RequireIndex = false;
                worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
                worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                //----
                InMemoryFeatureLayer shapeLayer = new InMemoryFeatureLayer();
                shapeLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(180, 102, 255, 102), GeoColor.StandardColors.DarkGreen, 1);
                shapeLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
                shapeLayer.DrawingQuality = DrawingQuality.HighQuality;

                LayerOverlay dynamicOverlay = new LayerOverlay(“DynamicOverlay”);
                dynamicOverlay.IsBaseOverlay = false;
                dynamicOverlay.TileType = TileType.SingleTile;
                dynamicOverlay.Layers.Add(“shapeLayer”, shapeLayer);
                Map1.CustomOverlays.Add(dynamicOverlay);
                //—

                Map1.StaticOverlay.Layers.Add(worldLayer);
                Map1.CustomOverlays.Add(sffl("/shp/Well_2.shp", 1, “/images/well.png”, true, “WELL_NAME”, “Well Layer”));

                Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean);
                
                Map1.MapTools.LoadingImage.Enabled = true;
                Map1.MapTools.LoadingImage.Width = 64;
                Map1.MapTools.LoadingImage.Height = 64;
                Map1.MapTools.LoadingImage.ImageUri = new Uri(new Uri(Request.Url.AbsoluteUri), “/images/loading.gif”);
                ////---------------------------------------------------------------------
            }
        }

        protected void Map1_Click(object sender, MapClickedEventArgs e)
        {
            double resolution = Math.Max(Map1.CurrentExtent.Width / Map1.WidthInPixels, Map1.CurrentExtent.Height / Map1.HeightInPixels);
            double clickScreenTolerance = 30;
            double clickWorldTolerance = clickScreenTolerance * resolution;

            LayerOverlay staticOverlay = (LayerOverlay)Map1.CustomOverlays[“Well Layer”];
            ShapeFileFeatureLayer shapeFileLayer = (ShapeFileFeatureLayer)(staticOverlay.Layers[“WellLayer”]);

            RectangleShape rectPosition = new RectangleShape(e.Position.X - clickWorldTolerance, e.Position.Y + clickWorldTolerance, e.Position.X + clickWorldTolerance, e.Position.Y - clickWorldTolerance);

            shapeFileLayer.Open();
            ShapeFileType type = shapeFileLayer.GetShapeFileType();
            Collection<Feature> selectedFeatures = shapeFileLayer.QueryTools.GetFeaturesWithin(rectPosition, new string[] { “Well_name” });
            shapeFileLayer.Close();

            FeaturesGridView.DataSource = GetDataTableFromFeatureSourceColumns(selectedFeatures);
            FeaturesGridView.DataBind();
        }

        #region “Function for click object”

        private static DataTable GetDataTableFromFeatureSourceColumns(Collection<Feature> features)
        {
            DataTable dataTable = new DataTable();

            dataTable.Columns.Add(“WELL_NAME”);

            foreach (Feature feature in features)
            {
                AddRow(feature, dataTable);
            }

            return dataTable;
        }  

        private static void AddRow(Feature feature, DataTable dataTable)
        {
            DataRow dataRow = dataTable.NewRow();

            dataRow[0] = feature.ColumnValues[“WELL_NAME”];

            dataTable.Rows.Add(dataRow);
        }  

        #endregion

        protected void buttonDrawRectangle_Click(object sender, ImageClickEventArgs e)
        {
            Map1.EditOverlay.TrackMode = TrackMode.Rectangle;
        }

        protected void Map1_TrackShapeFinished(object sender, EventArgs e)
        {
            LayerOverlay dynamicOverlay = (LayerOverlay)Map1.CustomOverlays[“DynamicOverlay”];
            InMemoryFeatureLayer shapeLayer = (InMemoryFeatureLayer)dynamicOverlay.Layers[“shapeLayer”];

            foreach (Feature feature in Map1.EditOverlay.Features)
            {
                LayerOverlay staticOverlay = (LayerOverlay)Map1.CustomOverlays[“Well Layer”];
                ShapeFileFeatureLayer shapeFileLayer = (ShapeFileFeatureLayer)(staticOverlay.Layers[“WellLayer”]);
                
                shapeFileLayer.Open();
                Collection<Feature> selectedFeatures = shapeFileLayer.QueryTools.GetFeaturesWithin(feature, new string[] { “Well_name” });
                shapeFileLayer.Close();

                FeaturesGridView.DataSource = GetDataTableFromFeatureSourceColumns(selectedFeatures);
                FeaturesGridView.DataBind();
            }

            Map1.EditOverlay.Features.Clear();
            dynamicOverlay.Redraw();
        }

        protected void chkpetrolyrs_SelectedIndexChanged(object sender, EventArgs e)
        {
            LayerOverlay shapeOverlay1 = new LayerOverlay();

            foreach (ListItem item in this.chkpetrolyrs.Items)
        {
                switch (item.Value)
                {
                    case “well”:
                        
                        if (item.Selected)
                        {
                            Map1.CustomOverlays.Add(sffl("/shp/Well_2.shp", 1, “/images/well.png”, true, “WELL_NAME”, “Well Layer”));
                        }
                        else
                        {
                            Map1.CustomOverlays.Remove(“Well Layer”);
                        }
                        break;
                }
        }
        }

        protected void buttonNormal_Click(object sender, ImageClickEventArgs e)
        {
            Map1.EditOverlay.TrackMode = TrackMode.None;
        }
    }
 
  
 I didn,t have the problem in this code, i just have problem, maybe i say it’s “flicker” or “blinker” if i click or “selected area”(i say that) by rectangle function, maybe if i must using javascript, but i didn’t see the sample, could you give me the sample or where i must to see the sample. 
  
  
 Thank you

Hi Bobby, 
  
 Please try changing the "UpdateMode" of UpdatePanel1 to "Conditional" and "ChildrenAsTriggers" as "false", then the map should work without any "Flicker".   
  
 Thanks, 
 Johnny

I’m sorry to long your replay, thank’s a lot, Johnny… it’s work, many thanks… 
  
  
  
 Boby

Hi Bobby, 
  
 Great to hear it works for you, don’t hesitate to let us know if any other questions. 
  
 Thanks, 
 Troy