Issue with SCSS Styling in Leaflet Map with OpenStreetMap
I’m using OpenStreetMap and Leaflet to draw on a map. I have a function updateMarkers()
that clears existing markers and creates new ones based on a filtered location list. When I include additional HTML styling for the markers directly in the TypeScript code like this:
// TypeScript code
const numberHTML = `<div class="number-marker"
style="background-color: #ff0000;
color: #ffffff;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
">${index + 1}</div>`;
and then add the markers to the map, it works as expected.
However, when I simplify the HTML and move the styling to the SCSS file like this:
// TypeScript code
// TypeScript code
const numberHTML = `<div class="number-marker">${index + 1}</div>`;
and in the SCSS file:
//search.component.scss
.number-marker {
background-color: #ff0000;
color: #ffffff;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: #00ff00;
color: #000000;
}
}
updateMarkers() {
// Mevcut markerları temizle
this.markers.forEach((marker) => marker.remove());
this.markers = [];
// Yeni markerlar oluştur
this.filteredLocationList.forEach((park, index) => {
const latitude = parseFloat(park.lat);
const longitude = parseFloat(park.lng);
// Rakam içeren HTML oluştur
const numberHTML = `<div class="number-marker"
">${index + 1}</div>`;
const marker = L.marker([latitude, longitude], {
icon: L.divIcon({
html: numberHTML,
className: 'number-marker-icon',
iconSize: [38, 38],
}),
}).addTo(this.map);
this.markers.push(marker);
});
}
the SCSS styling doesn’t seem to apply. I’m having trouble understanding why the SCSS code is not working in this case. Any insights would be appreciated!
Why does my SCSS file not work when I write CSS directly, but works when I add CSS styles inline in the HTML?
2
Answers
I will share a website that features example projects related to Leaflet, beautifully crafted with numerous projects. You can customize and integrate them into your own project based on your needs.
All projects : https://leafletjs.com/examples.html
I used this project https://leafletjs.com/examples/choropleth/