Dandellion/Misc-small-projects
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added map

Browse Source 
You have to add own access token
This commit is contained in:
Daniel Løvbrøtte Olsen 2016-08-26 22:06:27 +02:00 committed by GitHub
parent 0ecf5689c1
commit e02c931a58
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
blomzt/main.php
View File

@ -25,7 +25,9 @@ if (!TableExists($config["db_table"], $conn)) {
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <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" 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 defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script type="text/javascript" src="/Resources/leaflet/leaflet.js"></script>
</head> </head>
<body> <body>
@ -77,6 +79,53 @@ if (!TableExists($config["db_table"], $conn)) {
?> ?>
</table> </table>
<div id="mapid" style="height: 500px;"></div>
<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 &copy; <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>
</body> </body>
</html> </html>
@ -111,6 +160,10 @@ function getList($conn, $table) {
$res = mysqli_query($conn, $sql); $res = mysqli_query($conn, $sql);
//($res) ? printf("true") : printf("false"); //($res) ? printf("true") : printf("false");
if ($res === false) {
return false;
}
$list = array(); $list = array();
while($row = mysqli_fetch_array($res, MYSQLI_ASSOC)) { while($row = mysqli_fetch_array($res, MYSQLI_ASSOC)) {