lfw-heatmap/lfw_map.php

120 lines
3.6 KiB
PHP
Raw Permalink Normal View History

2020-11-21 16:49:05 +01:00
<!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 &copy; <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>