I'm trying to use the mobile version of OpenLayers, unfortunately I could not use framedcloud in it, I could only create a square popup does not look very aesthetic, besides the main need is to identify from a cloud of the associated data points so the popup square is not useful and less use jQuery or another library..

The way we achieve using the square was import popup popup openlayers library, but the trick did not work with framedcloud (firebug says "OpenLayers.Popup.FramedCloud is not a constructor")

<link rel="stylesheet" href="../scripts/OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" >

<script type="text/javascript" language="javascript" src="../scripts/OpenLayers-2.13.1/OpenLayers.mobile.js"></script>
<script type="text/javascript" la language="javascript" src="../Scripts/OpenLayers-2.13.1/lib/OpenLayers/Popup.js"></script>


function putPopup(x, y, html,map) {
        // alert("popup1"+x+" "+y+" "+html)
        map.setCenter(new OpenLayers.LonLat(x, y));

        if (popup) {
        // this.popup = new OpenLayers.Popup("chicken",
                // new OpenLayers.LonLat(x, y), null, html, null, true);


        //popup = new OpenLayers.Popup("chicken",
//                                 new OpenLayers.LonLat(x, y),
//                                 new OpenLayers.Size(120,50),
//                                 html,
//                                 true);

        popup = new OpenLayers.Popup.FramedCloud("Popup", 
            new OpenLayers.LonLat(x, y), null,
            html, null,
            true // <-- true if we want a close (X) button, false otherwise



         //var myPopupClass = new OpenLayers.Class
//              (
//                  OpenLayers.Popup.FramedCloud,
//                  {
//                      'autoSize': true,
//                      'maxSize': new OpenLayers.Size(500,500)
//                  }       
//              );

        // var myPopup = new myPopupClass
//                              (
//                                  "chicken",                                      
//                                  new OpenLayers.LonLat(x, y),
//                                  null,
//                                  html,
//                                  null,
//                                  true
//                              );
//                              map.addPopup(myPopup);  



1 Answer 1


openlayer default in its mobile version does not support the popup, reason why you have to create your own compilation that contains a popup files, see http://docs.openlayers.org/library/deploying.html

What I did was including the following lines in mobile.cfg

OpenLayers / Popup.js
OpenLayers / Popup / Framed.js
OpenLayers / Popup / Framed.js
OpenLayers / Popup / FramedCloud.js
OpenLayers / Popup / Anchored.js
OpenLayers / Popup / AnchoredBubble.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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