mapy api a bodiků

by Petr Haluza

HTML

<script src="https://api.mapy.cz/loader.js"></script>

<script type="text/javascript" src="https://api.mapy.cz/loader.js"></script>
<script type="text/javascript">Loader.load();</script>

<div id="modalPartneri">
<div id="partnerList">
  <ul>
    <li>Partner1, Letovice <button id='p1'>Vybrat</button></li>
    <li>Partner2, Boskovice <button id='p2'>Vybrat</button></li>
    <li>Partner3, Brno <button id='p3'>Vybrat</button></li>
  </ul>
</div>  
<div id="APIMAPA"></div>
</div>

CSS

#modalPartneri {display:flex; width:80vw; max-width:100%; height:80vh; margin: 0 auto; border: 2px solid #789; border-radius: 7px; box-shadow: 0 3px 5px -3px #456 }
#partnerList {width:400px; border-right: 2px solid #789;}
#APIMAPA {width:100%;height:100%}
.smap .bodik { color:red; font-family: arial;
position:absolute; left:25px; bottom:25px; }
.smap .znacka img {width:3em}
.smap img.znacka {width:4em}
.smap .card {opacity:.8}
.smap .card:hover {opacity:.95}

JavaScript

var mapa = new SMap(JAK.gel("APIMAPA"));
var projekce = new SMap.Projection.Mercator();
mapa.setProjection(projekce);
mapa.addDefaultLayer(SMap.DEF_BASE).enable();
mapa.addDefaultControls();
mapa.addDefaultContextMenu();

var layer = new SMap.Layer.Marker();
var clusterer = new SMap.Marker.Clusterer(mapa,25);
layer.setClusterer(clusterer);
mapa.addLayer(layer);
layer.enable();
var znacky = [];

var vizitka0 = new SMap.Card();
vizitka0.setSize(250, 150);
vizitka0.getHeader().innerHTML = "<b>Partner Letovice</b>";
vizitka0.getFooter().innerHTML = "<button id='p1'>Vybrat</button>";
vizitka0.getBody().innerHTML = "<b>Telefon: </b>123456789<br><br><b>Adresa: </b>sokolsk 60, Boskovice, 68001";
var znacka0 = JAK.mel("div");
var obrazek0 = JAK.mel("img", {src:SMap.CONFIG.img+"/marker/drop-blue.png"});
znacka0.appendChild(obrazek0);
var popisek0 = JAK.mel("div", {});
popisek0.innerHTML = "Partner Letovice";
popisek0.classList.add("bodik");
znacka0.appendChild(popisek0);
var c0 = SMap.Coords.fromWGS84(16.5729,49.547);
//var options = {};
var marker0 = new SMap.Marker(c0, "myMarker0", {url:znacka0});
layer.addMarker(marker0);
marker0.decorate(SMap.Marker.Feature.Card, vizitka0);
znacky.push(c0);

var vizitka1 = new SMap.Card();
vizitka1.setSize(250, 150);
vizitka1.getHeader().innerHTML = "<b>Partner Boskovice</b>";
vizitka1.getFooter().innerHTML = "<button id='p2'>Vybrat</button>";
vizitka1.getBody().innerHTML = "<b>Telefon: </b>123456789<br><br><b>Adresa: </b>sokolska 60, Boskovice, 68001";
var znacka1 = JAK.mel("img", {src:"https://www.moto-pneu.cz/images/logo-moto-pneu.png"});
//znacka1.appendChild(obrazek1);
var popisek1 = JAK.mel("div", {});
//popisek1.innerHTML = "Partner Boskovice";
znacka1.classList.add("znacka");
popisek1.classList.add("bodik");
znacka1.appendChild(popisek1);
var c1 = SMap.Coords.fromWGS84(16.66,49.49);
//var options = {};
var marker1 = new SMap.Marker(c1, "myMarker1",...