69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet.heat demo</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
|
|
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
|
|
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
|
crossorigin=""></script>
|
|
<style>
|
|
#map { width: 1024px; height: 768px; }
|
|
body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
|
|
.ghbtns { position: relative; top: 4px; margin-left: 5px; }
|
|
a { color: #0077ff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<!-- <script src="../node_modules/simpleheat/simpleheat.js"></script>
|
|
<script src="../src/HeatLayer.js"></script> -->
|
|
|
|
<script src="http://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
|
|
|
|
<script src="./track_data.js"></script>
|
|
<script>
|
|
var options = {maxZoom:22};
|
|
//var map = L.map('map', options).setView([49.90299388, 10.87004638], 17);
|
|
var map = L.map('map', options);
|
|
L.control.scale().addTo(map);
|
|
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
|
}).addTo(map);
|
|
|
|
function addHeat(coords){
|
|
//var transformed = coords.map(function (p) { return [p[1], p[0], 0.25]; });
|
|
var heat = L.heatLayer(coords).addTo(map);
|
|
}
|
|
var layers=[];
|
|
function addTrack(tracks, i){
|
|
var elem = L.polyline(tracks[i], {color:"green"});
|
|
// layers[i] =L.LayerGroup([elem]);
|
|
layers[i] = elem;
|
|
map.fitBounds(elem.getBounds());
|
|
layers[i].on('mouseover', function (e) {
|
|
e.target.setStyle({'color':'red'});
|
|
});
|
|
layers[i].on('mouseout', function (e) {
|
|
e.target.setStyle({'color':'green'});
|
|
});
|
|
}
|
|
//coords = coords.map(function (p) { return [p[1], p[0], 0.05]; });
|
|
|
|
//var heat = L.heatLayer(coords).addTo(map);
|
|
//addHeat(coords);
|
|
for (var i in tracks) {
|
|
addTrack(tracks, i);
|
|
}
|
|
L.control.layers(null, layers).addTo(map);
|
|
</script>
|
|
<!--script src="./heat_data.js"></script>
|
|
<script>
|
|
addHeat(coords);
|
|
</script-->
|
|
</body>
|
|
</html>
|