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
New Contributor
Posts: 5
Registered: ‎02-21-2013
My Device: Blackberry Z10
My Carrier: Rogers

Add Maps into existing App?

Im quite familiar with building a app with HTML now and figured out the basics. But i cant seem to get the Mapa to work properly on my exising app.

I can get it to work on its own in ripple but when i transfer the code over nothing appears.

I have it so when you click the maps tab..it should open up.

 

Any ideas?

Developer
Posts: 281
Registered: ‎05-31-2012
My Device: Playbook
My Carrier: o2

Re: Add Maps into existing App?

Some code would be useful to help you
Plase "+Like" my post if it was helpful.
New Contributor
Posts: 5
Registered: ‎02-21-2013
My Device: Blackberry Z10
My Carrier: Rogers

Re: Add Maps into existing App?

This is my index.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />
		<link  rel="stylesheet" type="text/css" href="bbui.css"><link />
		<script type="text/javascript" src="bbui.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>
		<script type="text/javascript">
			var webworksreadyFired = false,
				darkColoring = false,
				darkScreenColor = 'black';
				
			document.addEventListener('webworksready', function(e) {
				// This is code to ensure that if webworksready is fired multiple times we still only init() one time
				if (webworksreadyFired) return;
				webworksreadyFired = true;
				
				var config;
				// Toggle our coloring for testing 
				if (darkColoring) {
					config = {controlsDark: true,
							listsDark: true,
							bb10ForPlayBook: true};
				} else {
					config = {controlsDark: false,
							listsDark: false,
							coloredTitleBar: true,
							bb10ForPlayBook: true};
				}
				// Handle styling of the screen before it is displayed
				config.onscreenready = function(element, id) {
											if (darkColoring && bb.device.isBB10) {
												var screen = element.querySelector('[data-bb-type=screen]');
												if (screen) {
													screen.style['background-color'] = darkScreenColor;
												}
											}
											
											if (id == 'dataOnLoad') {
												dataOnLoad_initialLoad(element);
											} else if (id == 'masterDetail') {
												masterDetail_initialLoad(element);
											} else if (id == 'dataOnTheFly') {
												dataOnTheFly_onScreenReady(element);
											} 
											
											// Remove all titles "except" input and pill buttons screen if running on BB10
											if (bb.device.isBB10 && (id != 'input') && (id != 'pillButtons') && (id != 'titlePillButtons')) {
												var titles = element.querySelectorAll('[data-bb-type=title]');
												if (titles.length > 0) {
													titles[0].parentNode.removeChild(titles[0]);
												}
											} 
											
											// Initialize our title pill buttons screen
											if (bb.device.isBB10 && (id == 'titlePillButtons')) {
												titlePillButtons_Init(element);
											}
											
										};
				// Handle styling of the screen after it is displayed
				config.ondomready = function(element, id, params) {
											if (id == 'dataOnTheFly') {
												dataOnTheFly_initialLoad(element);
											} 
										};
				
				// You must call init on bbUI before any other code loads.  
				// If you want default functionality simply don't pass any parameters.. bb.init();
				bb.init(config);
				if (darkColoring && bb.device.isBB10) {
					document.body.style['background-color'] = darkScreenColor;
					document.body.style['color'] = 'white';
				}
				bb.pushScreen('home.htm', 'home');
			}, false);
			
			// Fire the webworksready event for PlayBook and BBOS
			window.addEventListener('load',function() {
					if (navigator.userAgent.indexOf('Version/10.0') < 0) {
						var evt = document.createEvent('Events');
						evt.initEvent('webworksready', true, true);
						document.dispatchEvent(evt);
					}
				});
		</script>
	
	</head>
	<body>
	</body>
</html>

 

Im not sure exactly where to put the code from the sample into my index :/

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Add Maps into existing App?

Let me suggest you take a look at one of our great sample applications for BlackBerry 10: Maps.

 

https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/Maps

 

