ThinkGeo.com    |     Documentation    |     Premium Support

Client side popup display

#1

Hi,  I am trying to determine how to get a popup to display.  I use the ajaxCallAction method to call server side code that creates the popup.  However, the popup does not display with a layer redraw.  I need to know how to get the popup to redraw, so that it displays on the map.



Here is the client side call:




function mapClick(e) {


       Map1.ajaxCallAction(<a href=“mailto:’@ViewContext.RouteData.Values[”>’@ViewContext.RouteData.Values["Con…oString()’</a>, ‘HighlighPoint’, { ‘x’: e.worldXY.lon, ‘y’: e.worldXY.lat }, function (result) {


           var id = result.get_responseData();


           var layer = Map1.getLayer(“Terminals (red dots)”);


           layer.redraw(true);


           
})


}





here is the server side code:


//add popup feature for the selected point

                CloudPopup popup;

                if (map.Popups.Count == 0)

                {

                    //popup = new CloudPopup(“Popup”, pointShape, string.Empty, 350, 120);

                    popup = new CloudPopup(“Popup”, pointShape, “test”, 350, 120);

                    popup.IsVisible = true;

                    map.Popups.Add(popup);

                }

                else

                {

                    popup = (CloudPopup)map.Popups[“Popup”];

                    popup.Position = pointShape;

                }

                popup.ContentHtml = GetPopupContent(feature);            






I know that layers and popups are separate.  Just making the popup.IsVisible = true on the server side does not tell the client side map to display it on the layer reload.  Do I need to reload the entire map, or is there a way to tell the client side to redraw just the popup layer?



Thanks,



Raymond




#2

In case my post or code approach does not make sense, I will describe what I am trying to do.  I do not care if the popup creation occurs client side or server side.  I just need to be able to display a popup when a user clicks on the map. 



Use Case: 



Display map 

Display points on the map 

When user clicks on the map determine the point closest to where the user clicked 

hide any existing popups 

display popup for the closest point 



I have seen an example regarding creating and displaying a popup as part of the map definition.  I have seen an example of how to capture a client click event and to use ajax to call the server, update a feature layer and add a highlight to the click point.  I tried using these two things together to create a popup, but I do not know how to get the client side to display the popup after it is generated server side. 



Do you have an example of how to create a popup as part of a client click event? 



Thanks, 



Raymond 




#3

Hello Raymond,



Welcome to Map Suite Forum!

For your question, Please try the below codes to implement:



Controller:


[MapActionFilter]
public string AddPopup(Map map, GeoCollection<object> args)
{
    CloudPopup popup = null;
    PointShape position = new PointShape(Convert.ToDouble(args[0]), Convert.ToDouble(args[1]));
 
    ShapeFileFeatureLayer citiesLayer = (map.CustomOverlays[“CitiesOverlay”] as LayerOverlay).Layers[0] as ShapeFileFeatureLayer;
    citiesLayer.Open();
    Collection<Feature> closestFeatures = citiesLayer.FeatureSource.GetFeaturesNearestTo(position, GeographyUnit.DecimalDegree, 1, ReturningColumnsType.AllColumns);
    if (closestFeatures.Count > 0)
    {
        popup = new CloudPopup(“Popup”, position, “test”, 350, 120);
        popup.IsVisible = true;
        popup.ContentHtml = "this is " + closestFeatures[0].Id;
        map.Popups.Clear();
        map.Popups.Add(popup);
    }
 
    string jsonString = string.Empty;
    if (popup != null)
    {
        jsonString = popup.ToJson();
    }
 
    return jsonString;
}

Client Side:


function mapClick(e) {
    var params = { x: e.worldXY.lon, y: e.worldXY.lat };
 
    Map1.ajaxCallAction(’@ViewContext.RouteData.Values[“Controller”].ToString()’, ‘AddPopup’, params, displayPopup);
}
 
function displayPopup(result) {
    var olMap = Map1.getOpenLayersMap();
    for (var i = 0; i < olMap.popups.length; i++) {
        olMap.removePopup(olMap.popups<i>);
    }
 
    var jsonPopup = JSON.parse(result.get_responseData());
    var popupCreator = new Popup(jsonPopup, null);
    olMap.addPopup(popupCreator.element);
}

Hope it works for you.

Thanks,

Troy

#4

Troy, 
  
 Thanks for the explanation and code example.  I was able to get it working with minor modification.  The way that popups work is definitely different than the other aspects of the map, and an explanation is needed.  You might want to consider using your sample code as a basis for an example on the web site or within a youtube video.  I think that a better explanation of how popups work would be very helpful. 
  
 Thanks again, 
  
 Raymond 


#5

Hi Raymond, 
  
 Thanks for your advice.  
  
 Our map is keep enhancement so sometimes for solve some issue we cannot integrate new fix to map control immediately, but we will keep append sample and video after new fix or enhancement get tested and proved to be stable. 
  
 Regards, 
  
 Don