OK, to display the left pane I used the default webframe card with the following settings:
Webframe-Card
component: oh-webframe-card
config:
height: 545
outline: true
src: https://xxx.xxx.xxx.xxx:yyyy/static/karte.html
title: " Tankstellen in..."
next the map itself and the part to the right of it (up to the “----->”) in an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
html,body{
background: black;
}
.container{
height: 100%;
width: 100%;
}
#map {
height: 525px;
width: 53%;
display: inline-block;
}
/*
button {
height: 40px;
width: 100px;
border-color: #00FFFF;
background-color: #808080;
color: black; #000000 #19201C
}
th, td {
border: 2px ridge cyan;
color: white;
font-family:sans-serif;
font-size:12pt;
font-weight: bold;
}
*/
/******************************
Neue Styles
*/
table{
border-spacing: 0;
}
button{
height: 40px;
width: 100px;
background-color: #fff;
color: black;
border: none;
border-radius: 2px;
box-shadow: 3px 5px 2px -1px rgba(145, 145, 145, 0.75);
cursor: pointer;
}
button:hover, button:focus{
background-color: #ddd;
}
th, td {
border: 1px solid #bfbfbf;
color: white;
font-family:sans-serif;
font-size:10pt;
font-weight: normal;
padding: 2px 8px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<div>
<div class="container">
<div id="map"></div>
<div id="wrapper" style="display: inline-block;">
<table class="table table-bordered text-right" align="middle">
<tr id="aralE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/aral-1.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
<tr id="shellBlitzE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/shell.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="markHernE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/markant_png.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="totalE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/total_png.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="essoE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/esso.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="shellHertE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/shell.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="jetE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/jet_png.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
<tr id="bavariaE5">
<td class="customBtn" ></td>
<td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/petrol.svg" width="32" height="32"></img></td>
<td >Sorte E5</td>
<td >-----></td
</tr>
</table>
</div>
</div>
</div>
<script>
// Container-ID, Beschreibung, LAT, LNG, icon-name Beispiel: "52.5200066,13.4049540" (Berlin)
var planes = [
["aralE5", "<b>Aral Tankstelle</b><br>Friedrich-Ebert-Str. 14 Entfernung: 2,4 km", 77.4027069, 1.85095, "aral-1.svg"],
["shellBlitzE5", "<b>Shell Tankstelle</b><br>Blitzkuhlenstr. 97 Entfernung: 5,2 km", 77.493768, 2.920507, "shell.svg"],
["markHernE5", "<b>Markant Tankstelle</b><br>Herner Str. 249 Entfernung: 4,4 km", 77.48409, 2.91258, "petrol.svg"],
["totalE5", "<b>Total Tankstelle</b><br>Castroper Str. 123 Entfernung: 4,8 km", 77.404639, 2.914727, "petrol.svg"],
["essoE5", "<b>Esso Tankstelle</b><br>Akkoallee 63 Entfernung: 3,6 km", 77.403758, 1.6498, "esso.svg"],
["shellHertE5", "<b>Shell Tankstelle</b><br>Herterner Str. 100 Entfernung: 2,9 km", 77.409695, 1.81562, "shell.svg"],
["jetE5", "<b>Jet Tankstelle</b><br>Kurt‑Schumacher‑Allee 5 Entfernung: 4,5 km", 77.4057, 2.90251, "petrol.svg"],
["bavariaE5", "<b>Bavaria Tankstelle</b><br>Bochumer Str. 1 Entfernung: 5,8 km", 77.4827866, 2.913093, "petrol.svg"]
];
var map = L.map('map').setView([77.58903, 1.7594], 12);
/*
// Alte "Zuhause" Markierung, kann einfach wieder aktiviert werden
var circle = L.circle([77.58903, 1.7594], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 150
}).addTo(map);
circle.bindPopup("<b>Eigene Adresse:</b><br>My Street 1");
*/
var homeMarker = L.marker([77.58903, 1.7594], {
icon: L.icon({
iconUrl: "https://cdn0.iconfinder.com/data/icons/free-any-house/96/small_house-home-256.png",
iconSize: [30, 30]
})
}).addTo(map)
.bindPopup("<b>Eigene Adresse:</b><br>My Street 1");
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Achim',
maxZoom: 18,
}).addTo(map);
var btnMapping = [];
var icon = L.icon({
iconSize: [35, 35]
});
for (var i = 0; i < planes.length; i++) {
icon.options.iconUrl = "/static/bilder/petrol.svg";
//icon.options.iconUrl = "/static/bilder/" + planes[4];
// Zum testen kommentar aufheben
//icon.options.iconUrl = "https://cdn3.iconfinder.com/data/icons/eco-flat-2/512/gas_oil_station_petrol-256.png";
var marker = L.marker([planes[i][2], planes[i][3]], {icon: icon})
.bindPopup(planes[i][1])
.addTo(map);
var id = planes[i][0];
var tr = document.getElementById(id);
var td = tr.getElementsByClassName("customText")[0];
td.innerHTML = planes[i][1];
var btnField = tr.getElementsByClassName("customBtn")[0];
var btn = document.createElement("button");
btn.innerHTML = "Auf Karte zeigen";
btn.id = id + "Btn";
btnField.appendChild(btn);
btnMapping[btn.id] = L.stamp(marker); // btn id und marker id verknüpfen
L.DomEvent.on(btn, 'click', (e) => {
var marker2 = map._layers[btnMapping[e.target.id]]; // get marker over id
var latlng = marker2.getLatLng();
map.panTo(latlng);
marker2.openPopup();
})
}
</script>
</body>
</html>
and finally the right part with a second widget showing the item status for prices and open/closed. This area should be embedded in the left part next to “Sort E5”.
uid: Tankstellen_Infos
tags: []
props:
parameters:
- context: item
description: Item Preis AralE5
label: Item
name: item1
required: false
type: TEXT
- context: item
description: Item AralOpen
label: Item
name: item2
required: false
type: TEXT
- context: item
description: Item Preis ShellBlitzE5
label: Item
name: item3
required: false
type: TEXT
- context: item
description: Item ShellBlitzOpen
label: Item
name: item4
required: false
type: TEXT
- context: item
description: Item Preis MarkantE5
label: Item
name: item5
required: false
type: TEXT
- context: item
description: Item MarkantOpen
label: Item
name: item6
required: false
type: TEXT
- context: item
description: Item Preis TotalE5
label: Item
name: item7
required: false
type: TEXT
- context: item
description: Item TotalOpen
label: Item
name: item8
required: false
type: TEXT
- context: item
description: Item Preis EssoE5
label: Item
name: item9
required: false
type: TEXT
- context: item
description: Item EssoOpen
label: Item
name: item10
required: false
type: TEXT
- context: item
description: Item Preis ShellHertE5
label: Item
name: item11
required: false
type: TEXT
- context: item
description: Item ShellHertOpen
label: Item
name: item12
required: false
type: TEXT
- context: item
description: Item Preis JetE5
label: Item
name: item13
required: false
type: TEXT
- context: item
description: Item JetOpen
label: Item
name: item14
required: false
type: TEXT
- context: item
description: Item Preis BavariaE5
label: Item
name: item15
required: false
type: TEXT
- context: item
description: Item BavariaOpen
label: Item
name: item16
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: May 19, 2022, 3:39:49 AM
component: f7-card
config:
class: padding
expandable: false
outline: true
style:
background: black
height: 560px
textColor: white
width: 220px
slots:
default:
- component: Label
config:
style:
border: 1px solid
border-color: white
color: cyan
font-size: 12pt
height: 42px
left: 0px
letter-spacing: .75px
padding-bottom: 0px
padding-left: 0px
padding-right: 0px
padding-top: 5px
position: absolute
text-align: center
top: 8px
width: 110px
text: Preis je Ltr.
- component: Label
config:
style:
border: 1px solid
border-color: white
color: cyan
font-size: 12pt
height: 42px
left: 112px
letter-spacing: .75px
padding-bottom: 0px
padding-left: 0px
padding-right: 0px
padding-top: 5px
position: absolute
text-align: center
top: 8px
width: 135px
text: Status
- component: Label
config:
outline: true
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 55px
width: 60px
text: "=(items[props.item1].displayState) ? items[props.item1].displayState : items[props.item1].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 55px
width: 85px
text: "=(items[props.item2].displayState) ? items[props.item2].displayState : items[props.item2].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 121px
width: 60px
text: "=(items[props.item3].displayState) ? items[props.item3].displayState : items[props.item3].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 121px
width: 85px
text: "=(items[props.item4].displayState) ? items[props.item4].displayState : items[props.item4].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 187px
width: 60px
text: "=(items[props.item5].displayState) ? items[props.item5].displayState : items[props.item5].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 187px
width: 85px
text: "=(items[props.item6].displayState) ? items[props.item6].displayState : items[props.item6].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 254px
width: 60px
text: "=(items[props.item7].displayState) ? items[props.item7].displayState : items[props.item7].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 254px
width: 85px
text: "=(items[props.item8].displayState) ? items[props.item8].displayState : items[props.item8].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 321px
width: 60px
text: "=(items[props.item9].displayState) ? items[props.item9].displayState : items[props.item9].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 21px
position: absolute
text-align: center
top: 321px
width: 85px
text: "=(items[props.item10].displayState) ? items[props.item10].displayState : items[props.item10].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 388px
width: 60px
text: "=(items[props.item11].displayState) ? items[props.item11].displayState : items[props.item11].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 388px
width: 85px
text: "=(items[props.item12].displayState) ? items[props.item12].displayState : items[props.item12].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 454px
width: 60px
text: "=(items[props.item13].displayState) ? items[props.item13].displayState : items[props.item13].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 25px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 454px
width: 85px
text: "=(items[props.item14].displayState) ? items[props.item14].displayState : items[props.item14].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 23px
left: 0px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 521px
width: 60px
text: "=(items[props.item15].displayState) ? items[props.item15].displayState : items[props.item15].state"
- component: Label
config:
style:
border: 1px solid
border-color: white
font-size: min(max(50px, 2.5vw), 15px)
height: 23px
left: 112px
letter-spacing: .75px
padding-bottom: 20px
padding-left: 25px
padding-right: 25px
padding-top: 20px
position: absolute
text-align: center
top: 521px
width: 85px
text: "=(items[props.item16].displayState) ? items[props.item16].displayState