无R-Server支持，能否创建可联动渲染表格的Leaflet地图用于Confluence？

Great question! Your idea to use Leaflet with htmlwidgets is totally feasible—and it’s actually a smart workaround given you don’t have access to an R-Server. Let’s walk through how to make the click-to-render-table functionality work, plus cover some even better alternatives tailored to your needs.

You can absolutely add dynamic table rendering instead of popups by combining Leaflet’s event handling with custom JavaScript via the onRender() function in htmlwidgets. Here’s a concrete R code example to implement this:

library(leaflet)
library(htmlwidgets)

# Sample regional data: GeoJSON boundaries + corresponding table content
region_data <- list(
  "Region A" = list(
    geojson = list(type = "Polygon", coordinates = list(list(c(-100, 30), c(-99, 30), c(-99, 31), c(-100, 31), c(-100, 30)))),
    table = data.frame(Item = c("Item 1", "Item 2"), Value = c(10, 20))
  ),
  "Region B" = list(
    geojson = list(type = "Polygon", coordinates = list(list(c(-99, 30), c(-98, 30), c(-98, 31), c(-99, 31), c(-99, 30)))),
    table = data.frame(Item = c("Item 1", "Item 2"), Value = c(15, 25))
  )
)

# Build base Leaflet map
m <- leaflet() %>%
  addTiles() %>%
  # Add regional GeoJSON layers with unique IDs
  addGeoJSON(region_data[["Region A"]]$geojson, layerId = "Region A") %>%
  addGeoJSON(region_data[["Region B"]]$geojson, layerId = "Region B") %>%
  # Add an empty container to hold the table
  addControl(html = '<div id="table-container" style="background:white; padding:10px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,0.2);"></div>', 
             position = "bottomright")

