2016-05-12 22:22:17 +02:00
|
|
|
<?php
|
|
|
|
|
|
2016-05-15 02:39:40 +02:00
|
|
|
$config = parse_ini_file("config.ini");
|
2016-05-14 23:35:09 +02:00
|
|
|
|
2016-05-15 02:39:40 +02:00
|
|
|
$conn = mysqli_connect($config["db_host"], $config["db_user"], $config["db_password"], "blomzt");
|
2016-05-14 23:35:09 +02:00
|
|
|
|
2016-05-15 01:35:08 +02:00
|
|
|
if (mysqli_connect_errno()) {
|
|
|
|
|
die("Connection failed: " . mysqli_connect_error());
|
2016-05-14 23:35:09 +02:00
|
|
|
}
|
|
|
|
|
|
2016-05-12 22:22:17 +02:00
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2016-05-14 23:35:09 +02:00
|
|
|
<title>Blomzt</title>
|
2016-05-15 02:39:40 +02:00
|
|
|
|
|
|
|
|
<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">
|
2016-08-26 22:06:27 +02:00
|
|
|
<link rel="stylesheet" type="text/css" href="/Resources/leaflet/leaflet.css">
|
2016-05-15 02:39:40 +02:00
|
|
|
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
|
2016-08-26 22:06:27 +02:00
|
|
|
<script type="text/javascript" src="/Resources/leaflet/leaflet.js"></script>
|
2016-05-15 02:39:40 +02:00
|
|
|
|
2016-05-12 22:22:17 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-05-15 02:39:40 +02:00
|
|
|
|
2016-08-27 17:21:25 +02:00
|
|
|
<div id="mapid" style="height: 100%;"></div>
|
2016-05-15 02:39:40 +02:00
|
|
|
|
2016-08-26 22:06:27 +02:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var map = L.map('mapid').setView([51.505, -0.09], 13);
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={access token}', {
|
|
|
|
|
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,
|
|
|
|
|
id:,
|
|
|
|
|
accessToken:
|
|
|
|
|
}).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 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);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2016-05-12 22:22:17 +02:00
|
|
|
</body>
|
2016-05-15 01:35:08 +02:00
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<?php
|
2016-05-15 18:11:22 +02:00
|
|
|
|
|
|
|
|
function getList($conn, $table) {
|
|
|
|
|
|
2016-05-16 11:48:28 +02:00
|
|
|
$sql = "SELECT *, X(location) as Longtitude, Y(location) as Latitude FROM `$table`;";
|
2016-05-15 21:05:14 +02:00
|
|
|
//print_r($sql);
|
2016-05-15 02:39:40 +02:00
|
|
|
$res = mysqli_query($conn, $sql);
|
2016-05-15 21:05:14 +02:00
|
|
|
//($res) ? printf("true") : printf("false");
|
2016-05-15 18:11:22 +02:00
|
|
|
|
2016-08-26 22:06:27 +02:00
|
|
|
if ($res === false) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-15 18:11:22 +02:00
|
|
|
$list = array();
|
|
|
|
|
|
|
|
|
|
while($row = mysqli_fetch_array($res, MYSQLI_ASSOC)) {
|
|
|
|
|
$list[] = $row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return $list;
|
2016-05-15 02:39:40 +02:00
|
|
|
}
|
|
|
|
|
|
2016-05-15 01:35:08 +02:00
|
|
|
?>
|
