У меня довольно сложный файл .kml, который я пытаюсь построить, используя пакет leaflet в R (без Shiny). По большей части это работает из коробки;тем не менее, я пытаюсь воспроизвести некоторые функции, которые работают в Google Планета Земля, где пользователь нажимает на значок, и появляется довольно симпатичный HTML-код с интерактивными таблицами. Я действительно не знаю html / css / js, поэтому я немного над головой.
Похоже, что все эти функции в .kml встроены в тег description . Тем не менее, когда я пытаюсь: ...addKML(kmlfile, group= 'mygroupname', popupProperty = 'description', labelProperty = 'name' ) %>%
, я вижу заголовки таблицы, но функция нажатия не работает. Когда я устраняю неполадки в браузере, я получаю сообщение об ошибке («openPage» не определено), поэтому функции не видят компиляцию.
Вот тег описания, который я пытаюсь построить:
<description><![CDATA[<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-top:none;
padding:0;
width:100%;
border-collapse:collapse;
table-layout: auto;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background:#d7e9ed;
padding:5px;
text-align: left;
border-left:solid #D9D9D9 1.0pt;
border-bottom:1px solid #ddd;
border-right:solid #D9D9D9 1.0pt;
}
td {
border-top:none;
border-left:solid #D9D9D9 1.0pt;
border-bottom:1px solid #ddd;
border-right:solid #D9D9D9 1.0pt;
padding:2px;
}
p {
margin:0;
font-size:9.0pt;
font-family:"Arial",sans-serif;
color:#4d4947;
}
p.head1 {
font-weight:bold;
font-size:12.0pt;
color:white;
}
p.key {
font-weight:bold;
}
p.keyindent {
font-weight:bold;
margin-left:20px;
}
p.negative {
color:red;
}
p.positive {
color:green;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
body, html {
width: 2000px;
height: 1000px;
padding: 0;
margin: 0;
font-size:9.0pt;
font-family:"Segoe UI",sans-serif;
}
.tablink {
float: left;
background-color: #d3d3d3;
border: none;
outline: none;
cursor: pointer;
padding: 8px 15px;
margin: 0;
font-weight:normal;
color: #615d5c;
margin: 0px 2px 0px 2px;
}
.tablinkActive {
color: white;
background-color: #20b6db;
font-weight: bold;
}
.tablink:hover {
color: white;
background-color: #2196c4;
}
.tabcontent {
display: none;
padding: 0;
}
.showTabContent {
display: block;
}
.btnCollapsible {
height: 100%;
width: 100%;
color: #20b6db;
cursor: pointer;
float: left;
text-align: left;
border: none;
outline: none;
padding: 0in 5.4pt 0in 5.4pt;
margin: 0;
font-weight:bold;
background-color: #f0f0ef;
}
td.tdCollapsible {
padding: 0;
}
.btnActive, .btnCollapsible:hover {
background-color: #f0f0ef;
}
.hiderows {
display: none;
}
.showrows {
display: table-row-group;
margin-left: 15px;
background-color: #f0f0ef;
}
i.arrow {
border: solid #20b6db;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
margin: 0px 5px 2px 0px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head><body>
<button class="tablink" onclick="openPage('AAA', this)" id="defaultOpen">AAA </button>
<button class="tablink" onclick="openPage('BBB', this)">BBB </button>
<button class="tablink" onclick="openPage('CCC', this)">CC </button><button class="tablink" onclick="openPage('CCC', this)">CCC </button>
<div id="AAA" class="tabcontent">
<table>
**LOTS OF TABLE CONTENT**
</table>
</div>
<script>
function openPage(pageName,thisElement) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++)
{
tabcontent[i].classList.remove("showTabContent");
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++)
{
tablinks[i].classList.remove("tablinkActive");
}
document.getElementById(pageName).classList.toggle("showTabContent");
thisElement.classList.toggle("tablinkActive");
}
function toggleRows(thisElement)
{
var iconElement = thisElement.getElementsByTagName("i")[0];
thisElement.classList.toggle("btnActive");
if (iconElement.classList.contains("right"))
{
iconElement.classList.remove("right");
iconElement.classList.add("down");
}
else
{
iconElement.classList.remove("down");
iconElement.classList.add("right");
}
document.getElementById("tb" + thisElement.id).classList.toggle("showrows");
}
document.getElementById("defaultOpen").click();
</script></body></html>]]></description>