100 lines
152 KiB
HTML
100 lines
152 KiB
HTML
|
<!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>
|
||
|
|
|
||
|
|
<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 src="accesstoken.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);
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
var lfwData = {max:18,data: [{lat: 37.3175, lng: -122.04194444444, count: 1},{lat: 49.25, lng: -123.1, count: 1},{lat: 33.684166666667, lng: -117.7925, count: 1},{lat: 40.67, lng: -73.94, count: 1},{lat: 30.433333333333, lng: -87.2, count: 1},{lat: -33.925, lng: 18.425, count: 1},{lat: 35.7, lng: 51.416666666667, count: 1},{lat: 15.366666666667, lng: -16.433333333333, count: 1},{lat: 65, lng: 90, count: 1},{lat: 54.6, lng: -2, count: 1},{lat: 4.5988888888889, lng: -74.080833333333, count: 1},{lat: 9.9333333333333, lng: -84.083333333333, count: 1},{lat: 53.116666666667, lng: 25.983333333333, count: 1},{lat: 51.5177, lng: -0.147, count: 1},{lat: -33.866666666667, lng: 151.2, count: 1},{lat: 35.7466, lng: -95.368, count: 1},{lat: 33.948063888889, lng: -117.39612777778, count: 1},{lat: 43.256666666667, lng: -79.869166666667, count: 1},{lat: 40.692777777778, lng: -73.990277777778, count: 1},{lat: 40.692777777778, lng: -73.990277777778, count: 1},{lat: -12.970833333333, lng: -38.510833333333, count: 1},{lat: 27.483333333333, lng: -82.583333333333, count: 1},{lat: 35.066666666667, lng: -78.9175, count: 1},{lat: 40.693388888889, lng: -73.852669444444, count: 1},{lat: 6.45, lng: 3.4, count: 1},{lat: -15.248888888889, lng: -40.247777777778, count: 1},{lat: 34.1, lng: -118.33333333333, count: 1},{lat: 29.841944444444, lng: 31.334166666667, count: 1},{lat: 33.383055555556, lng: 44.34, count: 1},{lat: 38.758055555556, lng: 30.538611111111, count: 1},{lat: 41.881944444444, lng: -87.627777777778, count: 1},{lat: 12.870277777778, lng: 74.880555555556, count: 1},{lat: 35.433333333333, lng: 139.63333333333, count: 1},{lat: 42.331666666667, lng: -83.0475, count: 1},{lat: 18.966666666667, lng: 72.833333333333, count: 1},{lat: 34.05, lng: -118.25, count: 1},{lat: 25.3, lng: 51.533333333333, count: 1},{lat: 44.900508333333, lng: 78.217847222222, count: 1},{lat: 34.693611111111, lng: 135.50194444444, count: 1},{lat: 22.110833333333, lng: -78.627777777778, count: 1},{lat: 43.488055555556, lng: -0.77083333333333, count: 1},{lat: 40.692777777778, lng: -73.990277777778, count: 1},{lat: 40.67, lng: -73.94, count: 1},{lat: 45.424722222222, lng: -75.695, count: 1},{lat: 33.376388888889, lng: -84.788611111111, count: 1},{lat: 37.8, lng: -122.25, count: 1},{lat: 33.938055555556, lng: -118.13083333333, count: 1},{lat: 33.778889, lng: -117.960278, count: 1},{lat: 43.165555555556, lng: -77.611388888889, count: 1},{lat: 53.866666666667, lng: -1.9166666666667, count: 1},{lat: 55.87, lng: -4.27, count: 1},{lat: 34.073055555556, lng: -118.39944444444, count: 1},{lat: 41.616666666667, lng: 0.63333333333333, count: 1},{lat: -32.0772, lng: -60.9756, count: 1},{lat: -12.05, lng: -77.033333333333, count: 1},{lat: 29.428611111111, lng: -98.493333333333, count: 1},{lat: 41.893055555556, lng: 12.482777777778, count: 1},{lat: 18.476388888889, lng: -69.893333333333, count: 1},{lat: 42.083333333333, lng: -71.018888888889, count: 1},{lat: -26.184722222222, lng: -58.175833333333, count: 1},{lat: 40.671666666667, lng: -73.415, count: 1},{lat: 35.16952664, lng: 33.3608661, count: 1},{lat: -34.866944444444, lng: -56.166666666667, count: 1},{lat: -34.866944444444, lng: -56.166666666667, count: 1},{lat: -34.599722222222, lng: -58.381944444444, count: 1},{lat: -8.3955555555556, lng: -78.016388888889, count: 1},{lat: 7.7, lng: 27.983333333333, count: 1},{lat: 41.893055555556, lng: 12.482777777778, count: 1},{lat: -34.933333333333, lng: 138.58333333333, count: 1},{lat: 54.324444444444, lng: 30.291666666667, count: 1},{lat: 41.266666666667, lng: -96.016666666667, count: 1},{lat: 53.3425, lng: -6.2658333333333, count: 1},{lat: 37.766667, lng: -122.433333, count: 1},{lat: 32.84, lng: -117.27694444444, count: 1},{lat: 45.5833, lng: -73.75, count: 1},{lat: 45.508888888889, lng: -73.561666666667, count: 1},{lat: -23.550394444444, lng: -46.633947222222, count: 1},{lat: -23.550394444444, lng: -46.633947222222, count: 1},{lat: 10.111007, lng: -63.104782, count: 1},{lat: 55.8615, lng: -4.3083, count: 1},{lat: 51.558805555556, lng: 0.085458333333333, count: 1},{lat: 29.76277777
|
||
|
|
heatmapLayer.setData(lfwData);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|