×

Discussion Board

Results 1 to 6 of 6

Hybrid View

  1. #1
    Registered User
    Join Date
    Jul 2012
    Posts
    5

    Infobubble for every POI on the map

    Hi,

    I would need more information visible for every poi on the map. Is it possible to display every poi as an infobubble?

    Best regards,
    Fabian

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

    Re: Infobubble for every POI on the map

    Hi Fabian,

    it is possible. createPoi method accepts image files but also canvas. That means you can create a canvas and draw what ever you want on it. If you want just reuse the existing infobubble class you can do it as it shown below:

    Code:
    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) {
                            //to prevent opening the default infobubble
                            e.preventDefault();
                        }
                    }
                });
    
            document.getElementById("mapContainer").appendChild(map.root);
    
            var pois = [{longitude: -58.4, latitude: -34.6, name:"Name 1"},
                        {longitude: -58.45, latitude: -34.6, name:"Name 2"}];
    
            new nokia.mh5.components.InfoBubble(pois[0], { content: ["title"]}, function(infobubbleImage) {
                map.createPoi(infobubbleImage, pois[0]);
            });
            new nokia.mh5.components.InfoBubble(pois[1], { content: ["title"]}, function(infobubbleImage) {
                map.createPoi(infobubbleImage, pois[1]);
            });

  3. #3
    Registered User
    Join Date
    Jul 2012
    Posts
    5

    Re: Infobubble for every POI on the map

    Hi ... Thank you for your help - it works perfectly. Is there a way to move the pois and change the coordinates after loading?

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

    Re: Infobubble for every POI on the map

    My pleasure.


    Here how you can move an existing pois:

    Code:
    var poiToMove = map.createPoi(infobubbleImage, pois[0]);
    window.setInterval(function() {
        poiToMove.longitude += 0.01;
    }, 200);

  5. #5
    Registered User
    Join Date
    Jul 2012
    Posts
    5

    Re: Infobubble for every POI on the map

    Thx very much.

    Another problem I've run into: You've written a good code example below in your first post. Is it possible to integrate this into the pages/layout-syntax?


    like:

    Code:
    global.lastfm.LandingPage = {
            cssClass: "lastfm_LandingPage mh5_Page",
            layout: {
                type: RowLayout
            },
            children: ["header", "notification", "maps"],
            header: {
                control: Control,
                cssClass: "lastfm_header"
            },
            notification: {
               control: nokia.mh5.ui.Notification,
               visible: false
            },
    
            model: {
                method: "geo.getevents",
                location: null,
                items: []
            },
            maps: newMapsAsInFirstExample,
    }
    Or a possibilty to reference the maps container (f.e. in the last.fm example) to call createPoi()?

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

    Re: Infobubble for every POI on the map

    Sure. In your example above you would ovewrite the build funciton of your page and initialize the map with the pois, like this:

    Code:
    global.lastfm.LandingPage = {
            cssClass: "lastfm_LandingPage mh5_Page",
            layout: {
                type: RowLayout
            },
            children: ["header", "notification", "maps"],
            header: {
                control: Control,
                cssClass: "lastfm_header"
            },
            notification: {
               control: nokia.mh5.ui.Notification,
               visible: false
            },
            
            maps: {
                center: {
                    longitude: -58.4,
                    latitude: -34.6
                },
                zoom: 12,
                listeners: {
                    poiclick: function(e) {
                        //to prevent opening the default infobubble
                        e.preventDefault();
                    }
                }
            },
    
            build: function() {
                this.constructor.prototype.build.call(this);
                var map = this.maps;
                var pois = [{longitude: -58.4, latitude: -34.6, name:"Name 1"},
                                 {longitude: -58.45, latitude: -34.6, name:"Name 2"}];
    
                new nokia.mh5.components.InfoBubble(pois[0], { content: ["title"]}, function(infobubbleImage) {
                    map.createPoi(infobubbleImage, pois[0]);
                });
                new nokia.mh5.components.InfoBubble(pois[1], { content: ["title"]}, function(infobubbleImage) {
                   map.createPoi(infobubbleImage, pois[1]);
                });
            },
    
            model: {
                method: "geo.getevents",
                location: null,
                items: []
            },
            
    }

Similar Threads

  1. InfoBubble & Windows Phone bugs
    By clickslidecto in forum [Archived] Maps API for Javascript
    Replies: 5
    Last Post: 2012-03-05, 11:31

Posting Permissions

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