ThinkGeo.com    |     Documentation    |     Premium Support

Attach Javascript function to marker click event

#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

#21

Hi Howard, 
  
 1. I can’t find the “SuppressingGridSize” from the API Documentation. Which object does this property belong to? 
  
 2. I have replaced the InMemoryMarkerOverlay with the InMemoryFeatureLayer. The performance gain is not so significant and it can’t trigger event and hover popup. 
  
 3. For the Desktop version, I can’t find the Marker Layer, only InMemoryFeatureLayer. Is there any plan to implement the marker layer? 
  
 4. For the Silverlight version, the sample “RefreshPointsRandomly” is using InMemoryFeatureLayer and the points position are updated on the client side (simply by increment and decrement the current position). In my application, the points position are updated from the database. If I use InMemoryMarkerLayer and using Web Service to retrieve the points position from the database, will the Silverlight version perform better than the Web version? And also, will the Silverlight version suffer the same performance degradation when there are many markers? 
  
 Thanks. 
  
 Best Regards, 
 YV

#22

YV, 



1.    “SuppressingGridSize” is supported in InMemoryMarkerOverlay and FeatureSourceMarkerOverlay. You may not use our latest version 3.1.124. We have a online API documentation which you can find at:

gis.thinkgeo.com/mapsuite3docs/webedition/

Also here is how to use it.inMemoryMarkerOverlay.SuppressingGridSize = 50;


2.    Could you tell me how many markers exists in one viewport normally in your application? Technically, using MarkerOverlay effects more performance of Client’s Web browser’s performance while using InMemoryFeatureLayer costs more time for rendering. If using InMemorymarkerOverlay is not very compatible for you, please try “SuppressingGridSize” first, it’s complicate to use JavaScript and callback stuff.



3.    Desktop may not have this plan to add marker layer; for point layer is marker layer in Desktop edition; it does anything which marker overlay can. In web edition, the implement is a little difficult for normal user, so that we wrap it and expose this method for easily using.



4.    Silverlight Edition doesn’t support MSSQLFeatureSource by now which will be enhanced in the further version, you need to get the data to the client by web service or WCF first and then and into the InMemoryMarkerOverlay; the performance is good as the sample. General speaking, Silverlight still maintains a DOM tree on the client-side which means the more DOM tree nodes the lower performance you get; but it’s much more better than web which you can verify in our samples.



If you have any questions please let me know.



Thanks,

Howard



#23

Hi Howard, 
  
 Thanks for the suggestions. 
  
 Best Regards, 
 YV