For a Drupal site I'm working on, I decided to create custom map icons to replace the standard set in Leaflet maps. Using Photoshop, I meticulously crafted these icons and ensured that the final image was trimmed to perfection with no extra pixels at the edges. However, when I uploaded the file to the map, everything seemed fine except for one glaring issue: there was unexpected extra space surrounding the image.
The HTML code looks like this:
<div class="leaflet-div-icon3">
<img src="example_image.png" height="90" width="90" border="0"/>
</div>The CSS class .leaflet-div-icon3 appears to be empty but serves as a necessary placeholder to properly display the image within the Leaflet module.
Despite setting the dimensions of the image box to 90x90 pixels, the actual icon occupies only a small portion of that space.
I've been racking my brain trying to solve this mystery. If anyone has any insights or suggestions that may have eluded me, I would truly appreciate your feedback. Unfortunately, I cannot share an image due to limitations on posting privileges.