InMemoryMarkerOverlay Client Side Click

[Tiftik]

 Hi,

I am trying to catch the click event whenever the user clicks on a Marker in InMemoryMarkerOverlay. I have tried to use the code that is suggested for SimpleMarkerOverlay.

 
    var OnMapCreated = function ( map ) {
        
        var markerOverlay = map.getLayer('InMemoryMarkerOverlayId');
        
        for (var i in markerOverlay.markers) {
            var marker = markerOverlay.markers[i];
            
            marker.events.register('click', marker, function (evt) {
                var id = this.id;
                alert(id);
            });
        }
    }


I tested this using both SimpleMarkerOverlay and InmemoryMarkerOverlay. It works fine with Simple but not with InMemory(script is placed at the end of body tag). The reason is OnMapCreate gets called before the Markers are added to the overlay while using InMemory. I guess it is because of the dynamic Ajax optimization of the InMemoryMarkerOverlay. So I tried registering the click events manually after page load and it worked but this time when the user drags the map or uses zoom the markers are not clickable anymore(again probably because of Ajax modifies markers?).

I wanted to use InMemoryMarkerOverlay because of performance but it looks like it is going to create a lot of problems for me since my work includes lots of click events. Is there a workaround for this or should I switch to SimpleMarkerOverlay?

Thanks.

[Gary2]

Hello Tiftik,

Sorry for waiting, just as you mentioned, it’s caused by the dynamic Ajax optimization, the “OnMapCreated” is called only once when first loading the map control, but the markers are loaded in a Ajax callback function once we pan or zoom the map. That’s why the click event registered is not raised if we click on the marker.

The workaround is that we can overwrite the client addMarker function of the “OpenLayers.Layer.Markers” to register  click event for each marker, please check it shown below:


var OnMapCreating = function(map){
   OpenLayers.Layer.Markers.prototype.addMarker = function(marker){
        this.markers.push(marker);

        if (this.opacity != null) {
            marker.setOpacity(this.opacity);
        }

        if (this.map && this.map.getExtent()) {
            marker.map = this.map;
            this.drawMarker(marker);
        }
       marker.events.register(‘click’,marker,function(evt){
alert(“”);
});
}
}

Regards,

Gary

[alireza]

hi ,

in map i have a CustomOverlays , and to this i add 4 "staticOverlay"

how can i access feature of “staticOverlay” with “OnMapCreated” java script"



my server side code is :



FeatureLayer worldLayer = (FeatureLayer)((LayerOverlay)Map1.CustomOverlays[1]).Layers[“WorldLayer”];

            worldLayer.Open();

            Collection<ThinkGeo.MapSuite.Core.Feature> selectedFeatures = worldLayer.QueryTools.GetFeaturesContaining(e.Location, new string[2] { “ID”, “NAME” });

            worldLayer.Close();





            if (selectedFeatures.Count > 0)

            {

                var feature = selectedFeatures[0];

                string id = feature.ColumnValues[“ID”];

                string name = feature.ColumnValues[“NAME”];



                ScriptManager.RegisterStartupScript(this, GetType(), “displayFunction”, string.Format(“displayFeature(’{0}’,’{1}’);”, id, name), true);

            }



thanks

[Ethan]

Hi Alireza, 
  
 The client side don’t contains the object feature, it only contains many tiles image. 
  
 So what you can do is only get the mouse coordinate and pass that back to server side, then do some operataion in server side. 
  
 The code as below shows how to get target layer in client side: 
  
 Server: 
 LayerOverlay overlay = new LayerOverlay(“MyTestOverlay”); 
  
 Client: 
  
  var OnMapCreated = function (map) {             
 map.getLayer(“MyTestOverlay”);             
         } 
  
 Regards, 
  
 Don 

[alireza]

thanks



Not even be get polygon id in javascript (find feature id with latlon or any way) ??



thanks

[Ethan]

Hi Alireza, 
  
 Just like I said, for our featurelayer, the client side don’t contains anything like polygon, line or point, you can only get many images, they are tiles which all the shapes had been drawn on it in server side. 
  
 You get the latlon, then in server side, you can do spatial query to make sure which polygon is you are clicked on. 
  
 The other way for that is create everything in client side, you can create OpenLayers layer, Openlayers polygon etc. You can handle them in client side. But follow this way you need to write many Javascript code. 
  
 Regards, 
  
 Don