Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
NitishSubudhi
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

Hi,

Does Any one have implemented the code of Leaflet map in Project !!!!!
If any one have implemented, please post the sample code.
I have go through the tutorial of this link: http://leaflet.cloudmade.com/index.html 
But don't know where to start.

Help me if any know about the topic. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Please use plain text.
Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

I believe I have some code for using leaflet, but it isn't in my dropbox account. I will post it tonight for you if no one else has any handy sooner.

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Please use plain text.
Trusted Contributor
NitishSubudhi
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

Thanks Rorybarnes,
I have implemented the Google Map in my project but its taking too much time and some times it hangs the simulator.
So for this I have already search some another Maps to implement and I got to know about Leaflet is taking less time to show map in device. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Please use plain text.
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

I got an app to work using the barebones code they supply onsite BUT when I try to use it alongside bbui.js I got an annoying error which won't go away no matter what I try.

 

I'm also interested in seeing this work, work be nice to see it work with bbui.

If it helped you, click like. :smileyhappy:
Please use plain text.
Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

[ Edited ]

Turns out I didn't keep the code for smartphone (the project is being developed for Playbook and DevAlpha now)

 

But the general code is the same as GoogleMaps so this should work on a smartphone as well.. This project didn't use bbUI so I am not sure how it will interact with that.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		
		<title>TestApp</title>
		
		<script src="leaflet/leaflet.js"></script>		
		<link rel="stylesheet" href="leaflet/leaflet.css" />
	</head>
	<body>
<!-- div to put map into --> <div id="map" style="height:300px; width:100%;"></div> <script>
<!-- create the map --> var map = new L.Map('map');
<!-- create an array of markers to put on the map --> var stops =[ {"route_id":42,"stop_id":1977,"stop_dn":"Queens Park At University Avenue Farside","route_dn":"5-Avenue Rd","lat":43.6609115601,"lon":-79.3901672363}, {"route_id":44,"stop_id":2079,"stop_dn":"Bay Street At College Street","route_dn":"6-Bay","lat":43.6609687805,"lon":-79.3860397339}, {"route_id":73,"stop_id":4542,"stop_dn":"College Street At Elizabeth Street","route_dn":"506-Carlton","lat":43.6604118347,"lon":-79.3875808716}, ]; <!-- load the map tile URL (you could replace this with your own provider --> var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/<api key>/997/256/{z}/{x}/{y}.png', cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); map.addLayer(cloudmade); map.locateAndSetView(16);
<!-- add the markers created above to the map --> for (i=0; i < stops.length; i++){ var marker = new L.Marker(new L.LatLng(stops[i]["lat"], stops[i]["lon"])); marker.bindPopup(stops[i]["route_dn"] + ' - ' + stops[i]["stop_dn"]); map.addLayer(marker); }
<!-- function to find current location --> var onLocationFound = function(e) { var radius = e.accuracy / 2; var marker = new L.Marker(e.latlng); map.addLayer(marker); marker.bindPopup("You are within " + radius + " meters from this point");.openPopup(); var circle = new L.Circle(e.latlng, radius); map.addLayer(circle); }
<!-- set function to find currently location to run --> map.on('locationfound', onLocationFound); </script> </body> </html>

 Hope that helps. I haven't tested this on anything but Ripple, I just threw it together from code I know works on PB/DevAlpha let me know if you run into issues that aren't bbUI related.

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Please use plain text.
Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

[ Edited ]

Sadly I can't get my demo to work with bbUI either. Not sure what is causing the issue, I will see if I can find time to look into it.

 

edit: I can see why it is failing now with bbUI, but I can't figure out what is causing it...

Basic issue is leaflet is trying to find the 'map' element and it isn't finding it. It must have to do with how bbUI is working with the DOM.

 

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Please use plain text.
Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

Thanks to Tim Neil's eagle eyes I have a soltuion that works with bbUI now too :smileyhappy: The issue was that Leaflet was trying to initialize itself before the DOM was ready (and therefore the div wasn't in place yet). Once the map create stuff was moved to a function that is called by ondomready in bbUI everything loads fine.

 

