XF 2.3 Third Party Libraries using FA

[QuackieMackie]

I've been messing around with the libraries Leaflet, and it's plugin Leaflet Awsome Markers.

But i've noticed a bit of an issue when using Leaflet awsome markers. I can't get the font awsome icons to render without adding an external link <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" /> I personally don't want to use a css file if font awsome is already built into xenforo.

What would you suggest I do?

This is my template:

<xf:title>{{ phrase('nav.map') }}</xf:title>

<xf:css src="public:leaflet.less" />
<xf:js src="sylphian/map/leaflet/leaflet.js" min="1" />
<xf:css src="public:leaflet_awesome_markers.less" />
<xf:js src="sylphian/map/leaflet/leaflet.awesome-markers.js" min="1" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" />
<xf:css>
    #mapContainer {
        height: 500px;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }
   
    .block-body {
        overflow: hidden;
    }
</xf:css>

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <div id="mapContainer" style="height: 500px;"></div>
        </div>
    </div>
</div>

<xf:js>
    L.Icon.Default.imagePath = '/js/sylphian/map/leaflet/images/';
   
    L.Icon.Default.mergeOptions({
        iconUrl: 'marker-icon.png',
        iconRetinaUrl: 'marker-icon-2x.png',
        shadowUrl: 'marker-shadow.png'
    });

    (function initMap() {
        if (!window.L || !L.AwesomeMarkers) {
            console.error('Leaflet or AwesomeMarkers not loaded.');
            return;
        }

        const map = L.map('mapContainer').setView([{{ $mapCenter.lat }}, {{ $mapCenter.lng }}], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: {{ $mapZoom }},
            attribution: 'Map data from <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
       
        <xf:foreach loop="$markers" value="$marker">
            L.marker(
                [{$marker.lat}, {$marker.lng}],
                {
                    icon: L.AwesomeMarkers.icon({
                        icon: '{{ $marker.icon }}',
                        markerColor: '{{ $marker.color }}',
                        prefix: 'fa'
                    })
                }
            ).addTo(map)
             .bindPopup('<strong>{$marker.title}</strong><br>{$marker.content}');
        </xf:foreach>
    })();
</xf:js>

 

[QuackieMackie]

So I came up with a solution for this, but it took a bit of work.
Sure if you want the easy route, I'd say go with the <link> it works straight away and it's no effort. Else you can do what I did and modify the library.

Now It's not perfect and I'm going to continue makeing tweaks but here is my current setup:
leaflet.awesome-markers.js: https://gist.github.com/QuackieMackie/edecac6b9362059b65f544251245bb01
leaflet_awesome_markers.less: https://gist.github.com/QuackieMackie/28ab8c9c5a2282f27249dc2b487daa98

Then when I set up a marker in my template

    L.marker(
        [50, -20],
        {
            icon: L.AwesomeMarkers.icon({
                icon: 'alien',
                iconVar: 'solid',
                iconColor: 'red',
                markerColor: 'blue',
            })
        }
    ).addTo(map)
        .bindPopup('<strong>Marker #1</strong><br>This is a marker placed by QuackieMackie!');