[JavaScript][MySQL][PHP] Markery z bazy danych na mapie OpenStreetMaps Leaflet Opcje

[brzanek]

Witam mam problem z zaimportowaniem danych o markerach z bazy danych mysql na mapie OpenStreetMaps Leaflet
Do tej pory zrobiłem tak, że z bazy danych pobieram współrzędne markerów i wstawiam je do tablicy.
Potem mam mapę ale jak dodać te markery?
Tak wygląda kod.

[PHP] pobierz, plaintext 
<?
?>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9
wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
<?
require('db.php');
 
$data=date("Y-m-d H:i");
$dwadziecia = date('Y-m-d H:i', strtotime("-20 minutes"));
$czterdziesci = date('Y-m-d H:i', strtotime("-40 minutes"));
$szecdziesiac = date('Y-m-d H:i', strtotime("-60 minutes"));
$osiemdziesiat = date('Y-m-d H:i', strtotime("-80 minutes"));
$sto = date('Y-m-d H:i', strtotime("-100 minutes"));
$stodwadziescia = date('Y-m-d H:i', strtotime("-120 minutes"));
 
echo "Teraz: $data";
echo '<br>';
echo "teraz / -20 minut: $dwadziecia";
echo '<br>';
echo '<br>';
echo "-20 / -40 minut: $czterdziesci";
echo '<br>';
 
 
//tablica
$result = $mysqli->query("SELECT time, lat, lon FROM mybo_strikes WHERE `time` BETWEEN '".$dwadziecia."' AND '".$data."'  AND `lat` BETWEEN 48.571000 AND 55.622000 AND `lon` BETWEEN 10.121000 AND 27.983000 ORDER BY `time` DESC");
$data = array();
    	echo "var planes = [";
 
        for ($x = 0; $x < mysqli_num_rows($result); $x++) {
            $data[] = mysqli_fetch_assoc($result);
            echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]";
            if ($x <= (mysqli_num_rows($result)-2) ) {
    			echo ",";
    		}
        }
echo "];";
// mapa
echo '<div id="mapid" style="width: 1000px; height: 500px;"></div>';
?>
<script>
 
	var mymap = L.map('mapid').setView([53.48, 15.46], 5);
 
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
JcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox.dark'
	}).addTo(mymap);
 
	//L.marker([53.5, 15.09]).addTo(mymap);
 
//ikony
var bialy = L.icon({
    iconUrl: 'http://brzanek.webd.pl/2019/czas/images/00.png',
    iconSize:     [7, 7], // size of the icon
});
var zulty = L.icon({
    iconUrl: 'http://brzanek.webd.pl/2019/czas/images/20.png',
    iconSize:     [7, 7], // size of the icon
});
var pomaranczowy = L.icon({
    iconUrl: 'http://brzanek.webd.pl/2019/czas/images/40.png',
    iconSize:     [7, 7], // size of the icon
});
//var twojazmienna = $("").val();
 
L.marker([49.053873, 17.030497], {icon: bialy}).addTo(mymap);
//L.marker([53.5, 13.09], {icon: bialy}).addTo(mymap).bindPopup("I am a green leaf.");
//L.marker([53.5, 14.09], {icon: zulty}).addTo(mymap).bindPopup("I am a green leaf.");
//L.marker([54.5, 14.09], {icon: pomaranczowy}).addTo(mymap).bindPopup("I am a green leaf.");
</script>
[PHP] pobierz, plaintext