<?php
require("config.php");
require_once("lib/functions.php");
$strIntro ="<h4>".$strTitle."</h4>";
$strIntro .= nl2br2($strIntroText);
$numYear=2020;
$numVehicle = (isset($_GET['v'])) ? (int) $_GET['v'] : 1;
$numYear = (isset($_GET['year'])) ? (int) $_GET['year'] : $numYear;
switch ($numVehicle) {
case 1:
case 0:
$strWhere ="IstRad = 1";
$topic=2;
break;
case 2:
$strWhere = "IstPKW = 1";
$topic=4;
break;
case 3:
$strWhere = "IstFuss = 1";
$topic=1;
break;
case 4:
$strWhere = "IstKrad = 1";
$topic=0;
break;
case 5:
$strWhere = "IstGkfz = 1";
$topic=5;
break;
case 6:
$strWhere = "IstSonstige = 1";
$topic=3;
break;
default: $strWhere ="IstRad = 1";
$topic=2;
}
$strYear = " AND UJAHR='".$numYear."' ";
$strSQL="SELECT * FROM Unfallorte_Hamm WHERE ".$strWhere.$strYear;
$result = $db->query($strSQL);
$arrMarker = array();
$arrDescription = array();
$description="";
while ($row = $result->fetchArray()) {
//print_r($row);echo "<hr>";
$id = $row[0];
$numLng = $row['XGCSWGS84'];
$numLat = $row['YGCSWGS84'];
if ($row['IstRad']) $description .="mit Fahrradbeteiligung, ";
if ($row['IstPKW']) $description .="mit PKW-Beteiligung, ";
if ($row['IstFuss']) $description .="mit Fußgängerbeteiligung, ";
if ($row['IstKrad']) $description .="mit Kraftradbeteiligung, ";
if ($row['IstGkfz']) $description .="mit Güterkraftzeugbeteiligung, ";
if ($row['IstSonstige']) $description .="mit Beteiligung eines oben nicht genannten Verkehrsmittels";
$strDescription=generate_tooltip_description($row);
$arrMarker[]="marker[".$id."] = [L.marker([".$numLat."," .$numLng."],"
." { icon: ".$arrMarkerType[$topic]." }),'check_".$topic."'];\n"
."marker[".$id."][0].addTo(mymap);\n "
."marker[".$id."][0].bindPopup('".$strDescription."');";
}
$markerid=$id+1;
/*
marker[val.id] = [L.marker([val.lat, val.lng], { "icon": L.MakiMarkers.icon({ "color": color, "size": "m", "icon": "circle" }) }).bindPopup(html), val.membertype];
marker[val.id][0].addTo(map);
*/
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.min.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/leaflet.ajax.js"></script>
<script src="js/leaflet.awesome-markers.js"></script>
<script src="js/leaflet.snogylop.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="css/style.css" />
<title><?= $strTitle ?></title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#"><?= $strTitle ?></a>
<a class="navbar-brand" href="index.php?year=2019&v=<?=$numVehicle?>">2019</a>
<a class="navbar-brand" href="index.php?year=2020&v=<?=$numVehicle?>">2020</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbars">
<ul class="navbar-nav mr-auto">
<?php foreach ($arrVehicles as $key => $strVehicle):
$strActive = ($numVehicle==$key) ? "active" : ""
?>
<li class="nav-item <?=$strActive?>">
<a class="nav-link" href="index.php?v=<?=$key?>&year=<?=$numYear?>"><?=$strVehicle?>
<span class="sr-only">(current)</span> </a>
<?php endforeach; ?>
</ul>
<div>
<ul class="navbar-nav mr-auto right">
<li class="nav-item">
<a class="nav-link" href="impressum.php">Impressum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="datenschutz.php">Datenschutzerklärung</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Ende Navbar -->
<div class="container-fluid" style="margin-top: 4em;">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<h1>Jahr <?= $numYear?></h2>
<h2>Unfälle mit <?= $arrVehicles_pl[$numVehicle]; ?> </h2>
<ul class="nav flex-column">
<?php echo get_statistics($numVehicle,$strWhere,$strYear); ?>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-1">
<div id="mapid"></div>
</main>
</div>
<!-- row -->
</div>
<!-- container-fluid -->
<div id="loader"><img src="css/images/ajax-loader.gif"></div>
<script>
// Map ----------------------------------------------------------------------
var mymap = L.map('mapid').setView([<?=$numInfoLat ?>, <?=$numInfoLng ?>], <?=$numZoom ?>);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
// ocmlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var ocmLink = '<a href="https://www.mapbox.com/">Mapbox</a>';
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
minZoom:<?=$numZoom ?>,
attribution: 'Map data © '+ mapLink +' contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © ' + ocmLink,
//id: 'mapbox/streets-v11',
id: 'mapbox/outdoors-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
// markerIcons ------------------------------------------------------------------------------
var infoMarker = L.AwesomeMarkers.icon({icon: 'info', prefix: 'fa', markerColor: 'orange'});
var bicycleMarker = L.AwesomeMarkers.icon({icon: 'bicycle', prefix: 'fa', markerColor: 'red'});
var carMarker = L.AwesomeMarkers.icon({icon: 'car', prefix: 'fa', markerColor: 'red'});
var truckMarker = L.AwesomeMarkers.icon({icon: 'truck', prefix: 'fa', markerColor: 'beige'});
var trainMarker = L.AwesomeMarkers.icon({icon: 'bus', prefix: 'fa', markerColor: 'blue'});
var pedestrianMarker = L.AwesomeMarkers.icon({icon: 'male', prefix: 'fa', markerColor: 'darkblue'});
function getMarker(topic) {
var arrMarker = [];
<?php
foreach ($arrMarkerType as $key => $value) {
echo "arrMarker[".$key."]=".$value.";\n";
}
?>
return arrMarker[topic];
}
//Hamm-Layer - todo invers area ---------------------------------------
var myStyle = {
"color": "grey",
"fillColor": "lightblue",
"weight": 4,
"opacity": 0.6
};
var hammLayer = new L.GeoJSON.AJAX(["<?= $fileGeojson ?>"], {
style: myStyle,
invert: true
});
hammLayer.addTo(mymap);
// Marker from database -------------------------------------------------------
var marker = [];
var arrDescription = [];
<?php
foreach ($arrMarker as $idx=>$strMarker) {
echo $strMarker."\n";
}
echo "var marker_max=".$markerid."\n";
?>
// Info-Marker für Start --------------------------------------------------------
var marker2 = L.marker([<?=$numInfoLat?>, <?=$numInfoLng?>], { icon: infoMarker }).addTo(mymap);
<?php
echo "marker2.bindPopup('".$strIntro."');";
if ($numVehicle==0) {
echo "marker2.openPopup();";
}
?>
// Hide and show marker form checkbox ----------------------------------------
$('.check').click(function() {
bereich = this.name;
if (jQuery(this).prop("checked")) {
jQuery.each(marker, function(key, value) {
if (value) {
if (value[1] == bereich) { value[0].addTo(mymap); }
}
});
} else {
jQuery.each(marker, function(key, value) {
if (value) {
if (value[1] == bereich) { value[0].remove(); }
}
});
}
})
</script>
</body>
</html>