Styling the marker icons

You can always use CSS to customize the look of the UI elements.

Examples

Customizing the marker icon size:

CSS
.open-user-map .box-wrap .map-wrap .leaflet-map img.leaflet-marker-icon:not(.marker-cluster) {
  --icon_height: 41px; /* customize */
  --icon_width: 26px; /* customize */

  width: var(--icon_width) !important;
  height: var(--icon_height) !important;
  margin-top: calc(-1 * var(--icon_height)) !important;
  margin-left: calc(var(--icon_width) / -2) !important;
}

/* Icon Size on Mouseover */
.open-user-map .box-wrap .map-wrap .leaflet-map img.leaflet-marker-icon:not(.marker-cluster):hover {
  --icon_height: 51px; /* customize */
  --icon_width: 36px; /* customize */

  width: var(--icon_width) !important;
  height: var(--icon_height) !important;
  margin-top: calc(-1 * var(--icon_height)) !important;
  margin-left: calc(var(--icon_width) / -2) !important;
}

Depending on the size of your icon, be sure to change line 2 and line 3 as well as lines 13 and 14 (hover effect).

Secret tip:

You can even use animated GIFs as marker icons 🥳

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Contact Support

EN