ლიფლეტის კასტომიზებული მარკერის (divIcon) html/css არ მუშაობს

ამჟამად ვცდილობ leaflet-ის მარკერის პერსონალიზებას divIcon-ით და კასტომიზირებული html-ით. მიზანი არის ჩემი მარკერის წარმოჩენა მსგავსად შემდეგისა:

მე მაქვს შესაძლებლობა დავამზადო მარკერი და divIcon შემდეგი კოდით:

    leaflet.marker(NETHERLANDS_CENTER, {
      icon: leaflet.divIcon({
        html: '<div class="vehicle-container"><div><img src="../../assets/images/bus-solid.svg" width="16" height="16"/></div><div><p>HTM</p></div></div>',
      })
    }).addTo(this.map);

ამის შედეგად რუკაზე გამოჩნდება შემდეგი:

ეს კოდი არის ჩემს Angular map კომპონენტში, რომელსაც თავისი CSS ფაილი აქვს. თუმცა, მიუხედავად იმისა, რას გავაკეთებ ამ CSS ფაილში, ეს არანაირ გავლენას არ ახდენს რუკაზე ნაჩვენები ელემენტების სტილზე.

მე ვცადე vehicle-container კლასის მორგება ნებისმიერი შემთხვევითი ნივთებით, უბრალოდ ეფექტის მისაღებად. მე ვცადე divIconOptions-ის className თვისების გამოყენება, რომელიც აშორებს თეთრ კვადრატს, მაგრამ მას შემდეგ ვერავინ შეცვალა არაფერს ამ კლასის სახელის CSS-ის მორგებით.

რაც შეეხება მარკერს, ასევე შევამოწმე და ვნახე, რომ ის იყო შეფუთული .leaflet-div-icon კლასის ელემენტში, რომლის სტილის შეცვლას ვცადე, მაგრამ შედეგი არ მოჰყოლია.

არ postoji რაიმე ხერხი leaflet მარკერების სტილიზებისთვის, თუ როგორღა უნდა გავაკეთო ეს?

უპასუხე #1

შეგიძლიათ მიამატოთ ხაზოვანი სტილები შედარებით წაკითხვად გზით ასე:

 //your styles go here
 const markerHtmlStyles = `
      background-color: #fff;
      width: fit-content;
      height: 3rem;`

leaflet.marker(NETHERLANDS_CENTER, {
      icon: leaflet.divIcon({
        html: `<div style="${markerHtmlStyles}" class="vehicle-container"><div><img src="../../assets/images/bus-solid.svg" width="16" height="16"/></div><div><p>HTM</p></div></div>`,
      })
    }).addTo(this.map);

ხო, დააპროექტე className როგორც '' იმისათვის, რომ თავიდან აიცილო თეთრი კვადრატი. შესაბამისად მართე მაჩვენებლების CSS ფაილი, რათა არ მიიღო ნაგულისხმევი სტილირება.

მართლაც შეიძლება იყოს უკეთესი გზა, მაგრამ ეს არის ყველაზე სწრაფი გზა ამის გაკეთების.