×

Discussion Board

Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Hybrid View

  1. #1
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Exclamation [moved] Mobile mh5 markers and infobubbles

    I can't get the map to display multiple infobubbles and setting the infobubbles for each point.
    I need the infobubble to display several images and text when a user clicks the marker.
    I see the poi in the map but when I click on it it shows me an infobubble with the "name" tag, but I want it to show the infobubble I create afterwards.

    All I have now is this:
    Code:
    	nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
    		var map = new nokia.mh5.components.Map({
                                    appId: "demo_wwzrmoloHAFVvyW",
                                    appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
    				center: {		
              			longitude: -58.4,
    	           		latitude: -34.6
    		        },
    				zoom: 12,
    				configuration: {
    					distanceUnit: "km",
    					search: null,
    				}
                });
    
    		var poi = map.createPoi("img/rojo.png", {longitude: -58.4, latitude: -34.6, name:"Accidente"});
     		map.moveTo(poi);
    		var params = {
        	                     content: ["title","description"],
                    	     left: "img/accidente.png",
        	                     right: "img/corte_parcial.png",
        	                     maxWidth: 340
    		}
    		nokia.mh5.components.InfoBubble(poi,params,function(b){console.log(b)})
    Thanks,
    Pam

  2. #2
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: Mobile mh5 markers and infobubbles

    Hi Pam,

    this is how I made it work for me:


    Code:
    <!doctype html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=100">
        <!-- Definitions of mobile-friendly documents e.g. for BlackBerry: -->
        <meta name="HandheldFriendly" content="True">
        <!-- Definitions of mobile-friendly documents for Microsoft Browser: -->
        <meta name="MobileOptimized" content="width">
        <!-- iOS viewport definitions: -->
        <!--meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- disable BlackBerry UI events -->
        <meta name="touch-event-mode" value="native">
        <meta name="cursor-event-mode" value="native">
    
        <link rel="stylesheet" href="../../lib/mh5.css" type="text/css">
        <style>
            #mapContainer {
                height: 400px;
            }
    	</style>
    </head>
    <body>
    
        <script src="../../lib/mh5.js"></script>
    
        <div id="mapContainer"></div>
    
        <script type="text/javascript">
    		nokia.mh5.assetsPath = "../../lib/";
    		var map = new nokia.mh5.components.Map({
                                    appId: "demo_wwzrmoloHAFVvyW",
                                    appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
    				center: {		
              			longitude: -58.4,
    	           		latitude: -34.6
    		        },
    				zoom: 12,
    				listeners: {
    					  "poiclick": function(e) { 
    									var params = {
    									content: ["title","description"],
    									listeners:{
    										click: function(){alert("main")},
    										leftclick: function(){alert("left")},
    										rightclick: function(){alert("right")}
    									 },
    									 left: "img/accidente.png",
    									 right: "img/corte_parcial.png",
    									 maxWidth: 340
    									}
    									this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
    									e.preventDefault();
    								},
    					  "mapmovestart": function(e) {},
    					  "mapmoveend": function(e) {},
    					  "mapclick": function(e) {},
    					  "mapdblclick": function(e) {},
    					  "maplongpress": function(e) {},
    					  "maptrackingstart": function(e) {},
    					  "maptrackingend": function(e) {},
    					  "mapzoomchange": function(e) {}
    				   },
    				configuration: {
    					distanceUnit: "km",
    					search: null,
    				}
                });
    			
    		document.getElementById("mapContainer").appendChild(map.root);
    		
    		var poi = map.createPoi("img/rojo.png", {longitude: -58.4, latitude: -34.6, name:"Accidente"});
     		map.moveTo(poi);
    
    		
    
        </script>
    
    </body>
    </html>
    edited by Ron
    Last edited by Nokia Ron; 2012-06-27 at 17:53. Reason: Re-saved
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  3. #3
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Re: Mobile mh5 markers and infobubbles

    Thanks Lucian,

    I understand your example, what if I had many pois that should show different infobubbles (different content and images) depending on each poi?
    I don't know if it's clear, I will be receiving the pois data by json and will need to run them in a loop to create each one with their own data and bubble information. In your example there's only one poi and one bubble set for the whole map.
    Is this possible with nokia maps?

    Thanks again,
    Pam

  4. #4
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: Mobile mh5 markers and infobubbles

    Each time your "poiclick" listener is called you will know which POI it was accessed (e.data[0]) so you can dynamically make decisions about which format should be used for the respective POI and set the right info bubble params in the showInfoBubble call.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  5. #5
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: Mobile mh5 markers and infobubbles

    I found a bit more time to play with this and here's my take on what you may be looking at:

    Code:
    "poiclick": function(e) {
    		if(e.data[0].data.type=="car")
    		{
    			var params = {
    			content: ["title","description"],
    			listeners:{
    				click: function(){alert("main")},
    				leftclick: function(){alert("left")},
    				rightclick: function(){alert("right")}
    			 },
    			 right: "img/car.png",
    			 maxWidth: 340
    			}
    			this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
    			}
    			else
    			{
    				var params = {
    					content: ["title","description"],
    					listeners:{
    						click: function(){alert("main")},
    						leftclick: function(){alert("left")},
    						rightclick: function(){alert("right")}
    					},
    					left: "img/bike.png",
    					maxWidth: 340
    				}
    			this.showInfoBubble(e.data[0],params,function(b){console.log(b)});							
    			}
    		e.preventDefault();
    	},
    and

    Code:
    		var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", type:"bike"});
    		map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", type:"car"});
     		map.moveTo(poi);
    Resulting in map1.jpg
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  6. #6
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: Mobile mh5 markers and infobubbles

    Thanks Lucian for your answer. It's really infobubble in the version 0.1.9 and it's a bug. We'll change it to infoBubble.
    @ m00zg:
    Could you describe more precisely the status of the map:
    - does it have pois already;
    - what are the steps to reproduce this error.

    At the first sight it looks like the size (width and height) of the poi are calculated wrong (line 295: D.drawImage(q.image,n-(h=q.width/ha)/2,p-(j=q.height/ha)/2,h,j)).
    What are the poi images you use? Are they the default ones?

    Leo

  7. #7
    Registered User
    Join Date
    Jul 2012
    Posts
    6

    Re: Mobile mh5 markers and infobubbles

    You can simply reproduce the error using the full code I've pasted yesterday. Just change infoBubble into infobubble. And try longpress on map. The default bubble should be shown, but all I get is only the error (set of the same errors):
    Uncaught Error: INVALID_STATE_ERR: DOM Exception 11
    There aren't any POI on map.

    But it's the same if I add my custom POI (with custom icon) and click on it. Poiclick function is empty. No infoBubble is shown, and I get the same error.

  8. #8
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: Mobile mh5 markers and infobubbles

    Hi Pam,

    please be aware that there is a dedicated forum for MH5: http://www.developer.nokia.com/Commu...r-mobile-HTML5. Every new question there notifies us developers of MH5 framework. Here we were notified by the moderator.

    Lucian is completely right. But you could simplify the code a little bit by unifying infobubble listeners:

    Code:
            nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
            var map = new nokia.mh5.components.Map({
                    appId: "demo_wwzrmoloHAFVvyW",
                    appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
                    center: {
                        longitude: -58.4,
                        latitude: -34.6
                    },
                    zoom: 12,
                    infoBubble: {
                        listeners: {
                            click: function(e){/*my handler*/},
                            leftclick: function(e){/*my handler*/},
                            rightclick: function(e){/*my handler*/}
                        }
                    },
                    listeners: {
                        poiclick: function(e) {
                            var poi = e.data[0],
                                data = poi.data;
    
                            this.showInfoBubble(poi, {
                                content: ["title", "description"],
                                title: data.name,
                                description: data.address,
                                left: "img/accidente.png",
                                right: "img/corte_parcial.png"
                            });
                            e.preventDefault();
                        }
                    }
                });
    
            document.getElementById("mapContainer").appendChild(map.root);
    
           var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", address: "My Address 1", type:"bike"});
           map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", address: "My Address 1", type:"car"});
           map.moveTo(poi);


    Currently we are working on simplifying the infobubble usage.

    Leo
    Last edited by ZieL; 2012-06-27 at 17:37.

  9. #9
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: Mobile mh5 markers and infobubbles

    I moved the thread to the right forum, but now at least in my browsers the code snippets which include the full HTML code are not rendered.
    I copied below Leo's code just in case, until we figure out if the rendering problem is on my side only or global.

    Code:
            nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/0.1.9/lib/";
            var map = new nokia.mh5.components.Map({
                    appId: "demo_wwzrmoloHAFVvyW",
                    appCode: "Vgl_08RQWnjJo92Lw1F_uQ",
                    center: {
                        longitude: -58.4,
                        latitude: -34.6
                    },
                    zoom: 12,
                    infoBubble: {
                        listeners: {
                            click: function(e){/*my handler*/},
                            leftclick: function(e){/*my handler*/},
                            rightclick: function(e){/*my handler*/}
                        }
                    },
                    listeners: {
                        poiclick: function(e) {
                            var poi = e.data[0],
                                data = poi.data;
    
                            this.showInfoBubble(poi, {
                                content: ["title", "description"],
                                title: data.name,
                                description: data.address,
                                left: "img/accidente.png",
                                right: "img/corte_parcial.png"
                            });
                            e.preventDefault();
                        }
                    }
                });
    
            document.getElementById("mapContainer").appendChild(map.root);
    
           var poi = map.createPoi("img/red.png", {longitude: -58.4, latitude: -34.6, name:"Crash 1", address: "My Address 1", type:"bike"});
           map.createPoi("img/blue.png", {longitude: -58.45, latitude: -34.6, name:"Crash 2", address: "My Address 1", type:"car"});
           map.moveTo(poi);
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  10. #10
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: Mobile mh5 markers and infobubbles

    Leo,

    for Pam's case a if on poi's type would still be needed in that listener, so that different layouts are applied.

    I was about to ask you why my bubble's listeners are never called but I think I can already see the answer in your code I have to try it in my little test app.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  11. #11
    Registered User
    Join Date
    Jul 2012
    Posts
    6

    Re: Mobile mh5 markers and infobubbles

    Quote Originally Posted by ltomuta View Post
    I was about to ask you why my bubble's listeners are never called but I think I can already see the answer in your code
    I've got the same question and still haven't got the answer. Did you figure out why the listeners aren't called?

  12. #12
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: Mobile mh5 markers and infobubbles

    Hi m00zg,

    The listeners have to be defined in the infoBubble definition and not in showInfobubble function call. Take a look at my example bellow.

    Leo

  13. #13
    Nokia Developer Expert
    Join Date
    Mar 2012
    Posts
    65

    Re: [moved] Mobile mh5 markers and infobubbles

    Hi Lucian,

    If you have only two different poi types then probably the best way is to introduce "type" property like you did. But if all your pois are different then it's better to save all the needed data directly in the poi. So that you can just pass them to the showInfoBubble method:
    Code:
                           var poi = e.data[0],
                                data = poi.data;
    
                           this.showInfoBubble(poi, {
                                content: ["title", "description"],
                                title: data.name,
                                description: data.address,
                                left: data.leftImage,
                                right: data.rightImage
                            });
    Leo

  14. #14
    Nokia Developer Moderator
    Join Date
    Sep 2004
    Location
    Tampere, Finland
    Posts
    11,359

    Re: [moved] Mobile mh5 markers and infobubbles

    Yep, that makes a lot more sense. Thanks Leo.
    -- Lucian

    If you are not yet a DVLUP member it is time to correct that mistake :) Click here to join: http://www.dvlup.com/lucian/Invite

  15. #15
    Registered User
    Join Date
    Apr 2010
    Location
    Rosario, Argentina
    Posts
    38

    Re: [moved] Mobile mh5 markers and infobubbles

    Hi guys, thanks for your help, I solved it like this (I post it just in case someone else gets into the same situation) :

    Code:
    listeners:{
    					"poiclick": function(e) {
    
    							var params = {
    								content: ["title","description","more"],
    								listeners:{
    									click: function(){alert("main")},
    									leftclick: function(){alert("left")},
    									rightclick: function(){alert("right")}
    								},
    								maxWidth:340
    							}
    								if(e.data[0].data.state=="FLUENT"){
    									params.left = "img/verde.png";	
    								}
    								if(e.data[0].data.state=="CONGESTED"){
    									params.left = "img/amarillo.png";	
    								}
    								if(e.data[0].data.state=="DELAYED"){
    									params.left = "img/rojo.png";	
    								}
    								if(e.data[0].data.interrupcion=="TOTAL"){
    									params.right = "img/corte_total.png";	
    								}
    								if(e.data[0].data.interrupcion=="PARTIAL"){
    									params.right = "img/corte_parcial.png";	
    								}
    						this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
    						e.preventDefault();
    					},
    				}
    And then creating each poi from the data I get from my json api:
    Code:
                  if(data.length){
    			var len = data.length;
    			for(var i in data){
    				var dato = data[i];
    				map.createPoi("img/rojo.png", {
    					longitude: dato.longitude, 
    					latitude: dato.latitude, 
    					name: dato.street+" "+dato.number,
    					description: dato.comment,
    					more: "Fuente: "+dato.source,
    					incidence: dato.incidence_type, 
    					interrupcion :dato.interruption_type, 
    					state: dato.state, 
    					type: dato.type 
    				})
    			}
    		}
    Now I need to start playing inside the listener with the params for each ocasion.
    They need to improve the documentation of the maps api, it works great but with so little information it gets easier for developers to use google maps api, if you need any help doing this don't doubt in asking
    Thanks again for your help!!
    Pam
    Last edited by pamepros; 2012-06-28 at 19:37. Reason: The code in [CODE] is not fully showing

Similar Threads

  1. Map markers not always shown when max zoomed out
    By amnesia7 in forum [Archived] Maps API for Javascript
    Replies: 8
    Last Post: 2012-11-26, 21:06
  2. Google Map URL J2ME markers
    By v2sms in forum Mobile Java General
    Replies: 1
    Last Post: 2010-02-15, 13:04
  3. Multiple markers at this line with RThread
    By gigglie in forum Symbian
    Replies: 1
    Last Post: 2008-06-19, 08:57

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×