Issue with SCSS Styling in Leaflet Map with OpenStreetMap

Question

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?

Answer 1

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/

Answer 2

// Function to update markers on the map based on a filtered location list.

updateMarkers() {
    // Clear existing markers
    this.markers.forEach((marker) => marker.remove());
    this.markers = [];

    // Create new markers for each location in the filtered list
    this.filteredLocationList.forEach((park, index) => {
        // Extract latitude and longitude from the park data
        const latitude = parseFloat(park.lat);
        const longitude = parseFloat(park.lng);

        // Generate HTML for the marker with a colored number inside a circle
        const numberHTML = `<div class="number-marker-${index}"
            style="background-color: #ff0000;
            color: #ffffff; 
            border-radius: 50%; 
            width: 38px; 
            height: 38px; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            ">${index + 1}</div>`;

        // Create a new marker and add it to the map
        const marker = L.marker([latitude, longitude], {
            icon: L.divIcon({
                html: numberHTML,
                className: 'number-marker',
                iconSize: [38, 38],
            }),
        }).addTo(this.map).bindPopup(() => {
            // Display park capacity in a popup when the marker is clicked
            this.openCloseBlankPage();
            return "Park Capacity:" + park.capacity;
        });

        // Listen for mouseover event to change marker appearance
        marker.on('mouseover', () => {
            console.log("mouseover" + index);
            const markerElement = marker.getElement();
            if (markerElement) {
                const numberMarker = markerElement.querySelector('.number-marker-' + index) as HTMLElement;
                if (numberMarker) {
                    numberMarker.style.backgroundColor = "#ffffff";
                    numberMarker.style.color = "#000000";
                }
            }
            this.onMouseOver(index);
        });

        // Listen for mouseout event to revert marker appearance
        marker.on('mouseout', function () {
            console.log("mouseout" + index);
            const markerElement = marker.getElement();
            if (markerElement) {
                const numberMarker = markerElement.querySelector('.number-marker-' + index) as HTMLElement;
                if (numberMarker) {
                    numberMarker.style.backgroundColor = "#ff0000";
                }
            }
        });
        this.markers.push(marker);
    });
}