addMarker

Adds a marker to the sphere, either at a specified latitude and longitude, or at the specified address.

Parameters(marker, callback):

  • marker: A single, un-named object with the following attributes (most are optional):

    • lat (number): The latitude at which to place this marker (required unless address is passed).

    • lng (number): The longitude at which to place this marker (required unless address is passed).

    • name (string, optional): The title for this marker, which will be displayed within the marker popup.

    • description (string, optional): A description for the marker, which will be displayed within the marker popup. This can contain HTML. When both name and description are passed, the description shows up below the title, and the title stands out more.

    • icon (string | object, optional): Determines the visual appearance of the marker. Default: "place" (an icon marker). There are 3 options:

      • Icon marker: Pass a string here that appears in the list of AerialSphere-defined marker icons.

      • Text marker: Pass an object here with the following key/value pairs:

        • typeThis must be the string “text” for the marker to correctly show your text instead of an image.

        • iconTextThis 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"

        • Note: There is currently a ~12 character limit on the text you can enter, but this will be improved in the future.

        • Note: There is a small performance hit when using this parameter, but the hit doesn’t stack when using multiple text markers, since they are drawn in parallel.

      • Custom marker: Pass an object here with the following key/value pairs (this defines your own hosted image as the icon image):

        • url (string): The url to the hosted image you wish to use. Must be in jpg / png / svg format.

        • teardrop (boolean): This determines the anchor point of the image. Teardrop being true will anchor at the base of the image. False will anchor at the center. Does not have a default, you must pass this variable.

        • height (int): Image height.

        • width (int): Image width.

        • Note: Due to scaling, the height and width may not perfectly match the original image size, but you can maintain the aspect ratio when you pass both height and width.

    • id (number | string, optional): A unique id for this marker. If this is falsy, a uuid will be assigned for you.

    • hoverText (string, optional): A string to display when hovering a mouse over this marker. Use plain text only (ie, HTML isn’t supported).

    • popup (boolean, optional): Determines whether the popup should be displayed when the marker is clicked. Default: true

    • isStatic (boolean, optional): When true, the marker can’t be interacted with. Note: This is commonly used to make a marker act like a label. Default: false

    • metaData (object, optional): When passed, these arbitrary key-value pairs become associated with the resulting marker object, and can be read later.

    • iconColor (string, optional): When passed, this string should contain a hexcode that defines the color for the marker. This only applies to icon markers (ie, it can’t be used for sphere, logo, custom, or text markers). When this value isn’t passed, the icon color is unchanged, so the color shown in the list of AerialSphere-defined marker icons is used. Note: There is a small performance hit when using this, but the hit doesn’t stack when coloring multiple markers, since they are drawn in parallel.

    • showFlyHere (object, optional): When passed, then determines whether the Fly Here portion of the marker pop-up is shown (with a “Fly Here” button). This value overwrites the global AerialSphere object showFlyHere setting.

      • enabled (boolean): Key/value pair for setting fly here on specific marker. Default: true

      • example: showFlyHere: { enabled: false } disables this specific markers pop-up

    • layer (string, optional): When passed, the marker will be added to the named layer. Default: "default"

    • address (string, optional): The street address at which to place this marker. When using this, lat and lng can be empty.

  • callback: function that will return the added marker result, optional:

    • callback (function, optional): A function to execute after adding the marker. Takes a single parameter, result, which contains the added marker object.

Note: Marker pop-ups can also be customized. For more information visit here.

Code Sample