You'll notice I am using bbUI 0.9.4, this should work with 0.9.3 as well.

 

index.html:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi" />
		
		<title>TestApp</title>

<script src="leaflet/leaflet-src.js"></script> <script src="bbui-0.9.4.js"></script> <script> var params = { ondomready : function(element, id) { if (id == 'map_screen') { create_map(); } } } bb.init(params); </script> <link rel="stylesheet" href="leaflet/leaflet.css" /> <link rel="stylesheet" href="bbui-0.9.4.css" /> </head> <body onload="bb.pushScreen('map_screen.html', 'map_screen');"> </body> </html>

 map_screen.html:

	<div data-bb-type="screen" data-bb-effect="fade">
		<script src="map_screen.js" id="map_screen_js"></script>
    	<div data-bb-type="title" data-bb-caption="Map Example" ></div>
		<div id="map" style="height:300px; width:100%;"></div>
	</div>

 map_screen.js:

		function create_map(){
			var map 			= new L.Map('map');
			var stops			=[
									{"route_id":42,"stop_id":1977,"stop_dn":"Queens Park At University Avenue Farside","route_dn":"5-Avenue Rd","lat":43.6609115601,"lon":-79.3901672363},
									{"route_id":44,"stop_id":2079,"stop_dn":"Bay Street At College Street","route_dn":"6-Bay","lat":43.6609687805,"lon":-79.3860397339},
									{"route_id":73,"stop_id":4542,"stop_dn":"College Street At Elizabeth Street","route_dn":"506-Carlton","lat":43.6604118347,"lon":-79.3875808716},
									];

			var cloudmadeUrl	= 'http://{s}.tile.cloudmade.com/<api_key>/997/256/{z}/{x}/{y}.png',
			    cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
			    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});


			map.addLayer(cloudmade);	
			map.locateAndSetView(16);

			for (i=0; i < stops.length; i++){
				var marker = new L.Marker(new L.LatLng(stops[i]["lat"], stops[i]["lon"]));
			    marker.bindPopup(stops[i]["route_dn"] + ' - ' + stops[i]["stop_dn"]);
				map.addLayer(marker);
			}
			
			var onLocationFound = function(e) {
			    var radius = e.accuracy / 2;

			    var marker = new L.Marker(e.latlng);
			    map.addLayer(marker);
			    marker.bindPopup("You are within " + radius + " meters from this point");//.openPopup();

			    var circle = new L.Circle(e.latlng, radius);
			    map.addLayer(circle);
			}
			
			map.on('locationfound', onLocationFound);
		}

 No explanations in this one, but they are basically the same as the one above.

 

Hopefully this helps you out,

Rory

 

 

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Please use plain text.
Trusted Contributor
NitishSubudhi
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

Thanks rorybarnes for your Help.
I am trying this code you have given.Hope it will work fine
Thanks a lot. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Please use plain text.
Trusted Contributor
NitishSubudhi
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

Hi rorybarnes,
I have implemented the code which you have suggested.
But I am not getting the Map inside the div tag.
I think the simulator is not getting the response.

Here is the output which I am getting:

LeafletMap 

 

Can You Please send the Sample Project of Leaflet Map implemented.
Its very important for me to use this map in my project. 

Thanks & Regards,
Nitish Subudhi

Feel Free To Press The Like Button On The Right Side To Thank The User That Helped You.
Please Mark Posts As Solved If You Found a Solution.
Please use plain text.
Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: Does Anyone Implemented Leaflet Map in Webworks Project For Smartphone?

The image isn't showing up for me yet, so I can only guess at this point.

 

Do you have an <access> element for the maps in your config.xml

i.e.:  <access uri="http://www.cloudmade.com/" subdomains="true">

 

Beyond the config.xml you have the exact code I am working with in this post. Are there any errors in web inspector?

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Please use plain text.