ThinkGeo.com    |     Documentation    |     Premium Support

How to access column data on marker features objects in JavaScript?

#1

HI ThinkGeo,


How to access column data on marker' feature objects in JavaScript?


I want to display Popup (populated with Marker column data) using JavaScript.


Regards,


Anil



#2

Hi ThinkGeo, 
  
 The reason I am asking the above questions is that if I were to create popup for each marker (containing about 6-10 columns) the performances degrades.  It is okay when I have about 20-25 but when I have over 40-50 markers the performance degrades. 
  
 Regards, 
 Anil

#3

 


Anil,
 
I would like know which markoverlay do you use. SimpleMarkerOverlay or InMemoryMarkerOverlay? If it’s the previous, it will degrade performance when  you add dozens of markers and your popups information are much. So we strongly recommend you to use InMeoryMarkerOverlay and ClusterMarkerStyle intead of SimpleMarkerOverlay. If you want to add a different style to each marker, you can create a style class inherited from MarkerStyle. 
 
Here are 2 threads you can refer to:
gis.thinkgeo.com/Support/Dis...fault.aspx
gis.thinkgeo.com/Support/Dis...fault.aspx
 
Thanks,
James

#4

Hi James, 
  
 I am using InMeoryMarkerOverlay with  CustomMarkerStyle (inherited from MarkerStyle) with each popup associated with at least 5 Feature colum data attributes. It so happens I have about 75+ markers in the extent. If I remove popup temporarily then performance is good.  
  
 Looks lilke I have to add popup on Click of marker on ClientSide. I wanted to check if there is JavaScript API to get Feature column data or may be get it using Callback to server to get column data. 
  
 Regards, 
 Anil

#5

Hi James, 
  
 If I  MarkerOverlay is InMemoryMarkerOverlay and then I try to access list of markers using JavaScript as shown below, I get 0 markers. 
  
 Regards, 
 Anil 
  
 

var OnMapCreated = function(map) {
            // MarkerOverlay is the id for your SimpleMarkerOverlay
            var markerOverlay = map.getLayer(‘MarkerOverlay’);
            document.getElementById(map.clientId).oncontextmenu = function() { return false; };
            for (var i in markerOverlay.markers) {
                var marker = markerOverlay.markers[i];
                marker.events.register(‘mousedown’, marker, function(evt) {
                    // Right click
                    //if (evt && evt.button == 2) 
                    if (evt && evt.button == 1) {
                        var id = this.id;
                        // Add your popup like the code below:
                        AddPopup(this, id, this.lonlat.lon, this.lonlat.lat);
                    }
                });
            }
        }
 

#6

 


Anil,
 
Sorry, I didn’t give you a sample to depict the usage of InMemoryMarkerOverlay and ClusterStyle. You need not to use javascript. There is a better way to do this. If you use InMemoryMarkerOverlay and ClusterStyle, the map don’t load the popups data firstly, it will request the server and create popups only when your mouse hovers over the markers.
 
Thanks,
James

Post8701.zip (119 KB)

#7

Hi James, 
  
 Thanks the ClusterMarkerStyle works great. However I notice one problem that Popup is offset when I use image magnification on mouse hover. 
  
 Refer 
 gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/12/aft/8481/afv/topic/Default.aspx#23392 
  
 Regards, 
 Anil

#8

Hi James,


If I have number of markers then sometimes it shows two-three markers. Problem becomes worse if I have to display 4-5 column data.


See attached picture and source code file.


Regards,

Anil



Default.aspx_Post8701.zip (1017 Bytes)
CloseMarrkerMultiplePopups.zip (61.6 KB)

#9

 


Anil,
 
The offset is all right. The popup’s position depends on the marker icon. The marker icon grow bigger, so the popup’s position changed. If you would like to  retain popup’s original position, you can use the properties OffsetYInPixels andOffsetXInPixels. You can set a appropriate value for them according to your need. Just like the code blow.
 
                PointMarkerStyle markerStyle = new PointMarkerStyle();
                markerStyle.Popup.ContentHtml = "Kansas City";
                markerStyle.Popup.HasCloseButton = true;
                markerStyle.Popup.OffsetYInPixels = -40;
 
when the mouse hovers over a marker, the popup shows up, and then the mouse move to another close marker, the new popup shows up, so the two popups exist at the moment, but the previous one disappeared after about 1 second. I think it’s OK.
 
Thanks,
James

#10

Hi James, 
  
 I tried using value of (-25 being different in magnified and orighinal size different) for OffsetYInPixels and OffsetXInPixels but it does not work correctly (sometimes the callout pointer location is on left or right) depending on the orientation of the popup. I already metioned in my other Posting. 
  
 Regards, 
 Anil

#11

 


Anil,
 
OffsetXInPixels and OffsetYInPixels depends on pixels, so it should not be different in magnified and original marker. The popup’s position is depending on the marker’s position in the screen. If the marker is in the left of screen, the popup will display in the right of screen, and vice-versa.
Here are 2 screenshots. You may have a look and will understand why.
 
Thanks,
James