My HTML page design like this
Right side Here Map and left side more than 25 locations. as soon as page loads, all 25 locations are plotted on map and when window scroll, Marker on map got big for the location which is on window viewport.
everything works good if all the locations are in same city, state or country. But if locations are from across country. then map got small to show all the locations.
What i wanted is that Map should not get small, instead it should deploy all the locations but should show first location on map. And when we scroll and next location will come up, Map should move to that marker.
My code for the location plotting
function loadHeremap(element){
var platform = new H.service.Platform({
'apikey': 'MyAPIKEY',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
var city_latitude = $('#latitude').text();
var city_longitude = $('#longitude').text();
var map = new H.Map(document.getElementById(element),
defaultLayers.normal.map,{
center: {lat: city_latitude, lng: city_longitude},
zoom: 7,
pixelRatio:pixelRatio
});
window.addEventListener('resize', function () { map.getViewPort().resize();});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var behavior = behavior.disable(H.mapevents.Behavior.WHEELZOOM);
var ui = H.ui.UI.createDefault(map, defaultLayers);
var mapSettings = ui.getControl('mapsettings');
mapSettings.setVisibility(false);
var zoom = ui.getControl('zoom');
zoom.setAlignment('right-bottom');
allMarkers = [];
var event_latlon_map = $('.coll_event_data').text();
event_latlon_map=JSON.parse(event_latlon_map);
var locations = event_latlon_map;
var group = new H.map.Group();
var marker, i;
var icon = new H.map.Icon('../images/dark_blue_circle.png');
var BigIcon = new H.map.Icon('../images/dark_blue_large.png');
for (i = 0; i < locations.length; i++) {
group.addEventListener('pointerdown', function (evt) {
var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
content: evt.target.getData()
});
var position = evt.target.getGeometry(),
data = evt.target.getData(),
bubbleContent = evt.target.getData(),
bubble = onMarkerClick.bubble;
if (!bubble) {
bubble = new H.ui.InfoBubble(position, {
content: bubbleContent
});
ui.addBubble(bubble);
onMarkerClick.bubble = bubble;
} else {
bubble.setPosition(position);
bubble.setContent(bubbleContent);
bubble.open();
}
checkInfoBubble(bubble,map);
}, false);
group.addEventListener('pointermove', function (evt) {
var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
// read custom data
content: evt.target.getData()
});
var bubble_state=bubble.getState();
var position = evt.target.getGeometry(),
data = evt.target.getData(),
bubbleContent = evt.target.getData(),
bubble = onMarkerClick.bubble;
if (!bubble) {
bubble = new H.ui.InfoBubble(position, {
content: bubbleContent
});
ui.addBubble(bubble);
onMarkerClick.bubble = bubble;
} else {
bubble.setPosition(position);
bubble.setContent(bubbleContent);
bubble.open();
}
checkInfoBubble(bubble,map);
}, false);
var loc_event_id = locations[i][3];
var loc_event_name = locations[i][0];
var loc_venue_name = locations[i][4];
var loc_event_url = locations[i][7];
var full_detail = '<div data-id="'+id+'" class="detail"><a href="'+url+'"><div class="marker">'+name+'</div></a><div class="label">Venue: </div><div class="name">'+name1+'</div></div>';
// Add the first marker
if(i==0){
marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: BigIcon });
}else{
marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: icon });
}
marker.setData(full_detail);
group.addObject(marker);
allMarkers.push(marker);
map.addObject(group);
}
//map.getViewPort().setPadding(50, 50, 50, 50);
//map.setViewBounds(group.getBounds());
map.getViewModel().setLookAtData({
position: {lat:first_lat,lng:first_lon},
zoom:3
});
}
Code when location is into the viewport and marker gets big.
function hover_on_heremap(id){
var icon2 = new H.map.Icon('../images/large_icon.png');
for ( var i = 0; i< allMarkers.length; i++){
var htmlString=allMarkers[i].P;
if(htmlString){
var maker_id_array = htmlString.match(/data-id=\"([0-9]+)\"/);
var single_id=maker_id_array[1];
if (id == single_id){
allMarkers[i].setIcon(icon2);
break;
}
}
}
}
this code do change the small icon into big one when hover on locations but didn't shift the map.
