Customizing Pins

By default, the map uses a traditional Google Maps pin colored to match the color of your event or item. But you have complete control over what the pin looks like and can customize the pin based on the item's calendar or any mapped field.

Getting Started - Using Event Actions

You'll customize pins in a Before Event Rendered event action. If you haven't used event actions before, you'll find an overview here. Note that you can use draft settings mode to play with these actions, only publishing your work once you're ready for other users to see your changes.

The example action below includes lines for modifying the background, borders, "dot" or glyph color, and for swapping out the dot/glyph for a new icon:

// Custom Map Pins v1.00

// Purpose:
// Changes the appearance of the pin in DayBack's map
// Action Type: Before Event Rendered
// Prevent Default Action: No

// More info on custom App Actions here:
// https://docs.dayback.com/article/20-event-actions

if (params.data.type === 'map') {
  const icon = document.createElement('div');
  icon.innerHTML = '<i class="fa fa-truck" aria-hidden="true"></i>';
  const pinElement = dbk.mapManager.get('pinElement');				
  
  const pinColor = new pinElement({
	background: 'blue',
	borderColor: 'black',
	glyphColor: 'pink',
    	glyph: icon,
  });
  
  event.map.markerOptions = {
      content: pinColor.element
  }
}

Here is what that action does: each item from that specific calendar gets a blue pin with the "dot" glyph replaced by a pink truck:

If you want to manipulate the glyph by leave the background color alone (so it continues to match the calendar item's color, you'll reference that color like this:

// Purpose:
// Changes the appearance of the pin in DayBack's map
// Action Type: Before Event Rendered
// Prevent Default Action: No

// More info on custom App Actions here:
// https://docs.dayback.com/article/20-event-actions

if (params.data.type === 'map') {
  const icon = document.createElement('div');
  icon.innerHTML = '<i class="fa fa-truck" aria-hidden="true"></i>';
  const pinElement = dbk.mapManager.get('pinElement');	

  // Convert rgb color codes to the hex format, which 
  // is a required format for pinElement objects
  
  const color = event.color.startsWith('rgb') 
       ? utilities.rgbToHex(event.color) 
       : event.color; 			
  
  const pinColor = new pinElement({
	background: color,
	borderColor: 'black',
	glyphColor: 'pink',
    	glyph: icon,
  });
  
  event.map.markerOptions = {
      content: pinColor.element
  }
}

Note that the glyph can be text, a number, or emoji: really anything that can be read by a browser:

 glyph: '❤️',

You can also use the glyph to include something like your truck number or team initials. If you have mapped a custom field with this information, you'd add it like this, where 1741302417090-7631187685 is the ID of your custom field.

glyph: event['1741302417090-7631187685'],

Using Images

Instead of manipulating Google's pinElement , you can replace the pin with an image of your own. In the action below, you'll specify the URL for the image you'd like to use:

// Custom Pin Image v1.00

// Purpose:
// Replace the pin in DayBack's map witb an image
// Action Type: Before Event Rendered
// Prevent Default Action: No

// More info on custom App Actions here:
// https://docs.dayback.com/article/20-event-actions

if (params.data.type === 'map') {
  const beachFlag = document.createElement('img');
  beachFlag.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';				
  
  event.map.markerOptions = {
      content: beachFlag,
  }
}

And here is what that example does:

More examples can be found in Google's documentation here: Create Markers with Graphics.

Making Pins Conditional

If you only want your formatting to change for a subset of items within a calendar, you can wrap the content part of the action in an If statement. In this example, we'll only alter the pin for items with the status "On Hold."

if (event.status.includes('On Hold')) {
    event.map.markerOptions = {
      content: beachFlag,
    }
  }
}

Labels

You can add tooltips to map pins by following the same instructions you'd use in the calendar: Tooltips.

Create map-specific tooltips, using this if statement to see if something is in the map or not:

if (params.data.type === 'map') {
   // your tooltip code
}

You can add labels by specifying a <span> within your pin content and then adding CSS to DayBack to format that text. Here is an example where the action adds the customer's name and the CSS formats it. (Contact__r.Name in this case is a salesforce field. You can use the name of any mapped field.)

// Custom Map Pins v1.00

// Purpose:
// Changes the appearance of the pin in DayBack's map
// Action Type: Before Event Rendered
// Prevent Default Action: No

// More info on custom App Actions here:
// https://docs.dayback.com/article/20-event-actions

if (params.data.type === 'map') {
  const icon = document.createElement('div');
  icon.innerHTML = '<i class="fa fa-truck" aria-hidden="true"></i><span class="pinLabel">[[Contact__r.Name]]</span>';
  const pinElement = dbk.mapManager.get('pinElement');				
  
  const pinColor = new pinElement({
	background: 'blue',
	borderColor: 'black',
	glyphColor: 'pink',
    	glyph: icon,
  });
  
  event.map.markerOptions = {
      content: pinColor.element
  }
}

Here is the CSS (if you haven't added CSS to DayBack before, you can learn more here):

.pinLabel {
  background: black;
  color: white;
  position: absolute;
  max-width: 72px;
  text-align: center;
  height: 20px;
  border-radius: 5px;
  margin-left: 8px;
  margin-top: -10px;
  line-height: 1.5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left:4px;
  padding-right:4px;
}