107 lines
2.8 KiB
PHP
107 lines
2.8 KiB
PHP
<?php
|
|
|
|
$config = parse_ini_file("config.ini");
|
|
|
|
$conn = mysqli_connect($config["db_host"], $config["db_user"], $config["db_password"], "blomzt");
|
|
|
|
if (mysqli_connect_errno()) {
|
|
die("Connection failed: " . mysqli_connect_error());
|
|
}
|
|
|
|
?>
|
|
|
|
<html>
|
|
<head>
|
|
<title>Blomzt</title>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
|
|
<link rel="stylesheet" type="text/css" href="/Resources/leaflet/leaflet.css">
|
|
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
|
|
<script type="text/javascript" src="/Resources/leaflet/leaflet.js"></script>
|
|
<script type="text/javascript" src="/Resources/leaflet-hash/leaflet-hash.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="mapid" style="height: 100%;"></div>
|
|
|
|
<script type="text/javascript">
|
|
var map = L.map('mapid').setView([51.505, -0.09], 2);
|
|
|
|
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
|
|
maxZoom: 18,
|
|
accessToken: "pk.eyJ1IjoiZGFsaTk5IiwiYSI6ImNpc2RueWJ0NTAwMW0yenBmaXg5OWhiZXQifQ.WCB3-xcQxEpBf6SHGKG94Q"
|
|
}).addTo(map);
|
|
|
|
var markers = [
|
|
<?php
|
|
foreach (getList($conn, $config["db_table"]) as $row) {
|
|
echo "{
|
|
\"type\": \"Feature\",
|
|
\"properties\": {
|
|
\"popupContent\": \"<b>" . $row["date_added"] . "</b> <br><img style=\\\"max-width:240px\\\" src=\\\"images/" . $row["url"] . "\\\"/>\"
|
|
},
|
|
\"geometry\": {
|
|
\"type\": \"Point\",
|
|
\"coordinates\": [" . $row["Longtitude"] . ", " . $row["Latitude"] . "]
|
|
}
|
|
|
|
|
|
},";
|
|
};
|
|
?>
|
|
];
|
|
|
|
|
|
var markerlayer = L.geoJson(markers, {
|
|
style: function (feature) {
|
|
return feature.properties.style;
|
|
},
|
|
onEachFeature: function (feature, layer) {
|
|
layer.bindPopup(feature.properties.popupContent);
|
|
}
|
|
});
|
|
|
|
|
|
markerlayer.addData(markers);
|
|
markerlayer.addTo(map);
|
|
var hash = new L.Hash(map);
|
|
|
|
</script>
|
|
|
|
|
|
<a href="add.php" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--raised" style="position: absolute; bottom:30px; right: 10px; z-index: 999; background-color: #257eca">
|
|
<i class=material-icons>add</i>
|
|
</a>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<?php
|
|
|
|
function getList($conn, $table) {
|
|
|
|
$sql = "SELECT *, X(location) as Longtitude, Y(location) as Latitude FROM `$table`;";
|
|
//print_r($sql);
|
|
$res = mysqli_query($conn, $sql);
|
|
//($res) ? printf("true") : printf("false");
|
|
|
|
if ($res === false) {
|
|
return false;
|
|
}
|
|
|
|
$list = array();
|
|
|
|
while($row = mysqli_fetch_array($res, MYSQLI_ASSOC)) {
|
|
$list[] = $row;
|
|
}
|
|
|
|
return $list;
|
|
}
|
|
|
|
?>
|