Estoy usando Leaflet JS y Django para crear un sitio web de mapas. Tengo marcadores en el mapa que se muestran correctamente y estoy tratando de mostrar una tabla en un div separado al lado del mapa que muestra información que estaría en la ventana emergente.

También estoy usando una API Django REST para almacenar datos de marcadores como latitud y longitud, nombres, etc. Mi API devuelve esto:

 [ { "id": 2, "cube": "Industrial Cube North", "cubeurl": "https://dcwppntise010.edc.nam.gm.com/admin/login.jsp", "hostname": "acrptisepsn01", "domain": "nam", "personas": "Policy Service", "ip": "10.36.139.120", "structurename": "Rochester COMP", "streetaddress": "1000 Lexington Ave", "latitude": 43.18226, "longitude": -77.65599 },

Obtengo datos de mi API como:

 {% for item in data %} var marker = L.marker([{{item.latitude}},{{item.longitude}}]).bindPopup("<strong>{{item.hostname}}</strong><br/>{{item.personas}}").addTo(map).on('popupopen', function (e) { console.log(e.popup.getContent()) });; {% endfor %}

Registra el contenido en la consola pero no sabe cómo cambiar dinámicamente la información en la tabla para cada marcador (tienen información y ubicaciones diferentes)

He visto ejemplos como: http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanel.html

Eso usa GeoJson y no estoy seguro de cómo aplicar la misma lógica a mi configuración.

¡Gracias!

EDITAR: he investigado las funciones de clic en Javascript para capturar la información emergente en las variables y devolverla, pero el resultado no me define, lo que me lleva a pensar que no puedes hacer eso con Django

Necesito una tabla como esta: