How to work with Markers

Owned by Joslyn Brough
Last updated: Feb 07, 2024 by Trupti Khatavkar

What are Markers?

Markers are visual icons that are placed at a specific location (latitude/longitude or address). These markers are viewed in our AerialSphere viewer, and will remain at the given location no matter what sphere (panorama) you are viewing from. There are a few different kinds of markers you will see referenced through our documentation, and although they are all similar, they have a few key differences.

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.

Instead of using a string, you will pass an object with 2 mandatory key/value pairs and 4 optional pairs to the icon parameter of the marker:

icon: {
  type: This must be the string “text” for the marker to correctly show your text instead of an image.
  iconText: This is the string of text you want the marker to show.
  fontSize (optional): The font size of the text, given in pixels. Default: 14.
  textColor (optional): The color of the text. Default: white.
  textShadow (optional): This can be used to give text a border. Default: black border. This needs horizontal shadow, vertical shadow and optional blur radius and color similar to the text-shadow in CSS.
  font (optional): Font family of the text. Default: "'Open Sans', sans-serif, arial"
}

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:

  • Every marker will be one of the 4 types described above (Icon, Logo, Text, Custom), so make sure you know which marker you are creating, as they all have slightly different things you must do to create it correctly.

  • Every marker must have location information, such as a latitude/longitude or an address. Although an address will work just fine, lat/lng coordinates will give you much finer control over exactly where the marker is placed on the building/property, and is highly recommended when possible. Using a lat/lng will be quicker as well, since using an address will require extra time to look up the address location.

  • If you pass a name and/or description, these will show up in the popup when the marker is clicked. For more information on popups, refer to the “Working with Popups” guide.

  • Although assigning the marker to a layer is optional, it is highly recommended if you plan to hide/show markers. It is much more efficient to hide/show a layer of markers as opposed to hiding/showing each marker individually. More information on layers can be found in the “Working with Layers” guide.

Marker Interactions

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}`) })