Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

On http://gis.stackexchange.com/a/19979/19654 i found a solution to add hover / mouseovers to my map:

       // add code to create tooltip/popup
       popup = new OpenLayers.Popup.FramedCloud(
          "",
          feature.geometry.getBounds().getCenterLonLat(),
          null, //new OpenLayers.Size(320,20),
          "<div>" + feature.attributes['name'] + "</div>",
          null,
          true,
          null);

       feature.popup = popup;

Doing this i found the popup don't have a nice / clean layout, see:

enter image description here

I tried with a fixed size too (new OpenLayers.Size(320,20)) which seems to have the same effect.

So, my question would be if someone has a cleaner/easier/nicer way to improve this? Thanks in advance for any hint on this.

share|improve this question
    
Welcome to GIS Stack Exchange! I hope you don't mind me mentioning it but your Question comes across as a statement. To make it obvious what is being asked I recommend that every Question has one (preferably only one) question mark in its Title and Body. –  PolyGeo Jul 2 '13 at 9:45
    
@PolyGeo. Thanks. –  Bass Jobsen Jul 2 '13 at 11:39
1  
Chances this problem occurs, because that you changed the css. Compare you css and openlayers in Firebug. –  novicegis Jul 4 '13 at 6:37

2 Answers 2

It is of course a css issue.

I experienced a same issue by making my images responsive with max-width: 100%; css instructions on img tag.

I solved my problem specifying max-width value for my specific class/id element, like so :

.map img {
    max-width:none;
}
share|improve this answer

novicegis suggest to the problem has to do with css. I use OL with jQuery Mobile (1.3.0) but i didn't found any interaction between the style rules of OL and JQM.

After this i found a working example on: http://terokarvinen.com/2012/framedcloud-popup-with-textfile-openlayers

Calls the popup with:

    popup = new OpenLayers.Popup.FramedCloud("chicken",
    feature.geometry.getBounds().getCenterLonLat(),
    new OpenLayers.Size(100,100),
    content,
    null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);

It use a size for the image. I also found the OL css will be injected by javascript where i insert it in the project before the javascript. After remove the css from source and install the latest version of OL (2.13) it works. Maybe the problem was ../img/cloud-popup-relative.png was unreachable or corrupt.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.