Here Maps Add Info bubble to map when using Vue

Question

Trying to add info bubble to map in my heremap vue component (ive taken bits from https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework and also https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here)

I have a couple of methods on my component(mostly copied over from the here docs)

methods:{  
        AddMarkerToGroup(group, location, icon) {                       

            var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
            marker.setData(location.Data);
            group.addObject(marker);
        },         
        addMarkersToMap(locations,defaultIconUrl) {
            var scale = window.devicePixelRatio;                
            var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });

            var group = new H.map.Group();                
            this.map.addObject(group);                               
            group.addEventListener('tap', function (evt) {

                // event target is the marker itself, group is a parent event target
                // for all objects that it contains
                var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
                    // read custom data
                    content: evt.target.getData()
                });
                // show info bubble                    
                this.ui.addBubble(bubble);                                 
            }, false);                

            var addmarker = this.AddMarkerToGroup;
            locations.forEach(function (location) {                    

                addmarker(group, location, icon);
            });                        
        }`

However i cant get the info bubble to display when the map marker is clicked. this.ui is undefined in the context of this event listener. Outside the event listener it isn't undefined. ui is defined in the mounted component event:

mounted: function() {
        // Initialize the platform object:           
        var pixelRatio = window.devicePixelRatio || 1;
        let defaultLayers = this.platform.createDefaultLayers({
            tileSize: pixelRatio === 1 ? 256 : 512,
            ppi: pixelRatio === 1 ? undefined : 320
        });
        this.map = new H.Map(
        this.$refs.map,
        defaultLayers.normal.map,
        {pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
        let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
        this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
        this.LoadMapLocations();                      
    }, 

Does anybody know how to get info bubble to display?

Answer 1

These blogs were really useful:

• https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework

• https://developer.here.com/blog/develop-a-cross-platform-desktop-maps-application-with-electron-vue.js-and-here

• https://developer.here.com/blog/searching-for-points-of-interest-with-the-here-places-api-in-a-vue.js-application

My problem was I forgot to add the reference to the stylesheet.

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />

dont forget to add the script files:

    <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-places.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>

My HereMap.vue component in full:

`<template>
   <div class="here-map">
        <div ref="map" v-bind:style="{ width: width, height: height }"></div>
    </div>
</template>`

<script>
export default {
    name: "HereMap",
    data() {
        return {
            map: {},
            platform: {},
            router:{},
            geocoder:{},
            directions:[],
            ui: null
        }
    },
    props: {
        appId: String,
        appCode: String,
        lat: String,
        lng: String,
        width: String,
        height: String            
    },
    created: function() { 
        this.platform = new H.service.Platform({
            "app_id": this.appId,
            "app_code": this.appCode,
            'useHTTPS': true,
            'useCIT': true
        }); 
        this.router = this.platform.getRoutingService();
        this.geocoder = this.platform.getGeocodingService();
    },
    mounted: function() {
        // Initialize the platform object:           
        var pixelRatio = window.devicePixelRatio || 1;
        let defaultLayers = this.platform.createDefaultLayers({
            tileSize: pixelRatio === 1 ? 256 : 512,
            ppi: pixelRatio === 1 ? undefined : 320
        });
        this.map = new H.Map(
        this.$refs.map,
        defaultLayers.normal.map,
        {pixelRatio: pixelRatio, zoom: 5, center: { lat: 54.00366, lng: -2.547855} });
        let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
        this.ui = H.ui.UI.createDefault(this.map, defaultLayers);
        this.LoadMapLocations();                      
    },               
    methods:{  
        AddMarkerToGroup(group, location, icon) {                       
            console.log(location);
            var marker = new H.map.Marker({ lat: location.Latitude, lng: location.Longitude }, { icon: icon });
            marker.setData(location.Data);
            group.addObject(marker);
        },         
        addMarkersToMap(locations,defaultIconUrl) {
            var scale = window.devicePixelRatio;                
            var icon = new H.map.Icon(defaultIconUrl, { size: { w: 45 * scale, h: 50 * scale } });

            var group = new H.map.Group();                
            this.map.addObject(group);
            var self = this;  
            var position;                             
            group.addEventListener('tap', function (evt) {                    
                position = evt.target.getPosition();

                // event target is the marker itself, group is a parent event target
                // for all objects that it contains
                var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
                    // read custom data
                    content: evt.target.getData()                       
                });
                // show info bubble                                       
                self.ui.addBubble(bubble);                    
            }, false);                

            var addmarker = this.AddMarkerToGroup;
            locations.forEach(function (location) {                    

                addmarker(group, location, icon);
            });                                                        
        },                        
        LoadMapLocations(){
            let locations = [
                { Name: "Wolverhampton" , Latitude:52.5914143, Longitude: -2.1496674, Data: "wolverhampton meeting" },
                { Name: "London" , Latitude:51.5048147, Longitude: -0.121162, Data: "london meeting" },
                { Name: "Manchester" , Latitude:53.4757539, Longitude: -2.2791187, Data: "manchester meeting" }                    
            ];                
            this.addMarkersToMap(locations,"https://image.flaticon.com/icons/png/512/33/33622.png");                                                             
        },
        ZoomToLocation(lat,long,zoom){
            console.log("zoom to location ");
            this.map.setCenter({ lat: lat, lng: long });
            this.map.setZoom(zoom); 
        }            
    }        
};