lo siento, soy nuevo en esto y tengo problemas para obtener el código correcto.
Estoy intentando cambiar el color de fondo de un marcador personalizado en leaflet.js. Básicamente necesito cambiar el valor del elemento CSS. Tengo el CSS y cómo lo estoy usando. Quiero cambiar el background-color en el .pin dentro del código, no CSS.
He probado muestras aquí y jquery pero obtengo errores.
El CSS es:
.location-pin { display: inline-block; position: relative; top: 50%; left: 50%; } .location-pin img { width: 46px; height: 46px; margin: -26px 0 0 -13px; z-index: 10; position: absolute; border-radius: 50%; background: #32383e; } .pin { width: 50px; height: 50px; border-radius: 50% 50% 50% 0; background: #32383e; position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -43px 0 0 -30px; }Y es el JS para usarlo:
var client = L.divIcon({ className: 'location-pin', html: '<img id"operatorimg" src="img/test.jpg"><div class="pin"></div>', iconSize: [30, 30], iconAnchor: [18, 30] }); var marker = L.marker(new L.LatLng(a[0], a[1]), { icon: client, title: title }); marker.bindPopup(title); markers.addLayer(marker); } map.addLayer(markers);Yo he tratado
$("pin").css("background:black");pero no funciona? Cualquier ayuda sera agradecida, gracias, y perdon si no lo he explicado bien o no lo he puesto aqui bien, la primera vez que lo uso. Gracias
Gracias por tu ayuda, al final lo hice así.
if (online_status === "YES") { console.log('online'); var client = L.divIcon({ className: 'location-pin', html: '<img id"operatorimg" src="img/'+imgts+'.jpg"><div class="pin online"></div>', iconSize: [30, 30], iconAnchor: [18, 30] }); var marker = L.marker(new L.LatLng(a[0], a[1]), { icon: client, title: title }); } else if (online_status === "NO") { console.log('offline'); var client = L.divIcon({ className: 'location-pin', html: '<img id"operatorimg" src="img/'+imgts+'.jpg"><div class="pin offline"></div>', iconSize: [30, 30], iconAnchor: [18, 30] }); var marker = L.marker(new L.LatLng(a[0], a[1]), { icon: client, title: title }); }Simplemente repasé los datos y, si estaba en línea o fuera de línea, cambié el CSS a verde o rojo.
Seguro que debe haber una forma más rápida con menos código, pero servirá por ahora, gracias de nuevo
En el código que ha proporcionado, no está utilizando el selector de clase correctamente, 'pin' es una clase CSS y, por lo tanto, debe seleccionarse con un '.' precediendo a su nombre. En segundo lugar, el método css tiene una sintaxis diferente.
$(".pin").css("background-color", "black");Dado que el elemento que está creando con la clase "pin" se agrega a DOM en tiempo de ejecución y no desea cambiar el archivo css, puede crear clases adicionales para los colores que desea usar
<div class="pin bgblack"></div>o podría agregar css en línea
<div class="pin" style="background-color:#000"></div>