0

I created a leaflet map that overlays map tiles using a GeoJson file. When I click on a area that I have overlaid a ugly black border appears as below.

I also have used leaflet tooltip to bind a tooltip to each feature area with the below code

layer.bindTooltip(this.returnTooltip(feature))

The black border appears only when I bind the tooltip. When the above code is commented out the black border doesn't appear when an area is selected.

enter image description here

I can't find where this border is getting added from, I just want to completely remove it.

Ovindu
  • 11
  • 2

1 Answers1

1

This is called outline and i.e. used for highlighting things without affecting the layout or for accessibility reasons.

You can use this to remove it everywhere:

*,
*:focus,
*:hover {
    outline: none;
}
hogan
  • 1,434
  • 1
  • 15
  • 32
  • Yes this works, my issue now is getting the CSS to apply in the map component. What I type in the CSS file does not seem to get applied. Any way to get around this? – Ovindu Jan 10 '23 at 11:06
  • @Ovindu can't you inspect that layer and look for the corresponding css selector? – hogan Jan 11 '23 at 07:19
  • I can do that, but adding the CSS to the layer is the issue I'm having – Ovindu Jan 12 '23 at 05:55