How to work with Popups

Owned by Joslyn Brough
Last updated: Nov 09, 2023
2 min read

What are popups?

Popups are a visual box that shows up when you click on a marker within the AerialSphere viewer. These popup boxes can be used to show all sorts of information, and can be stylized in numerous ways. By default, these boxes will show up right above the marker you click, and will have 2 “text box” areas in the popup; a Name and a Description. The “name” of the popup is filled with the associated marker’s “name” property, and the “description” of the popup is filled with the associated marker’s “description” property. The description area of the popup is where you can show detailed information about the matching marker.

Examples of what can be put in these popups include MLS listing information, detailed property information, hyperlinks to an external website, pricing information, or a paragraph of text highlighting what is at the marked point of interest.

What can (and can’t) be done with a popup?

It is easy to change the size and position of the popup, and is most easily accomplished when creating the marker that the popup will be “attached” to. When creating a marker, you can pass a “style” parameter to modify the popup. Example: style: {
height: ‘300px’,
width: ‘250px’,
position: ‘relative’,
left: ‘-200px’,
top: ‘-50px’
}

 

Additional styling can be done to the text within the Name and Description of the popup by passing HTML as a string to the “name” and/or “description” of the marker. For example, if you use the following string for your description, you will see red text in the description: <div style="color: red">Example Text</div>

 

Although all html styling should work within the popup, it is worth noting that everything that is passed to the popup will be sanitized, meaning little to no functionality may be included. Hyperlinks will work and redirect to the appropriate web page, but you can’t include any functional code in your HTML. If you attempt to include a function such as onClick() or a hyperlink that runs any code, the functionality will be stripped away, leaving only text, hyperlinks, and HTML styling. If you need to create a popup with functionality within it (such as extra buttons or callbacks), it is recommended to hide the popup altogether and instead create your own HTML based “popup window” where you can have full control over the styling and adding functionality (refer to onMarkerClick() documentation to start creating your own popup when a marker is clicked)