Android webview with leaflet

1,846 views
Skip to first unread message

Bikash Patra

unread,
Sep 3, 2012, 7:18:14 AM9/3/12
to leafl...@googlegroups.com
Why do I get the map rendered as shown in attachment.
What should I do , so that I can have full screen of the map and be able to move by dragging the map as we do on leaflet example screens.
Please help
device-leaflet.png

Jason Sanford

unread,
Sep 3, 2012, 9:20:20 AM9/3/12
to leafl...@googlegroups.com
Are you referencing leaflet.css as in the examples?

--
 
 
 

Bikash Patra

unread,
Sep 5, 2012, 4:13:55 AM9/5/12
to leafl...@googlegroups.com
Yes, I have renferenced leaflet.css but I have placed css inside a folder by name css-js

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css-js/leaflet.css">
<link rel="stylesheet" href="css-js/jquery.mobile-1.0.1.css">
<link rel="stylesheet" href="css-js/jquery.mobile.structure-1.0.1.css">
<link rel="stylesheet" href="css-js/location.css">
<script type="text/javascript" src="css-js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="css-js/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="css-js/leaflet-src.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" src="css-js/location.js"></script>
</html>

MathieuB

unread,
Sep 5, 2012, 9:12:07 PM9/5/12
to leafl...@googlegroups.com
Are you putting leaflet css and js inside the assets folder with your html file?

You should try putting all files directly in the /assets root

Bikash Patra

unread,
Sep 6, 2012, 4:54:25 AM9/6/12
to leafl...@googlegroups.com
MathieuB,
  If path would have been problem the css would not have been applied at all. But if you look at the attached image
the + & - buttons have CSS applied.

Correct me if I am wrong.

MathieuB

unread,
Sep 6, 2012, 8:43:27 AM9/6/12
to leafl...@googlegroups.com
Yeah you're right. But since i'm using leaflet in a webview in my android native app, I just told you the way it worked for me.

I saw you were loading jquery mobile, maybe this cause a problem there too. It seems that some css properties are getting overwritten and it scrambled the map.

Sorry, not sure how to help further.

Bikash Patra

unread,
Sep 6, 2012, 12:40:26 PM9/6/12
to leafl...@googlegroups.com
Sure Mat, let me give a try to your way too.

Will come back on this. 

Thanks.
Reply all
Reply to author
Forward
0 new messages