PhoneGap with Openlayers in Iphone

Noli Sicad

unread,

Mar 18, 2011, 6:37:04 PM3/18/11

to phonegap

Hi,

I am trying to use PhoneGap with Openlayers in Iphone dev. I can't
load the openlayers Map. Is openlayers supported in PhoneGap? I saw in
the archive that it seems that openlayers works in PhoneGap?

What version of PhoneGap is overlayers works? I am using phonegap.
0.9.4.min.js and phonegap.0.9.4.js and it seems no difference. It is
not loading the map.

Here is the code (below), What is wrong with code if the Openlayers is
supported in PhoneGap.

What needs to be done for PhoneGap to support Openlayers? I see some
posting that PhoneGap works with MapKit (Google Map API).

Thanks.

Noli

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!DOCTYPE html">
<html>
<head>
<title>SimpleIOL Demo: IOL</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, minimum-
scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="openlayers/theme/default/style.css"
type="text/css">

<script type="text/javascript" charset="utf-8" src="phonegap.
0.9.4.min.js"></script>

<link rel="stylesheet" href="style.css" type="text/css">
<script src="../script/OpenLayers.js"></script>
<script src="../script/iol.js"></script>
<script type="text/javascript" charset="utf-8">

function onBodyLoad()
{
var map = new OpenLayers.Map({
div: "map",
controls: [
new IOL.Control.Navigation({
zoomWheelEnabled: false,
dragPanClass: IOL.Control.DragPan,
dragPanOptions: {
handlerClass:IOL.Handler.Drag,
interval: 25
}
})
],
numZoomLevels: 7
});

var wms = new OpenLayers.Layer.WMS(
"Blue Marble",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble", format: "image/png"},
{buffer: 0, transitionEffect: "resize"}
);

map.addLayers([wms]);

// set map to something to look at
map.setCenter(new OpenLayers.LonLat(-111, 46), 3);

document.addEventListener("deviceready",onDeviceReady,false);
}

/* When this function is called, PhoneGap has been initialized and is
ready to roll */
function onDeviceReady()
{
// do your thing!
}

</script>

</head>

<body onload="onBodyLoad()">

</body>
</html>

Tue Topholm

unread,

Mar 18, 2011, 8:06:06 PM3/18/11

to phon...@googlegroups.com, Noli Sicad

Hi Noil

It works super in phonegap....

but put your into the onDeviceReady instead... and check your paths to
your javascripts, they seems to be off... (You just c&p from the
samples right ;-))....

And when you got this running use, the newest trunk (Openlayers) you
can get, it is much better than IOL.js when it comes to touch
events....

--

Med venlig hilsen / Kind regards

Tue Topholm
Sugee
Tlf: +45 32 13 32 32
W: http://www.sugee.dk

2011/3/18 Noli Sicad <nsi...@gmail.com>:

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>

Noli Sicad

unread,

Mar 18, 2011, 8:36:42 PM3/18/11

to Tue Topholm, phon...@googlegroups.com

Hi Tue,

Thanks for your reply.

Yes, I was trying to run the openlayers jquery example in the mobile
openlayers. I got blank map.

Tue, probably you can do me a favour and the whole Phonegap community.

Please hack this simple example openlayers below to run in Phonegap.

Let hack this one and see if we can get Phonegap and overlayers working.

Post you hack and I will do the testing.

I will try to hack this example as well

Thanks,

Noli,

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://openlayers.org/dev/examples/osm.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenLayers Basic Single WMS Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../OpenLayers.js"></script>

<div id="tags">
openstreetmap basic
</div>

<div id="shortdesc">Show a Simple OSM Map</div>

<div id="docs">
This example shows a very simple OSM layout with minimal controls.
</div>
</body>
</html>

Noli Sicad

unread,

Mar 18, 2011, 9:41:42 PM3/18/11

to Tue Topholm, phon...@googlegroups.com

Hi Tue,

I tried again using a simple example in openlayers.

I still got the blank map i.e. no map at all. Just the text. No even a
reserve space for the map.

You are saying that you manage to run openlayers with Phonegap, what
version of Phonegap it was running? Could you send me the running
openlayers project or probably this one, if you can run it.

Please run this mobile openlayers one that you mentioned and see if
you can run this code.
I already put all the files in the same directory (see the code below).

Here is the code (below), updated with the mobile openlayers.

Anybody got opinion why this code does n't work?

I am using Mac OS X 10.6.4, 4.2 SDK. The latest svn openlayers.

Thanks,

Noli

~~~~~~~~~~~~~~~~~~~~

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta name="viewport" content="width=default-width; user-scalable=no" />

src="phonegap.0.9.4.min.js"></script>

var map, layer;
function init(){
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
}

function onBodyLoad() {

document.addEventListener("deviceready",onDeviceReady,false);
}

/* When this function is called, PhoneGap has been initialized and is
ready to roll */
function onDeviceReady()
{

init();

}
</script>

</head>
<body onload="onBodyLoad()">

<h1 id="title">Basic OSM Example</h1>

Tue Topholm

unread,

Mar 19, 2011, 7:25:47 PM3/19/11

to Noli Sicad, phon...@googlegroups.com

Hi Noli

I will try it on Monday on my machine...

but can you get anything to work, is onDeviceReady triggered....

--

Med venlig hilsen / Kind regards

Tue Topholm
Sugee
Tlf: +45 32 13 32 32
W: http://www.sugee.dk

2011/3/19 Noli Sicad <nsi...@gmail.com>:

Noli Sicad

unread,

Mar 19, 2011, 7:59:44 PM3/19/11

to Tue Topholm, phon...@googlegroups.com

Hi Tue,

Please do.

Hope to iron out this thing.

Looking forward to see a running Openlayers in iPhone in Xcode + Phonegap.

I will have another go later today. This time I will use the online
resources - mobile openlayers (below).

You can probably use this one as well.

Thanks.

Regards, Noli

~~~~~~~~~

Robert Fletcher

unread,

Mar 19, 2011, 8:05:50 PM3/19/11

to phon...@googlegroups.com

is phonegap.js in your root folder?

Usman

unread,

May 16, 2011, 4:38:52 AM5/16/11

to phon...@googlegroups.com

Hey Noli,
Now I encounter the same problem of not getting the map on Ipad, how did you solve the issue after working with the same code you pasted?
Regards

Reply all

Reply to author

Forward

PhoneGap with Openlayers in Iphone - Map not loading

Noli Sicad

Tue Topholm

Noli Sicad

Noli Sicad

Tue Topholm

Noli Sicad

Robert Fletcher

Usman