Planit.js

addMarker (options = {})

Class: Plan

This will add a new marker to your plan, given the set of options you pass it.

Options

Option Value Default Description
coords Array (required) NULL The coordinated of the marker as percentage of 100, or [xPc, yPc], relative to the top left of the image (if you have an image) or the container (if no image)
planitID String NULL The ID by which Planit identifies the marker. It is auto-generated if you don't override it.
id String NULL An optional ID for you to associate with the marker, which would get set as the data-id attribute of the marker.
class String NULL Class or classes to apply directly to the marker container.
color String #FC5B3F Background color of the marker.
html Text NULL HTML to add inside the marker container.
size Integer or Decimal 30 The width and height of the marker (markers have the same height and width)
draggable Boolean false If you can drag the marker around the plan.
infobox Object NULL A pop-up infobox attached to the marker, with the following options:

html: The interior HTML of the infobox

position: Location of the infobox, relative to the marker (top, right, bottom, left, top-left, top-right, bottom-left, bottom-right)

arrow: Put a triangle/arrow on the infobox (only if top, right, bottom, left is the position)

offsetX: Number of horizontal pixels to offset the infobox, relative to its normal positioning

offsetY: Number of vertical pixels to offset the infobox, relative to its normal positioning

Returns: Marker object

Example

// assuming you already have access to `plan` as a Plan object
// and that plan has an image
plan.addMarker({
  coords: [12, 45],
  draggable: true,
  infobox: {
    html: "<h2>Hello World</h2><p>I am a marker!</p>",
    position: 'top-left',
    arrow: true
  },
  id: 'marker-01',
  class: "my-markers",
  color: "#CEA052",
  size: 40
});