Estilo de los iconos de marcador

Siempre puedes utilizar CSS para personalizar el aspecto de los elementos de la interfaz de usuario.

Ejemplos

Personalizar el tamaño del icono del marcador:

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;
}

Dependiendo del tamaño de su icono, asegúrese de cambiar las líneas 2 y 3, así como las líneas 13 y 14 (efecto hover).

Consejo secreto:

Incluso puedes utilizar GIF animados como iconos marcadores 🥳.

¿Le ha resultado útil este artículo?

Artículos relacionados

¿Necesita ayuda?

¿No encuentra la respuesta que busca?
Contacto

ES