ThinkGeo.com    |     Documentation    |     Premium Support

Mouse over marker and increase the size of the marker using Javascript

#1

Hi Thinkgeo,


Is there way to increase the size of the marker (or poin to  larger icon) when the mouse hovers over a marker ( in a InMemoryMarkeOverlay) using JavaScript?


Regards,


Anil



GoogleMap Overlay licence
#2

 


Hi Anil,
Yes, it’s possible. The point is how to register the “MouseHover” event and redraw the layer. Please check the code below:
    <script language="javascript" type="text/javascript">
        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('mouseover', marker, function (evt) {
                    // Todo: Get the marker image here
                    var markerIcon = marker.icon;
                    markerIcon.size = new OpenLayers.Size(60, 60);
 
                    // Find the MarkerLayer and refresh
                    var layer = map.getLayer(marker.parentId);
                    layer.redraw();
                });
            }
        }
    </script>
 
Thanks,
Johnny

#3

Hi Khalil,


Sample works ok. However I noticed  following:


1) Marker Icon size obtained in Javascript is null even though the icon has size 27 X 27 pixels.


2) I added 'mouseout' handler to restrore the size back to 27X27 but the actual size seems to much smaller than orginal size. Those markers that were explicitly set with size value have this problem. Those that weren't set with size value display Ok with correct size.


Regards,


Anil



#4

Hi, Anil


If you are utilizing the workaround code we provided for you in the post below and the size of Icon is null definitely.
gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/12/aft/8472/afv/topic/Default.aspx
If the size is null or undefined, also we can get it through the image div that represent the icon image. Please refer to the codes for detailed information.
        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.on({
                    'mouseover': function (evt) {
                        this.originalSize = this.icon.size;
                        if (!this.originalSize) {
                            this.originalSize = new OpenLayers.Size(this.icon.imageDiv.clientWidth, this.icon.imageDiv.clientHeight);
                        }
                        this.icon.setSize(this.magnifiedSize);
                    },
                    'mouseout': function (evt) { this.icon.setSize(this.originalSize); },
                    scope: marker
                });
            }
 
            OpenLayers.Marker.GeoMarker = OpenLayers.Class(OpenLayers.Marker.GeoMarker, {
                originalSize: null,
                magnifiedSize: new OpenLayers.Size(50, 50)
            });
        }
 
If you have additional questions, please let us know.
Thanks,
Khalil

#5

Thankx a lot. It works!!

#6

That’s great. Please let us know if you have additional questions about our products. 
  
 Thanks, 
  
 Khalil

#7

Hi Thinkgeo, James, Khailil, 
  
 On mouse hover the image icreases in size but the Popup (Cloud style) does not point to the correct location. The callout arrow of the cloud popup is way off. I tried to use OffsetYInPixels and OffsetXInPixels to decrease by the maginified size but it does not help.  
  
 Note:  I want to able to increase size of marker but also need accuracy where the popup points. 
  
 Regards, 
 Anil

#8

Hi James, Khalill, 
  
 The problem "Popup offset" seems to be caused one I use ClusterMarkerStyle (refer thread) 
  
 gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/12/aft/8701/afv/topic/Default.aspx 
  
 Regards, 
 Anil 
  


#9

Anil, 
  
 Thanks for you more information, we will fix the issue "popup offset" and reply at post 8701. 
  
 Thanks, 
 James