I'm using Leaflet, a third party mapping library. Leaflet dynamically creates tooltips for each map feature. You can write custom HTML for these tooltips, but I want to use a LWC component there. Here's some code that illustrates what I need to accomplish:

import leaflet from '@salesforce/resourceUrl/Leaflet';

L.geoJSON(geojson, {
    onEachFeature: function (feature, layer) {
        // I want to use a LWC component here instead of a <div>
        // something like: let tooltipHTML = '<c-my-cmp feature={feature}></c-my-cmp>'
        let tooltipHTML = '<div>' + feature.someText + '</div>';

Is there any way to do this? I know that we can't dynamically create LWC components, but maybe there is some workaround.

In my case, I know what every feature will be, so it would be possible to render all LWC for them in the template and then maybe in some way reparent them onto dynamically created nodes, but is that even possible?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.