This shows how to embed Google MapsBing MapsLeaflet via CloudMade and OpenLayers map content in a WebWorks application.

 

If you are seeing content not appearing for you app when running on a live device - it sounds like the problem is that you haven't white listed the domains of the remote URLs you are trying to access.

 

See this http://developer.blackberry.com/html5/documentation/access_element_834677_11.html for more info.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
New Contributor
Posts: 5
Registered: ‎02-21-2013
My Device: Blackberry Z10
My Carrier: Rogers

Re: Add Maps into existing App?

i did exatly this and it works fine in Ripple on it own. But when i add it to my application..im not sure exsactly where to out sll this code...

 

<!--
Copyright 2012 Research In Motion Limited.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Maps Sample</title>

        <!-- css -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/bbui-0.9.4.css" type="text/css" media="screen" />

        <!-- framework -->
        <script src="local:///chrome/webworks.js" type="text/javascript"></script>

        <!-- libraries -->
        <script src="js/lib/bbui-0.9.4.js" type="text/javascript"></script>
        <script src="js/lib/jquery-1.8.1.min.js" type="text/javascript"></script>

        <!-- sample code -->
        <script src="js/maps.js"></script>




        <!-- google -->
        <script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

        <!-- bing -->
        <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-gb"></script>

        <!-- leaflet -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

        <!-- openlayers -->
        <script src="http://openlayers.org/api/OpenLayers.js"></script>




        <!-- initialization -->
        <script type="text/javascript">
            document.addEventListener("webworksready", initApp);

            // You must call init on bbUI before any other code loads.
            // If you want default functionality simply don't pass any parameters.. bb.init();
            bb.init({
                    actionBarDark: true,
                    controlsDark: true,
                    listsDark: false,

                    // Fires "before" styling is applied and "before" the screen is inserted in the DOM
                    onscreenready: function(element, id) {
                                   },

                    // Fires "after" styling is applied and "after" the screen is inserted in the DOM
                    ondomready: function(element, id) {
                                  if (id === 'google') {
                                    initGoogleMaps();
                                  }

                                  if (id === 'bing') {
                                    initBingMaps();
                                  }

                                  if (id === 'leaflet') {
                                    initLeafletMaps();
                                  }

                                  if (id === 'openlayers') {
                                    initOpenLayersMaps();
                                  }
                                }
                    });
        </script>
    </head>
    <body>
    </body>
</html>

 Do i put all this into my existing index.html which i posted earler?

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Add Maps into existing App?

Yes, that shold all be defined in your index.html

 

 

Now, what does your config.xml file look like?  I see lots of remote URLs being used in your app.  Let's confirm that you have <access> elements defined for all of them correctly.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Highlighted
New Contributor
Posts: 5
Registered: ‎02-21-2013
My Device: Blackberry Z10
My Carrier: Rogers

Re: Add Maps into existing App?

[ Edited ]

This is my Config..

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0" id="miway">
 
  <author href="http://www.anotherplanet.co/"
          rim:copyright="Copyright 2012-2013 AnotherPlanet">AnotherPlanet</author>
 
  <name>MiWay Transit</name>
 
  <description>
    Mississauga Trasnit
  </description>
 
  <rim:permissions>
    <rim:permit>read_geolocation</rim:permit>
  </rim:permissions>
 
  <icon src="icons/icon-150.png"/>
 
  <rim:splash src="splash-1280x768.png"/>
 
  <content src="index.htm" rim:allowInvokeParams="true"/>
 
  <feature id="blackberry.ui.dialog"/>
   
  <feature id="blackberry.app.orientation">
    <param name="mode" value="portrait" />
  </feature>
 
  <feature id="blackberry.app">
    <param name="backgroundColor" value="0xFFFF0000" />
  </feature>
 
  <access uri="http://www.anotherplanet.co" subdomains="true">
    <feature id="blackberry.app" required="true" version="1.0.0"/>
    <feature id="blackberry.invoke" required="true" version="1.0.0"/>
  </access>
 
  <license href="http://www.example.com/"/>
  <access uri="http://chart.apis.google.com" subdomains="true" />
  <feature id="blackberry.push" />
  <feature id="blackberry.message.sms" />
  <feature id="blackberry.ui.menu" />
  <feature id="blackberry.ui.dialog"/>
  <feature id="blackberry.identity" />
  <feature id="blackberry.system.event" />
  <feature id="blackberry.app" />
  <feature id="blackberry.app.event"/>

