ThinkGeo.com    |     Documentation    |     Premium Support

Attach Javascript function to marker click event

#1

Hi,


Is there anyway to attach a javascript function to the marker click event inside InMemoryMarkerLayer? The javascript function will be called when the marker is clicked?


Thanks.


Best Regards,


YV



#2

YV, 
  
 We don’t have server-side APIs for your requirements, but you can implement it on the client side. Please copy the following script to the header tag of the aspx page.  
 PS: “Markers” is the overlay Id we defined on the server side. 
  
 
        function OnMapCreated(map) {
            var inmememoryMarkerLayer = map.getLayer(“Markers”);
            inmememoryMarkerLayer.events.register(‘click’,inmememoryMarkerLayer,function(e){alert(‘marker clicked’);});
            }    
 
  
 Thanks, 
  
 Ben 


#3

Hi Ben,


Thanks for the reponse.


What properties can I access from the event argument "e"? Is there any way to access the clicked feature ID or column values from the event handler?


Thanks.


Best Regards,


YV



#4

YV,


The clicked feature ID or column values cannot be got from the argument "e". You can get the selected marker by the following script, its id equals to feature’s id. We can’t get the columnValue only with script as that will transfer too much data to the client side, you can use callback to get it if you want.

        var selectedMarker = null;
        var olMap;
        
        function markerClick(e) 
        {
            var iconId = e.srcElement.parentNode.id;
 
            for (var i = 0; i < this.markers.length; i++) {
               if (this.markers[i].icon.imageDiv.id == iconId) {
                    selectedMarker = this.markers[i];
                }
            }
        }
 
        function OnMapCreated(map) {
            olMap = map;
            var markerOverlay = olMap.getLayer("Markers");
            markerOverlay.events.register('click', markerOverlay, markerClick);
        }  

Thanks,


Ben



444-Post5327Script.txt (665 Bytes)

#5

Hi Ben,


I have followed your method to attach a javascript funtion to the marker click event. Is there any way to change the mouse cursor on the marker from the default arrow style to the pointer style (a hand sign)?


I have tried to use "markerOverlay.events.register('mouseOver', markerOverlay, markerMouseOver);" and set the style.cursor to pointer inside markerMouseOver but it doesn't work.


Thanks.


Best Regards,


YV



#6

Hi YV,


Events here are attached on a DOM tree Node and ‘mouseOver’ is an incorrect event type, please try ‘mousemove’ and 'mouseout’ instead; hope it helpful.


If you have any questions please let me know.


Thanks,

Howard



#7

Hi Howard,


Thanks. it works.


I have another question. The "click" and "mousemove" events work in IE7 & IE8 but not FireFox, is there any way to make it work in FireFox?


Thanks.


Best Regards,


YV



#8

YV, 



I tested in Firefox 3.0.10, and it works fine; could you tell us which version are you using. On the other hand, the markers which you added into marker overlay may conflict with the other events; could you provide us the client script which I need to test with.



By the way, ‘mouseover’ is a correct event type which you need to make them all lower case and your script will be fine. Marker object also can attach JavaScript event as the overlay does.markers.events.register('mouseover', markers, function(e){
alert('mouseover');
});
If you have any questions please let me know.



Thanks,



Howard



#9

Hi Howard,


I'm using Firefox 3.0.10.


Here is the javascript code:


 


function OnMapCreated(map) {

    var markerOverlay = map.getLayer("MarkerOverlay");

    markerOverlay.events.register('click', markerOverlay, markerClick);

    markerOverlay.events.register('mouseover', markerOverlay, markerMouseOver);

}


function markerMouseOver(e) {

    e.srcElement.parentNode.style.cursor = 'pointer';

}


function markerClick(e) {

    var iconId = e.srcElement.parentNode.id;


    for (var i = 0; i < this.markers.length; i++) {


        if (this.markers.icon.imageDiv.id == iconId) {

            // Do something here

        }

    }

}


 


It seems like that e.srcElement.parentNode is not the correct object that the event handler should act on for Firefox.


Thanks.


Best Regards,


YV



Screen coordinates on mousemove
#10

YV,



I see your code and make some change, it works fine in IE and firefox now. If you have any questions please let me know.
var hoverImg = null;
function OnMapCreated(map) {
    var markerOverlay = map.getLayer("MarkerOverlay");
    markerOverlay.events.register('click', markerOverlay, markerClick);
    markerOverlay.events.register('mousemove', markerOverlay, markerMouseOver);
}

