Infobubble for every POI on the map

[fabianpimminger]

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

[ZieL]

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:

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]);
        });

[fabianpimminger]

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

[ZieL]

My pleasure.


Here how you can move an existing pois:

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

[fabianpimminger]

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:

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()?

[ZieL]

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

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: []
        },
        
}