<access uri="*" subdomains="true" />

    <access uri="http://virtualearth.net" subdomains="true" />
    <access uri="http://bing.net" subdomains="true" />



</widget>

 

If this is my index.htm that i use in my app

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<html> 
	<head>
		<meta name="x-blackberry-defaultHoverEffect" content="false" />
		<link  rel="stylesheet" type="text/css" href="bbui.css"><link />
		<script type="text/javascript" src="bbui.js"></script>
		<script type="text/javascript" src="local:///chrome/webworks.js"></script>
		<script type="text/javascript">
			var webworksreadyFired = false,
				darkColoring = false,
				darkScreenColor = 'black';
				
			document.addEventListener('webworksready', function(e) {
				// This is code to ensure that if webworksready is fired multiple times we still only init() one time
				if (webworksreadyFired) return;
				webworksreadyFired = true;
				
				var config;
				// Toggle our coloring for testing 
				if (darkColoring) {
					config = {controlsDark: true,
							listsDark: true,
							bb10ForPlayBook: true};
				} else {
					config = {controlsDark: false,
							listsDark: false,
							coloredTitleBar: true,
							bb10ForPlayBook: true};
				}
				// Handle styling of the screen before it is displayed
				config.onscreenready = function(element, id) {
											if (darkColoring && bb.device.isBB10) {
												var screen = element.querySelector('[data-bb-type=screen]');
												if (screen) {
													screen.style['background-color'] = darkScreenColor;
												}
											}
											
											if (id == 'dataOnLoad') {
												dataOnLoad_initialLoad(element);
											} else if (id == 'masterDetail') {
												masterDetail_initialLoad(element);
											} else if (id == 'dataOnTheFly') {
												dataOnTheFly_onScreenReady(element);
											} 
											
											// Remove all titles "except" input and pill buttons screen if running on BB10
											if (bb.device.isBB10 && (id != 'input') && (id != 'pillButtons') && (id != 'titlePillButtons')) {
												var titles = element.querySelectorAll('[data-bb-type=title]');
												if (titles.length > 0) {
													titles[0].parentNode.removeChild(titles[0]);
												}
											} 
											
											// Initialize our title pill buttons screen
											if (bb.device.isBB10 && (id == 'titlePillButtons')) {
												titlePillButtons_Init(element);
											}
											
										};
				// Handle styling of the screen after it is displayed
				config.ondomready = function(element, id, params) {
											if (id == 'dataOnTheFly') {
												dataOnTheFly_initialLoad(element);
											} 
										};
				
				// You must call init on bbUI before any other code loads.  
				// If you want default functionality simply don't pass any parameters.. bb.init();
				bb.init(config);
				if (darkColoring && bb.device.isBB10) {
					document.body.style['background-color'] = darkScreenColor;
					document.body.style['color'] = 'white';
				}
				bb.pushScreen('home.htm', 'home');
			}, false);
			
			// Fire the webworksready event for PlayBook and BBOS
			window.addEventListener('load',function() {
					if (navigator.userAgent.indexOf('Version/10.0') < 0) {
						var evt = document.createEvent('Events');
						evt.initEvent('webworksready', true, true);
						document.dispatchEvent(evt);
					}
				});
		</script>
	
	</head>
	<body>
	</body>
</html>

 Where do i add the code from the INDEX.HTML in the map sample?

If i added one line from the sample into my index...its screws up my applicaiton.