CODEWITHSUNDEEP
javascriptapihere-api
dc79
dc79

Reputation: 1

Here Maps Javascript API - Information bubble overlaying route polyline?

I render a map with a route from point A to point B and zoom to the bounding box of the route.

I also render an associated information bubble for point B (destination). This specific portion of my application does not involve user intervention so it is completely unattended The map is also printed Point B is always different using Enterprise Javascript API v2.5.4

My issue is that many times the info bubble overlays the route polyline which obstructs the route.

I see InfoBubble alignment options for left, right, above, below but these will not help as points are dynamic

Any suggestions on positioning of Info Bubble to assure it does not overlay route?

Upvotes: 0

Views: 391

Answers (1)

Jason Fox
Jason Fox

Reputation: 5290

The defaultXAlignment and defaultYAlignment properties can be used to set a preferred position of the InfoBubble.

You can use the defaultXAlignment and defaultYAlignment properties to alter the preferred offset for the Infobubble e.g.:

var infoBubbles = new nokia.maps.map.component.InfoBubbles();
infoBubbles.options.set("defaultXAlignment", 
    nokia.maps.map.component.InfoBubbles.ALIGNMENT_RIGHT);
infoBubbles.options.set("defaultYAlignment",
     nokia.maps.map.component.InfoBubbles.ALIGNMENT_ABOVE);
map.components.add(infoBubbles);

In your case I would suggest the following.

  • When you zoom to the bounding box of the route add a padding factor to ensure there is space to display the infoBubble. The simplest way would be to zoom out one more stop, but you could use the padding property of the nokia.maps.map.Display to ensure you have enough space when you zoom(). See nokia.maps.map.Display.setPadding()

  • Secondly calculate the bearing between the start and endpoints:

    Number.prototype.toRad = function() { 
  // convert degrees to radians
  return this * Math.PI / 180;
}

function bearing(lat1, lon1, lat2, lon2) {
  lat1 = lat1.toRad(); lat2 = lat2.toRad();
  var dLon = (lon2-lon1).toRad();
  var y = Math.sin(dLon) * Math.cos(lat2);
  var x = Math.cos(lat1) * Math.sin(lat2) -
  Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
  return Math.atan2(y, x);
}

  • If the result is between 0 and Math.PI/2 you are travelling North-East fix the Infobubble to display on the right and above.

  • If the result is between Math.PI/2 and Math.PI you are travelling South-East fix the Infobubble to display on the right and below.
  • If the result is between -Math.PI and -Math.PI/2 you are travelling South-West fix the Infobubble to display on the left and below.
  • If the result is between -Math.PI/2 and 0 you are travelling North-West fix the Infobubble to display on the left and above.

You can find more information about completely fixing an InfoBubble the answer here

Upvotes: 1

Related Questions