...
What are the different types of markers?
Icon (default)
This is the original marker, and the default to use when you want to quickly mark a location or point of interest. The default icon used is a simple blue marker. You can change both the color and the icon used when creating the marker.
icon: This must be a string that matches one of the icons in our AerialSphere Icon Library. If you don’t put anything here, it will default to “place”
iconColor: This must be a Hexadecimal Color Code, and will change the main color of the marker
Logo
This marker uses a Logo instead of an Icon. This is essentially the same as the Icon marker described above, except you can NOT change the color of the logo. You can choose which logo is used when creating the marker:
icon: This must be a string that matches one of the logos in our AerialSphere Logo Library. Keep in mind that all logos will start with “logo_”
Text
This marker doesn’t use an image, but shows text for the marker instead. There is currently a ~12 character limit on the text you can enter, but this will be improved in the future. Text markers are created in the same way as an icon marker, with a few key differences:
icon: This must be the string “text” for the marker to correctly show your text instead of an icon
iconText: This is the string of text you want the marker to show.
Future updates will add the ability to change the font, size, and color of the text
Custom
This marker allows you to use your own image instead of an icon or logo. This is useful when you want to use an icon or logo that AerialSphere doesn’t have in their library. The image you want to use must be hosted online and accessible via a url. Although custom markers are created in a similar fashion to Icon markers, you must add a few details beyond just the name of the icon to use. Instead of using a string, you will pass an object with 4 key/value pairs to the icon parameter of the marker:
icon: { url: The string of the url pointing to your image to use teardrop: This must be either true or false, indicating whether the anchor point of the image will be at the bottom (true) or the center (false) height: The height of the image, given in pixels width: The width of the image, given in pixels}
How to add markers?
Although adding a marker is covered in the “addMarker” documentation, there are some things to keep in mind when adding markers:
...
There are a few different ways that you can configure marker interactions to get the functionality you are looking for. Almost all of these are done when you are creating a marker.
hoverText: This allows you to give a string of text that will be shown when you hover your mouse over the marker. This can only be plain text, and doesn’t support adding HTML.
popup: All markers will show a popup by default when clicked (showing what you passed for the name and description, otherwise it will be empty), but you can set this to false to prevent a popup from showing
isStatic: This allows you to prevent a marker from being interacted with. This is often used to make a marker behave like a label (especially when used with a text marker). Set to true to prevent it from being interacted with.
showFlyHere: This is an object that tells the marker whether to include a “Fly Here” button. When “Fly Here” is clicked, the AerialSphere viewer will attempt to load into the closest sphere (panorama) to that location. This must be passed as an object with the key “enabled” and a value of either true or false; example:
{enabled: true}onMarkerClick: The last marker interaction is slightly different as it is not configured when you create the marker, but instead is an event that is added to your aerialSphere (viewer) object. This allows you to run a piece of code when a marker is clicked on, using that marker information as a passed parameter. Example:
aerialSphere.onMarkerClick((result) => { alert(`You clicked marker number ${result.id}`) })