function markerMouseOver(e) {
    var target = null;
    if (e.target != undefined) {
        target = e.target;
    } else {
        target = e.srcElement;
    }
    if (target) {
        target.style.cursor = 'pointer';
        hoverImg = target;
    }
}

function markerClick(e) {
    var iconId = hoverImg.parentNode.id;
    for (var i = 0; i < this.markers.length; i++) {
        if (this.markers[i].icon.imageDiv.id == iconId) {
            // Do something here.
        }
    }
}

Thanks,



Howard



#11

Hi Howard,


Great, it works!


Thanks.


Best Regards,


YV



#12

YV, 
  
 You are always welcome; please feel free to ask if you have more questions. 
  
 Thanks, 
 Howard

#13

Hi Howard,


I would like to add the same javascript client function to a InMemoryFeatureLayer. Could you please show me how to do that?


There are several Point shapes with different bitmap image file son the InMemoryFeatureLayer. I would like to add the javascript client function to each of these point shapes, and in the event handler, I will be able to access the feature id.


The javascript function that are working fine in the InMemoryMarkerLayer doesn't work in the InMemoryFeatureLayer.


Thanks.


Best Regards,


YV



#14

YV,  
  
 Actually, InMemoryfeatureLayer is not a node of the DOM tree in the HTML page so that it can not trigger client event on the client side. In another word, I’ve no idea to change the cursor when hoverring on a feature of server object. 
  
 You can try to use our HighlightOverlay which draws on client side, I think these client element can satisfy your requirement. But one thing to be aware of is that, if the features’ count is too many, it will cause some performance issue on the client side; which you know if the DOM tree node is too many, any browser will crash. 
  
 You can find some demos for highlight overlay in our installed sample at “samples/overlays/highlightAFeatureWhileHovering”, “samples/overlays/addAClickEventToAnHighlightOverlay”, “samples/overlays/addAContextMenuToAnHighlightOverlay”. 
  
 Hope it helps. 
  
 Thanks, 
 Howard 
  
  


#15

Hi Howard,


Thanks for your response.


Which layer has a better performance when rendering many objects on the map, InMemoryMarkerLayer or HighlightOverlay?


Thanks.


Best Regards,


YV



#16

YV, 
  
 HighlightOverlay will download all the features from server side to the client side, InMemoryMarkerLayer will draw the features on the server and just transfer the rendered image to map, so you can see the InMemoryMarkerLayer has a better performance.  
  
 Thanks, 
  
 Ben

#17

Hi Ben, 
  
 Thanks for your response. 
  
 Best Regards, 
 YV

#18

That’s my pleasure, YV. :)

#19

Hi, 
  
 I have one question regarding the performance of the InMemoryMarkerLayer.  
  
 Currently I’m plotting 500 plus markers on the InMemoryMarkerLayer. The map will refresh itself and replot these 500 markers in a short interval. I have removed the popup for the markers to make the refresh complete faster. The performance is better comparing to the marker with popup but the customer is still not satisfied yet. 
  
 Is there other way to enhance this further? 
  
 Will the Silverlight version or the Desktop version of Map control give a better performance for this kind of situation? 
  
 Best Regards, 
 YV 


#20

Hi YV, 
  
 You know, Marker is a DOM tree node displayed on the client side; the larger the DOM three is, the lower performance the client have. The core resolution is to reduce the count of markers displayed in one viewport. 
  
 I have two recommendations for you here. 
 1. We have “SuppressingGridSize” property to set a invisible grid on the map, the bigger the size you set the more markers will be suppress; for example setting the size to 50;  
 Marker is a point shape on the map which can trigger event and hover popup. That’s the difference between marker overlay and layer. If there too many markers crowd together, it’s hard to be clicked and trigger the click event on the correct marker, so suppress the count of marker is an easy option for you. 
  
 2. Use InMemoryFeatureLayer instead of InMemoryMarkerOverlay instead. In this way, the markers are rendered on the image and the DOM tree just maintain only one node which can make the performance fine.  
  
 We are now investigating the Clustering markers which may integrate in our future version. 
  
 Silverlight and Desktop edition has better performance; we have an installed sample in both Silverlight and Desktop edition which you can find under “\Samples\Features\RefreshPointsRandomly.xaml.cs” in Silverlight and “\CSharp Winforms How Do I Samples\Dynamic Shapes\RefreshPointsRandomly.cs” to show it, please feel free to try. 
  
 Any questions please let me know. 
  
 Thanks, 
 Howard