meshview/meshview/templates/packet_details.html

<div id="details_map"></div>

{% for seen in packets_seen %}
<div class="card mt-2">
    <div class="card-header">
        {{seen.node.long_name}}(
        <a hx-target="#node" href="/node_search?q={{seen.node_id|node_id_to_hex}}">
        {{seen.node_id|node_id_to_hex}}
        </a>
        )
    </div>
    <div class="card-body">
        <div class="card-text text-start">
            <dl>
                <dt>Import Time</dt>
                <dd>{{seen.import_time.strftime('%-I:%M:%S %p - %m-%d-%Y')}}</dd>
                <dt>rx_time</dt>
                <dd>{{seen.rx_time|format_timestamp}}</dd>
                <dt>hop_limit</dt>
                <dd>{{seen.hop_limit}}</dd>
                <dt>hop_start</dt>
                <dd>{{seen.hop_start}}</dd>
                <dt>channel</dt>
                <dd>{{seen.channel}}</dd>
                <dt>rx_snr</dt>
                <dd>{{seen.rx_snr}}</dd>
                <dt>rx_rssi</dt>
                <dd>{{seen.rx_rssi}}</dd>
                <dt>topic</dt>
                <dd>{{seen.topic}}</dd>
            </dl>
        </div>
    </div>
</div>
{% endfor %}

{% if map_center %}
<script>
    var details_map = L.map('details_map').setView({{ map_center | tojson }}, 12);
    var markers = L.featureGroup();
    markers.addTo(details_map);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(details_map);

    function getDistanceInMiles(latlng1, latlng2) {
        var meters = latlng1.distanceTo(latlng2);
        return meters * 0.000621371;
    }

    {% if from_node_cord %}
    var fromNodeLatLng = L.latLng({{ from_node_cord | tojson }});
    var fromNode = L.circleMarker(fromNodeLatLng, {
        radius: 10,
        color: 'red',
        weight: 1,
        fillColor: 'red',
        fillOpacity: .4
    }).addTo(markers);

    fromNode.bindPopup(`
        Sent by:   <b>{{node.long_name}}</b><br/>
        <b>Short:</b> {{node.short_name}}<br/>
        <b>Channel:</b> {{node.channel}}<br/>
        <b>Hardware:</b> {{node.hw_model}}<br/>
        <b>Role:</b> {{node.role}}<br/>
        <b>Firmware:</b> {{node.firmware}}<br/>
        <b>Coordinates:</b> [{{node.last_lat}}, {{node.last_long}}]
    `, { permanent: false, direction: 'top', opacity: 0.9 });
    {% endif %}

    {% for u in uplinked_nodes %}
    var uplinkNodeLatLng = L.latLng([{{ u.lat }}, {{ u.long }}]);

    {% if from_node_cord %}
    var distanceMiles = getDistanceInMiles(fromNodeLatLng, uplinkNodeLatLng).toFixed(1);
    {% endif %}

    var node = L.marker(uplinkNodeLatLng, {
        icon: L.divIcon({
            className: 'text-icon',
            html: `<div style="font-size: 12px; color: white; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; border-radius: 50%; background-color: blue; border: 1px solid blue;">{{u.hops}}</div>`,
            iconSize: [16, 16],
            iconAnchor: [8, 8]
        })
    }).addTo(markers);
    node.setZIndexOffset({{u.hops}}*-1);

    node.bindPopup(`
        Heard by: <b>{{u.long_name}}</b><br>
        <b>{{ u.short_name }}</b><br/>
        <b>Hops:</b> {{ u.hops }}<br/>
        <b>SNR:</b> {{ u.snr }}<br/>
        <b>RSSI:</b> {{ u.rssi }}<br/>
        {% if from_node_cord %}
        <b>Distance:</b> ${distanceMiles} miles <br/>
        {% endif %}
        <b>Coordinates:</b> [{{u.lat}}, {{u.long}}]
    `, { permanent: false, direction: 'top', opacity: 0.9 });
    {% endfor %}

    if (markers.getLayers().length > 0) {
        details_map.fitBounds(markers.getBounds().pad(0.1), { animate: true });
    }

    var legend = L.control({ position: 'bottomleft' });
    legend.onAdd = function(map) {
        var div = L.DomUtil.create('div', 'info legend');
        div.style.background = 'white';
        div.style.padding = '8px';
        div.style.border = '1px solid black';
        div.style.borderRadius = '5px';
        div.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
        div.style.color = 'black';
        div.style.textAlign = 'left';
        div.innerHTML = `
            <b>Legend</b><br>
            <svg width="20" height="20">
                <circle cx="8" cy="8" r="6" fill="blue" stroke="blue" stroke-width="1" fill-opacity="0.9"/>
            </svg> Receiving Node (Number is hop count)<br>
            <svg width="20" height="20">
                <circle cx="10" cy="10" r="8" fill="red" stroke="red" stroke-width="1" fill-opacity="0.4"/>
            </svg> Sending Node<br>
        `;
        return div;
    };
    legend.addTo(details_map);
</script>

{% endif %}