If you're looking for a Vue 2 sample project, check out this link
When working on the declaration of divIcon in LeafletTest.vue, here is an example:
const cloudIcon = L.divIcon({
html: thecloud,
className: 'my-custom-icons',
iconSize: [size, size],
iconAnchor: [size/2, size/2]
})
In order for Leaflet to recognize the my-custom-icons style, I included the following code:
<style scoped>
#mapContainer {
width: 500px;
height: 500px;
}
</style>
<style>
.my-custom-icons {
background-color: red;
}
</style>
I would prefer if the style section looked like this:
<style scoped>
#mapContainer {
width: 500px;
height: 500px;
}
.my-custom-icons {
background-color: red;
}
</style>
However, when I try to place my-custom-icons inside the scoped components section, it doesn't work with divIcon. Is there a way to organize my style section like this? If so, how can I achieve that?