120 lines
3.6 KiB
PHP
120 lines
3.6 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" dir="ltr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
<link rel="stylesheet" href="//unpkg.com/leaflet@1.5.1/dist/leaflet.css"
|
||
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||
|
|
crossorigin=""/>
|
||
|
|
<script src="//unpkg.com/leaflet@1.5.1/dist/leaflet.js"
|
||
|
|
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
|
||
|
|
crossorigin=""></script>
|
||
|
|
<script src="accesstoken.js"></script>
|
||
|
|
|
||
|
|
<style media="screen">
|
||
|
|
html, body, #map{
|
||
|
|
width:100%;height:100%;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
.leaflet-container{
|
||
|
|
background:black /*purple*/;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="map"></div>
|
||
|
|
<script src="js/heatmap.min.js"></script>
|
||
|
|
<script src="js/leaflet-heatmap.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
// var map = L.map('map').setView([0,0], 0);
|
||
|
|
var tileLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||
|
|
attribution: 'Map data © <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>',
|
||
|
|
maxZoom: 18,
|
||
|
|
id: 'mapbox.light',
|
||
|
|
accessToken: leaflet_access_token
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var cfg = {
|
||
|
|
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
|
||
|
|
// if scaleRadius is false it will be the constant radius used in pixels
|
||
|
|
"radius": 2.5,
|
||
|
|
"maxOpacity": .8,
|
||
|
|
// scales the radius based on map zoom
|
||
|
|
"scaleRadius": true,
|
||
|
|
// if set to false the heatmap uses the global maximum for colorization
|
||
|
|
// if activated: uses the data maximum within the current map boundaries
|
||
|
|
// (there will always be a red spot with useLocalExtremas true)
|
||
|
|
"useLocalExtrema": false,
|
||
|
|
// which field name in your data represents the latitude - default "lat"
|
||
|
|
latField: 'lat',
|
||
|
|
// which field name in your data represents the longitude - default "lng"
|
||
|
|
lngField: 'lng',
|
||
|
|
// which field name in your data represents the data value - default "value"
|
||
|
|
valueField: 'count'
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var heatmapLayer = new HeatmapOverlay(cfg);
|
||
|
|
|
||
|
|
var map = new L.Map('map', {
|
||
|
|
center: new L.LatLng(0,0),
|
||
|
|
zoom: 3,
|
||
|
|
layers: [
|
||
|
|
// tileLayer,
|
||
|
|
heatmapLayer]
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// let r = new Request(`world.geo.json`);
|
||
|
|
// fetch(r)
|
||
|
|
// .then(response => response.json())
|
||
|
|
// .then(response => {
|
||
|
|
// L.geoJson(response, { // initialize layer with data
|
||
|
|
// style: function (feature) { // Style option
|
||
|
|
// return {
|
||
|
|
// 'weight': 1,
|
||
|
|
// 'color': 'black',
|
||
|
|
// 'fillColor': 'yellow'
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }).addTo(map); // Add layer to map
|
||
|
|
// }).catch(function(e){
|
||
|
|
// console.error(e);
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
<?php
|
||
|
|
|
||
|
|
|
||
|
|
$dsn = 'sqlite:./lfw.db';
|
||
|
|
$dbh = new PDO($dsn);
|
||
|
|
$sql = "SELECT latitude, longitude FROM people WHERE latitude != '';";
|
||
|
|
|
||
|
|
$stmt = $dbh->prepare($sql);
|
||
|
|
// $stmt->bindParam(':rhyme_format', );
|
||
|
|
$stmt->execute($params);
|
||
|
|
|
||
|
|
|
||
|
|
$items = [];
|
||
|
|
while($person = $stmt->fetch()) {
|
||
|
|
// echo "L.marker([{$person['latitude']}, {$person['longitude']}]).addTo(map);\n";
|
||
|
|
$items[] = "{lat: {$person['latitude']}, lng: {$person['longitude']}, count: 1}";
|
||
|
|
}
|
||
|
|
echo "var lfwData = {max:18,data: [".implode(',',$items)."]};";
|
||
|
|
|
||
|
|
?>
|
||
|
|
|
||
|
|
heatmapLayer.setData(lfwData);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|