Documentation

Custom popup & width

Popup on Micello map are auto scaled to fit the HTML content, subject to maximum thresholds. The thresholds are as below,

  • MAX_FRACTION : This gives the max fraction of the viewport size for the infowindow.
  • MAX_HEIGHT : This gives the maximum height of an infowindow.
  • MAX_WIDTH : This gives the maximum width of an infowindow.

If the size of the content exceeds the thresholds, then a horizontal and/or vertical scroll bar will be created. Now, if you do run into seeing a scroll bar, you can override the value of MAX_FRACTION, MAX_HEIGHT and MAX_WIDTH. For example, the default for MAX_WIDTH is 300, and you start to see a horizontal scroll bar, you can then increase this to 400. In this example we are setting MAX_HEIGHT & MAX_WIDTH to 600 to fit html div of size 550px into popup without scroll.

micello.maps.MapPopup.MAX_HEIGHT = 600;
micello.maps.MapPopup.MAX_WIDTH = 600;

Now we will create a popup and place it on a map when map is fully loaded. Popup content contains a div with fixed width of 550 pixels. Now look at the working example below to see how content fits into popup withour scroll bar.