Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Menampilkan peta di website yang sudah memiliki titik koordinat
$alternatif = $conn->getAlternatifList(); --- mengalami fatal error apakah sudah benar coding dibawah ini ?
<?php
include'koneksi.php';
$alternatif = $conn->getAlternatifList();
?>
<!DOCTYPE html>
<html>
<head>
<title>Leaflet basic example</title>
<script src="jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
var map = L.map('map').setView([-2.539251, 112.958686], 14);
L.tileLayer( 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWVnYTYzODIiLCJhIjoiY2ozbXpsZHgxMDAzNjJxbndweDQ4am5mZyJ9.uHEjtQhnIuva7f6pAfrdTw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org/"> OpenStreetMap </a> contributors, ' +
'<a href="http://creativecommons.org/"> CC-BY-SA </a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
$( document ).ready(function() {
addAlternatif();
});
function addAlternatif() {
for(var i=0; i<alternatif.length; i++) {
var marker = L.marker( [alternatif[i]['latitude'], alternatif[i]['longitude']]).addTo(map);
marker.bindPopup( "<b>" + alternatif[i]['id_sekolah']+"</b><br>Nama Sekolah:" + alternatif[i]['nama_sekolah'] + "<br />Alamat Sekolah: " + alternatif[i]['alamat_sekolah']);
}
}
function stringToGeoPoints( geo ) {
var linesPin = geo.split(",");
var linesLat = new Array();
var linesLng = new Array();
for(i=0; i < linesPin.length; i++) {
if(i % 2) {
linesLat.push(linesPin[i]);
}else{
linesLng.push(linesPin[i]);
}
}
var latLngLine = new Array();
for(i=0; i<linesLng.length;i++) {
latLngLine.push( L.latLng( linesLat[i], linesLng[i]));
}
return latLngLine;
}
var alternatif = JSON.parse( '<?php echo json_encode($alternatif) ?>' );
</script>
</body>
</html>
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban