ThinkGeo.com    |     Documentation    |     Premium Support

Info Pop up wont close with close button

I created an info pop up and added the has close button but the Pop up will not close when its clicks the program thinks the map is being clicked again. i cant click on anything inside the pop up, the first is my javascript with the click event and the second is my controller, keep in mind this worked until a few days ago

JAVASCRIPT


function mapClick(d) {
        // Get the OpenLayers map object
        olMap = Map1.getOpenLayersMap();
 
        // Remove any existing popups from the map
        for (var i = 0; i < olMap.popups.length; i++) {
            olMap.removePopup(olMap.popups<i>);
        }
 
        // Call the ClickEvent server action with the clicked point’s world coordinates and current map scale
        var params = { x: d.worldXY.lon, y: d.worldXY.lat, scale: olMap.getScale()};
        Map1.ajaxCallAction(“Home.mvc”, ‘ClickEvent’, params, function (result) {
            // The callback contains a JSON string representing a popup balloon for the map
            var popupJson = null;
            var returnString = result.get_responseData();
            if (returnString != “”) {
                popupJson = JSON.parse(returnString);
                
            }
 
            // Create a new OpenLayers popup object from the returned JSON and add it to the map
            if (popupJson != null) {
                var olPopup = new Popup(popupJson, null);
                olMap.addPopup(olPopup.element);
                Map1.ajaxCallAction(“Home.mvc”, ‘ZoomToShape’, params, callback);
            }
           
        });
        //Map1.ajaxCallAction(“Home.mvc”, ‘ZoomToShape’, params, callback);
   // Redraw the WellOverlay layer
        Map1.redrawLayer(“Wilson Parcels”);
        Map1.redrawLayer(“Wilson Subdivisions”);
        Map1.redrawLayer(“Wilson TownShips”);
        Map1.redrawLayer(“Wilson Sections”);
    }




