FitBounds doesn't care of the size of the Icon

[existe-deja]

Description

Maybe this issue isn't one. What I try to do is to render a component on the map and center the map properly to fit everything.
What I learned from the docs, issues, stackoverflow is if I want to render custom html (so vue component) I need to wrap it into the L-Icon element. I think is very hacky to do this, but once I rewrote some css it works.

Now I don't know how to center the map with the elements that could be large (think of a product card)

Ideas to resolve this before any extra coding:

• better injection of custom html so it could be taken into consideration during the computations
• use another method to move the map properly (fitBounds is for geo coordinates, xxx is for the "map camera")

Live Demo

https://codesandbox.io/s/brave-jang-tqoe9?file=/src/App.vue

Steps to Reproduce

Add some custom html inside an icon or a popup and try to fit the map properly.

Expected Results

Size of rendered elements should care during the centering of the map.

Actual Results

fitBounds compute the bounds of an invisibe rect with all the latLngs, but not the bounds of the rendered elements.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Leaflet: v1.7.1
• Vue2Leaflet: v2.7.0

[mikeu]

Hi @existe-deja , thanks for the issue report. Are you saying that Leaflet provides the functionality you are looking for, but it does not work correctly under Vue2Leaflet? If so, then it would be great to know about that more specifically, perhaps with a live demo of vanilla Leaflet working as intended, in combination with the demonstration of Vue2Leaflet's not functioning correctly, or an indication of which "xxx" method is not working under the Vue wrappers.

If not however, it sounds to me as if what you are asking for is to have new mapping functionality added to Leaflet, which is a completely independent project that this one is not affiliated with, and has no control over. If you feel that their approach to adding custom markers could be improved or their methods for changing map state are insufficient, then you'll need to either open an issue with them, or perhaps find or write a plugin that better meets your needs.

We are happy to work with you to make sure that all of Leaflet's functionality is available under Vue through the Vue2Leaflet wrappers, but adding new mapping functionality above and beyond what Leaflet provides is beyond the scope of this library.

[existe-deja]

Hi @mikeu, thanks for your answer.

You're right, this issue finally address at least two problems and one of them (fitBounds doesn't care of marker size) is not related to this repo. I will ask for an answer on the leaflet's repo.

Another one is how to put extra html on the map when it's not related to controls. Leaflet provides divIcon but I can't find it on the library. Does it exists?

Finally, maybe I'm trying to do something that Leaflet doesn't allow and so do vue2-leaflet.
So, I'm asking you because you have a perfect understanding of the project: Is it possible to display something that looks like a card with some rich informations inside (img, buttons, links) on the map?
If you don't have the answer, or you don't have time, or you simply don't want to answer at all, I understand it and will ask for help somewhere else.

Thanks for your help and your work on this package.

[mikeu]

In one of the few places that Vue2Leaflet breaks slightly from its usual pattern of matching the Leaflet API one-to-one, it provides only a single icon component, and detects whether it should use a Leaflet icon or divIcon, depending on how it is configured.

If you use <l-icon><something></l-icon> so that the Vue component element has a non-empty innerHTML, or if you explicitly pass <l-icon :html="myHtmlString"/>, then the result on the map will be a Leaflet divIcon. Otherwise, if you pass any of the various options for configuring a simple image icon (e.g. iconUrl, iconSize, shadowUrl, ...) or simply leave everything as the defaults, then an image-based Leaflet icon will be used instead.

It is certainly possible to include html elements on the map in this way, though I think you will continue to have difficulty with the sizing and centring of the content over a specific geographic point, unless you are able to use a fixed height and width on the content.

Depending on what exactly your use case is, an alternative that has often worked well for me is to use smaller, simpler icons in general, and include an <l-popup> inside the marker to display an information card above the point when clicked.

Here's an example that minimally demonstrates both approaches: https://codesandbox.io/s/v2l-html-icon-myorv?file=/src/App.vue

[existe-deja]

Thank you for the explanations on the Icon component and for the popup approach. I'll try my best with this or rethink the interface otherwise.