How to customize Marker pop-ups?

The AerialSphere API currently allows for styling and customization to our marker pop-ups that appear.

This article will focus on what level of customization is currently available, there are some limitations but still plenty of power in your hands.

Let’s start out with the pop-up itself, as a reminder this is our default marker position and size using this jsfiddle.

Altering this default behavior is simple! Our markers allow for a parameter to be passed called Style.

This enables us to access CSS styling options that are passed into that html element on our viewers end.

So lets so I wanted a tall pop-up to the left of the marker, I would add the following style options:

style: {
  height: '300px',
  width: '250px',
  position: 'relative',
  left: '-200px',
  top: '-50px'
}

The relative positioning here is based off of the Marker itself, so to move it left we need negative values and to move it up we also need negative values.

Check out the JSFiddle Below to see it in action.

From here, additional styling can be applied by passing html elements into either the Name or Description parameter of our markers. (OR BOTH!)

Say I wanted to display the word customize, in a flex box oriented as a column with each letter its own color, and have an image at the bottom of a color exploding? Done.

Even if you are working with sets of data and need to reference those items you can still do customization. Here is the same customization but this time I am accessing a JSON object to get all the information.