# Add custom JS to handle clicks and render tables
m <- onRender(m, '
function(el, x) {
  const map = this;
  const tableContainer = document.getElementById("table-container");
  
  // Listen for clicks on GeoJSON layers
  map.on("geojsonclick", function(e) {
    const regionId = e.layer.options.layerId;
    const tableData = HTMLWidgets.dataframeToD3(x.region_table_data[regionId]);
    
    // Clear previous table
    tableContainer.innerHTML = "";
    
    // Build new table
    const table = document.createElement("table");
    table.style.borderCollapse = "collapse";
    
    // Add header
    const headerRow = document.createElement("tr");
    Object.keys(tableData[0]).forEach(col => {
      const th = document.createElement("th");
      th.textContent = col;
      th.style.border = "1px solid #ccc";
      th.style.padding = "8px";
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
    
    // Add rows
    tableData.forEach(row => {
      const tr = document.createElement("tr");
      Object.values(row).forEach(val => {
        const td = document.createElement("td");
        td.textContent = val;
        td.style.border = "1px solid #ccc";
        td.style.padding = "8px";
        tr.appendChild(td);
      });
      table.appendChild(tr);
    });
    
    // Attach table to container
    tableContainer.appendChild(table);
  });
}
') %>%
  # Pass table data to the JS environment
  setWidgetOption("region_table_data", lapply(region_data, function(x) x$table))

# Export as a self-contained HTML file
saveWidget(m, "leaflet-table-map.html", selfcontained = TRUE)

How this works: #

• We add GeoJSON layers for each region with unique layerIds to identify which area was clicked.
• An empty div is added to the map to act as the table container.
• The onRender() function injects JavaScript that listens for geojsonclick events, fetches the corresponding table data, and dynamically builds a table in the container.
• saveWidget() exports everything as a single, self-contained HTML file that you can upload to Confluence.

While the htmlwidgets approach works, here are two optimized methods depending on your comfort with code:

Option A: Leaflet Popups with Tables #

If you don’t need a persistent sidebar table, embedding the table directly in a Leaflet popup is simpler and more space-efficient. Modify the JS in onRender() to bind a popup with a table instead of using a separate container:

// Replace the geojsonclick logic with this
map.on("geojsonclick", function(e) {
  const regionId = e.layer.options.layerId;
  const tableData = HTMLWidgets.dataframeToD3(x.region_table_data[regionId]);
  
  // Build table HTML string
  let tableHtml = '<table style="border-collapse:collapse;">';
  // Add header
  tableHtml += '<tr>';
  Object.keys(tableData[0]).forEach(col => {
    tableHtml += `<th style="border:1px solid #ccc; padding:8px;">${col}</th>`;
  });
  tableHtml += '</tr>';
  // Add rows
  tableData.forEach(row => {
    tableHtml += '<tr>';
    Object.values(row).forEach(val => {
      tableHtml += `<td style="border:1px solid #ccc; padding:8px;">${val}</td>`;
    });
    tableHtml += '</tr>';
  });
  tableHtml += '</table>';
  
  // Open popup with table
  e.layer.bindPopup(tableHtml).openPopup();
});

Option B: Pure JavaScript Leaflet Map #

If you’re comfortable with basic HTML/JS, building a pure JS Leaflet map avoids any R dependencies entirely. This results in a lighter, more flexible file that’s easy to embed in Confluence. Here’s a minimal example:

<!DOCTYPE html>
<html>
<head>
  <title>Clickable Region Table Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    #map { height: 600px; width: 100%; }
    #table-container { 
      position: absolute; 
      bottom: 20px; right: 20px; 
      background: white; padding: 10px; 
      border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.2);
      max-width: 300px;
    }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="table-container"></div>

  <script>
    // Initialize map
    const map = L.map('map').setView([30.5, -99], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // Regional data
    const regionData = {
      "Region A": {
        geojson: {"type": "Polygon", "coordinates": [[[-100, 30], [-99, 30], [-99, 31], [-100, 31], [-100, 30]]]},
        table: [{"Item": "Item 1", "Value": 10}, {"Item": "Item 2", "Value": 20}]
      },
      "Region B": {
        geojson: {"type": "Polygon", "coordinates": [[[-99, 30], [-98, 30], [-98, 31], [-99, 31], [-99, 30]]]},
        table: [{"Item": "Item 1", "Value": 15}, {"Item": "Item 2", "Value": 25}]
      }
    };

    // Add regions to map and attach click handlers
    Object.keys(regionData).forEach(regionId => {
      const layer = L.geoJSON(regionData[regionId].geojson).addTo(map);
      layer.on('click', () => renderTable(regionData[regionId].table));
    });

    // Table rendering function
    function renderTable(data) {
      const container = document.getElementById('table-container');
      container.innerHTML = '';

      const table = document.createElement('table');
      // Header
      const headerRow = document.createElement('tr');
      Object.keys(data[0]).forEach(col => {
        const th = document.createElement('th');
        th.textContent = col;
        headerRow.appendChild(th);
      });
      table.appendChild(headerRow);

      // Rows
      data.forEach(row => {
        const tr = document.createElement('tr');
        Object.values(row).forEach(val => {
          const td = document.createElement('td');
          td.textContent = val;
          tr.appendChild(td);
        });
        table.appendChild(tr);
      });

      container.appendChild(table);
    }
  </script>
</body>
</html>

Whichever method you choose, here’s how to get it into Confluence:

• Self-contained HTML file: Upload the exported HTML as an attachment to your Confluence page. Then use the {iframe} macro to embed it, e.g.:

  {iframe: src=attachments/leaflet-table-map.html, width=100%, height=600px}
  

• Pure JS code: If your Confluence instance allows HTML macros, paste the full HTML code into an {html} macro. For security, you may need to download Leaflet’s CSS/JS files and host them as Confluence attachments (update the links to use relative paths).

All these methods are fully compatible with Confluence and will let users click map regions to see the corresponding tables.

内容的提问来源于stack exchange，提问作者Patrick Balada