sorry I am new to this and having a problem getting the right code in place.
I am trying to change the background color of a custom marker in leaflet.js. I basically need to change the value of the CSS element. I have the CSS and how I am using it. I want to change the background-color on the .pin within the code, not CSS.
I have tried samples on here and jquery but get errors.
The CSS is:
.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;
}
And is the JS for using it:
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);
I have tried
$("pin").css("background:black");
but does not work? Any help would be appreciated, thank you, and sorry if I haven't explained it correctly or put it on here right, the first time I have used it. Thanks
Thanks for your help, I did it this way in the end.
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
});
}
I just looped through the data and if online or offline changed the CSS to green or red.
Sure there must be quicker way with less code but will do for now, thanks again
In the code you have provided, you aren't using the class selector properly, 'pin' is a CSS class and should therefore be selected with a '.' preceding its name. Secondly, the css Method has a different syntax.
$(".pin").css("background-color", "black");
Since the element you are creating with the class "pin" is added to DOM in runtime and dont want to change the css file, you could create additional classes for the colors you want to use
<div class="pin bgblack"></div>
or you could add inline css
<div class="pin" style="background-color:#000"></div>