I have set up a default interactive map using Nokia Here Maps v3. The map contains multiple markers grouped together.
Now, I am looking to add a button or some other UI element to the map that, when clicked, will call a function to zoom in as tightly as possible around all the markers in the group. Unfortunately, I haven't been able to find any example code for adding a new UI element, other than an infobubble, or the default UI elements provided with the map, which I don't want to use.
What I had in mind was something similar to the pano button, but positioned at the top left of the map. When this button is clicked, it should trigger my setBounds function to zoom out and encompass all the markers in the group.
Below is the current JavaScript code for my map:
// VUE
var vue1 = new Vue({
el: '#app',
data: () => ({
behavior: null,
centerCoords: { lng: #centerLon#, lat: #centerLat# },
defaultLayers: null,
devices: null,
markerGroup: null,
map: null,
platform: null,
ui: null,
}),
created: function(){
// Initialize the platform object:
this.platform = new H.service.Platform({
'app_id': 'AN ID WOULD GO HERE',
'app_code': 'A CODE WOULD GO HERE'
});
this.defaultLayers = this.platform.createDefaultLayers();
},
mounted: function(){
// Instantiate (and display) a map object:
this.map = new H.Map(
document.getElementById('mapContainer'),
this.defaultLayers.satellite.traffic,
{
center: this.centerCoords,
zoom: 15,
}
);
// Make Map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
// Create the default UI Components
this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers, 'en-US');
this.ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);
this.setMarkers();
setTimeout(this.setBounds, 250);
setInterval(this.setMarkers, 1 * 60 * 1000);
},
computed:{
},
methods:{
setBounds: function(){
this.map.setViewBounds(this.markerGroup.getBounds());
},
setMarkers: function(){
let self = this;
// if already present remove markerGroup from map
if(self.markerGroup){
self.markerGroup.removeAll();
}
//get request
$.get(
'/api/v1/getMarkers',
data => {
let zIndex = 1;
self.devices = data;
// create new marker group from get request.
self.markerGroup = new H.map.Group();
// add marker group to the map
self.map.addObject(self.markerGroup);
// add each marker to the marker group
self.devices.forEach((el, ind, arr) => {
self.addMarkerToGroup(
self.markerGroup,
{lat: el.latitude, lng: el.longitude},
'<div>' + el.serial + '</div>'
);
});
self.map.addEventListener('tap', evt => {
if(evt.target instanceof mapsjs.map.Marker){
// increase z-index of the marker that was tapped
evt.target.setZIndex(zIndex++);
}
});
self.markerGroup.addEventListener('tap', evt => {
let bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
content: evt.target.getData()
});
self.ui.addBubble(bubble);
}, false);
},
'json'
);
},
addMarkerToGroup: function(group, coordinate, html){
let marker = new H.map.Marker(coordinate);
marker.setData(html);
group.addObject(marker);
}
}
});