public string ClickEvent(Map map, GeoCollection<object> args)
       {
           // Argument reference:
           // 0: World longitude coordinate (x)
           // 1: World latitude coordinate (y)
           // 2: Current scale of the map
 
           string popupJson = string.Empty;
           int clickRadius;
           double currentScale;
           PointShape position = new PointShape(Convert.ToDouble(args[0]), Convert.ToDouble(args[1]));
           
          // Wilson Parcel Overlay
           LayerOverlay overlay = (LayerOverlay)map.CustomOverlays[“Wilson Parcels”];
           ShapeFileFeatureLayer inm = overlay.Layers[0] as ShapeFileFeatureLayer;
           inm.Open();
           InMemoryFeatureLayer highlightLayer = overlay.Layers[“HighlightLayerP”] as InMemoryFeatureLayer;
           highlightLayer.Open();
 
          
           if (overlay.IsVisible != false)
           {
               // Get a list of all the columns in the parcel layer (we’ll need this for the GetFeaturesNearestTo method)
               Collection<FeatureSourceColumn> parcelLayerColumns = inm.FeatureSource.GetColumns();
               List<string> parcelLayerColumnNames = new List<string>();
               foreach (FeatureSourceColumn col in parcelLayerColumns)
               {
                   parcelLayerColumnNames.Add(col.ColumnName);
               }
 
               // Adjust the click radius based on the scale of the map (via event args) for better UX – capped at 6400 meters (approx. 4 miles)
               if (Double.TryParse(args[2].ToString(), out currentScale) && Int32.TryParse(Math.Ceiling(currentScale / 100).ToString(), out clickRadius))
               {
                   if (clickRadius > 6400 || clickRadius <= 0)
                   {
                       clickRadius = 6400;
                   }
               }
               else
               {
                   clickRadius = 6400;
               }
 
               // Create a new CloudPopup and set some common properties
               CloudPopup infoPopup = new CloudPopup(“ParcelInfoPopup”);
               infoPopup.HasCloseButton = true;
                
               infoPopup.AutoPan = true;
               infoPopup.AutoSize = true;
 
               // Open the highlightLayer for editing and clear any existing highlight points
               highlightLayer.FeatureSource.Open();
               highlightLayer.FeatureSource.BeginTransaction();
               highlightLayer.InternalFeatures.Clear();
 
               // Use GetFeaturesNearestTo instead of GetFeaturesWithinDistanceOf so that the first feature returned is always closest to the click point
               Collection<Feature> closestFeature = inm.FeatureSource.GetFeaturesNearestTo(position, map.MapUnit, 1, parcelLayerColumnNames as IEnumerable<string>, clickRadius, DistanceUnit.Meter);
               if (closestFeature.Any())
               {
                   // Add a copy of this feature to the highlightLayer
                   highlightLayer.FeatureSource.AddFeature(closestFeature[0]);
 
                   // Create a popup with info about this feature
                   StringBuilder message = new StringBuilder();
                   message.AppendFormat("<li>Parcel Id:{0}</li>", closestFeature[0].ColumnValues[“PARCELID”].Trim());
                   message.AppendFormat("<li>Owner: {0}</li>", closestFeature[0].ColumnValues[“OWNER”].Trim());
                   //message.AppendFormat("<li>Owner Addr: {0}</li>", closestFeature[0].ColumnValues[“OWNADDR”].Trim());
                   message.AppendFormat("<li>Quick Ref ID: {0}</li>", closestFeature[0].ColumnValues[“QuickRefID”].Trim());
                   message.AppendFormat("<li>Acres: {0}</li>", closestFeature[0].ColumnValues[“CalcAcres”].Trim());
                   message.AppendFormat("<li>Tax Unit : {0}</li>", closestFeature[0].ColumnValues[“TAXUNIT”].Trim());
                   message.AppendFormat("<input name=‘TaxData’ type=‘button’ id=‘btnCIC’ value=‘Tax Data’ onclick=‘test1()’/>");
                   message.AppendFormat("<input name=‘OrionData’ type=‘button’ id=‘btnOrion’ value=‘Orion Data’ onclick=‘test1()’/>");
                   message.AppendFormat("<input name=‘Photo’ type=‘button’ id=‘btnPhoto’ value=‘Photo’ onclick=‘test1()’/>");
                   message.AppendFormat("<input name=‘SVQ’ type=‘button’ id=‘btnSvS’ value=‘SVQ’ onclick=‘test1()’/>");
                   string messageInPopup = String.Format("<div class=\&#34;normalBlueTx\&#34;>{0}</div>", message.ToString());
 
                   infoPopup.ContentHtml = messageInPopup;
                   infoPopup.Position = closestFeature[0].GetShape().GetCenterPoint();
               }
               else
               {
                   // Create a default instructional popup
                   infoPopup.ContentHtml = “<div class=\&#34;normalBlueTx\&#34;>Please click on a Parcel to show its information.</div>”;
                   infoPopup.Position = position;
               }
 
               // Commit changes to the highlightLayer
               highlightLayer.FeatureSource.CommitTransaction();
               highlightLayer.FeatureSource.Close();
 
               // Clear the map’s Popups collection and add our new one
               map.Popups.Clear();
               map.Popups.Add(infoPopup);
 
               // Convert the popup to JSON and return it to the client
               popupJson = infoPopup.ToJson();
               
               return popupJson;
           }




Hi Gordon,



We tried your codes but with no lucky to recreate your issue, here is our test sample, would you please try it?

We tried the version 8.0.0.162 and 8.0.0.168 (the latest one), both of them worked fine in our end.



Would you please modified the attached sample to recreate your issue and then send it back? Another thing is would you let us know which version you are referring and what the correct version is before your upgrade?



Thanks,

Troy

Post12358.zip (496 KB)

I figured out the problem with the click event, I add a legend adornment layer for a couple of layers on our map, but when i do this it doesn’t allow me to click on the popup any more. The code code i add is  




private void AddLegend(LegendAdornmentLayer legendAdornmentLayer)
        {
            // Add Legend adorment overlay
            //LegendAdornmentLayer legendAdornmentLayer = new LegendAdornmentLayer();
            legendAdornmentLayer.Location = AdornmentLocation.LowerLeft;
            //legendAdornmentLayer.ContentResizeMode = LegendContentResizeMode.Fixed;
            //legendAdornmentLayer.Height = 400;
            legendAdornmentLayer.XOffsetInPixel = 10;
            legendAdornmentLayer.Title = new LegendItem();
            legendAdornmentLayer.Title.ImageJustificationMode = LegendImageJustificationMode.JustifyImageRight;
            legendAdornmentLayer.Title.TopPadding = 10;
            legendAdornmentLayer.Title.BottomPadding = 10;
            legendAdornmentLayer.IsVisible = false;
            //AdornmentOverlay adornmentOverlay = new AdornmentOverlay(“MapL”);
            //adornmentOverlay.Layers.Add(“LegendLayer”, legendAdornmentLayer);
            Map1.AdornmentOverlay.Layers.Add(legendAdornmentLayer); 
        }

Then i add the Legend to the specified layer 




private void mAddESNOverlay()
       {
           
               if (!Map1.CustomOverlays.Contains(SessionHandler.WebESNLocation))
               {
 
 
               ShapeFileFeatureSource.BuildIndexFile(SessionHandler.WebESNLocation);
               ShapeFileFeatureLayer lyrESNLayer = new ShapeFileFeatureLayer(SessionHandler.WebESNLocation);
               lyrESNLayer.Open();
               ShapeFileFeatureLayer lyrESNLabels = new ShapeFileFeatureLayer(SessionHandler.WebESNLocation);
               lyrESNLabels.ZoomLevelSet.ZoomLevel05.DefaultTextStyle = TextStyles.CreateSimpleTextStyle(“ESNCODE”, “Arial”, 12, DrawingFontStyles.Bold, GeoColor.StandardColors.Black, 6, 2);
               lyrESNLabels.ZoomLevelSet.ZoomLevel05.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
               lyrESNLabels.Open();
               string layercode = “ESNCODE”;
               Collection<Feature> allFeatures = lyrESNLayer.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
               Collection<ValueItem> valueItems = new Collection<ValueItem>();
               colorSelect(allFeatures, layercode, valueItems);
               ValueStyle valueStyle = new ValueStyle(layercode, valueItems);
               lyrESNLayer.ZoomLevelSet.ZoomLevel01.CustomStyles.Add(valueStyle);
               lyrESNLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
               lyrESNLayer.Transparency = 75;
               LegendAdornmentLayer legendAdornmentLayers = new LegendAdornmentLayer();
               AddLegend(legendAdornmentLayers);
               Proj4Projection proj4 = new Proj4Projection();
               int projkey = Convert.ToInt32(SessionHandler.WebProjection);
 
               proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(projkey);
 
               proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
               proj4.Open();
               lyrESNLayer.Open();
               lyrESNLayer.FeatureSource.Projection = proj4;
               lyrESNLabels.FeatureSource.Projection = proj4;
                
 
               LayerOverlay ovlESN = new LayerOverlay(SessionHandler.WebESNName, false, TileType.SingleTile);
               ovlESN.Layers.Add(lyrESNLayer);
               ovlESN.Layers.Add(legendAdornmentLayers);
               ovlESN.Layers.Add(lyrESNLabels);
               ovlESN.IsVisible = false;
               Map1.CustomOverlays.Add(ovlESN);
               }
           
       }

i then create the legend items when the layer changes visibility in the overlay switcher, as you can see im working with multiple layers but is there a bug in this or a reason this shouldnt work?




[MapActionFilter]
        public void ChangeOverlayVisibility(Map map, GeoCollection<object> args)
        {
            
            LayerOverlay overlay = map.CustomOverlays[args[0].ToString()] as LayerOverlay;
            if (overlay.Id == “ESN”)
            {
                LegendAdornmentLayer legendAdornmentLayer = map.AdornmentOverlay.Layers[0] as LegendAdornmentLayer;
                if (overlay.IsVisible == false)
                {
                    legendAdornmentLayer.Height = 200;
                    legendAdornmentLayer.Width = 550;
                    LayerOverlay overlayFindResults = (LayerOverlay)map.CustomOverlays[SessionHandler.WebESNName];
                    ShapeFileFeatureLayer layerESNResults = overlayFindResults.Layers[0] as ShapeFileFeatureLayer;
                    layerESNResults.Open();
                    string layercode = “ESNDESCR”;
                    Collection<Feature> allFeatures = layerESNResults.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
                    AddLegendItems(allFeatures, layercode, map, legendAdornmentLayer,overlay);
                    layerESNResults.Close();
                }
                else
                {
                    legendAdornmentLayer.IsVisible = false;
                }
            }
            //if (overlay.Id == “Grader Districts”)
            //{
            //    LegendAdornmentLayer legendAdornmentLayerG = map.AdornmentOverlay.Layers[2] as LegendAdornmentLayer;
            //    if (overlay.IsVisible == false)
            //    {
            //        legendAdornmentLayerG.Height = 250;
            //        LayerOverlay overlayFindResults = (LayerOverlay)map.CustomOverlays[SessionHandler.GraderDistName];
            //        ShapeFileFeatureLayer layerGraderResults = overlayFindResults.Layers[0] as ShapeFileFeatureLayer;
            //        layerGraderResults.Open();
            //        string layercode = “Operator”;
            //        Collection<Feature> allFeatures = layerGraderResults.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
            //        AddLegendItems(allFeatures, layercode, map, legendAdornmentLayerG,overlay);
            //        layerGraderResults.Close();
            //    }
            //    else
            //    {
            //        legendAdornmentLayerG.IsVisible = false;
            //    }
            //}
            //if (overlay.Id == “Commissioner” )
            //{
            //    LegendAdornmentLayer legendAdornmentLayerC = map.AdornmentOverlay.Layers[1] as LegendAdornmentLayer;
            //    if(overlay.IsVisible == false)
            //    {
            //        legendAdornmentLayerC.Height = 150;
            //        LayerOverlay overlayFindResults = (LayerOverlay)map.CustomOverlays[SessionHandler.CommissionerName];
            //        ShapeFileFeatureLayer layerCommissionerResults = overlayFindResults.Layers[0] as ShapeFileFeatureLayer;
            //        layerCommissionerResults.Open();
            //        string layercode = “Comm”;
            //        Collection<Feature> allFeatures = layerCommissionerResults.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
            //        AddLegendItems(allFeatures, layercode, map, legendAdornmentLayerC,overlay);
            //        layerCommissionerResults.Close();
            //     }
            //    else {
            //        legendAdornmentLayerC.IsVisible = false;
            //        }
            //}
 
            //if (overlay.Id == “Water Districts” )
            //{
            //    LegendAdornmentLayer legendAdornmentLayerRur = map.AdornmentOverlay.Layers[3] as LegendAdornmentLayer;
            //    if (overlay.IsVisible == false)
            //    {
            //        legendAdornmentLayerRur.Location = AdornmentLocation.LowerLeft;
            //        legendAdornmentLayerRur.Height = 550;
            //        legendAdornmentLayerRur.Width = 175;
            //        LayerOverlay overlayFindResults = (LayerOverlay)map.CustomOverlays[SessionHandler.RuralWaterName];
            //        ShapeFileFeatureLayer layerRuralWaterResults = overlayFindResults.Layers[0] as ShapeFileFeatureLayer;
            //        layerRuralWaterResults.Open();
            //        string layercode = “Name”;
            //        Collection<Feature> allFeatures = layerRuralWaterResults.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
            //        AddLegendItems(allFeatures, layercode, map, legendAdornmentLayerRur,overlay);
            //        layerRuralWaterResults.Close();
            //    }
            //    else
            //    {
            //        legendAdornmentLayerRur.IsVisible = false;
            //    }
            //}
            //if (overlay.Id == “Zip Boundaries” )
            //{
            //    LegendAdornmentLayer legendAdornmentLayerZip = map.AdornmentOverlay.Layers[4] as LegendAdornmentLayer;
            //    if (overlay.IsVisible == false)
            //    {
            //        legendAdornmentLayerZip.Height = 300;
            //        LayerOverlay overlayFindResults = (LayerOverlay)map.CustomOverlays[SessionHandler.ZipBoundriesName];
            //        ShapeFileFeatureLayer layerZipBoundariesResults = overlayFindResults.Layers[0] as ShapeFileFeatureLayer;
            //        layerZipBoundariesResults.Open();
            //        string layercode = “Zip_Code”;
            //        Collection<Feature> allFeatures = layerZipBoundariesResults.FeatureSource.GetAllFeatures(ReturningColumnsType.AllColumns);
            //        AddLegendItems(allFeatures, layercode, map, legendAdornmentLayerZip,overlay);
            //        layerZipBoundariesResults.Close();
            //    }
            //    else
            //    {
            //        legendAdornmentLayerZip.IsVisible = false;
            //    }
            //}
             
            if (overlay != null)
            {
                bool visible = bool.Parse(args[1].ToString());
                overlay.IsVisible = visible;
            }
            clearHighlight(overlay, map);
             
        }






here is a sample program recreating the app

Hi Gordon,



Thanks for the searching, it helps us a lot to narrow down the issue. Currently, there is a temporary solution by simply modifying the css file but this won’t fix in IE. We will try to figure out a better solution for all browsers.



Site=>Content=>theme>default=>style.css, then navigate to class name “olControlAttribution”, then append the pointer-events: none; like:

.olControlAttribution {
    font-size: 8pt;
    font: Arial,Helvetica,Sans-Serif;
    text-shadow: #fff 1px 1px;
    right: 3px;
    bottom: 3px;
    position: absolute;
    display: block;
    width:100%;
    pointer-events: none;
}


I will update here once we find out the solution for IE.



Btw, I checked your codes and found in ClickEvent action, we don’t need to create a new popup instance and add into the map, we can just return the popup json to client and then create and add the popup into the map. This is because the popups are created in client side and not related with the server side popups.



Thanks,

Troy