370 lines
12 KiB
PHP
370 lines
12 KiB
PHP
<?php
|
|
|
|
require("config.php");
|
|
require_once("attributes.php");
|
|
require_once("lib/functions.php");
|
|
|
|
; $numYear="2022";
|
|
|
|
$strDistrict = (isset($_GET['d'])) ? $_GET['d'] : "Hamm";
|
|
$numVehicle = (isset($_GET['v'])) ? (int) $_GET['v'] : 1;
|
|
$numYear = (isset($_GET['year'])) ? (int) $_GET['year'] : $numYear;
|
|
|
|
|
|
|
|
$result= $db->prepare("SELECT count(*) FROM district WHERE district=:district");
|
|
$result->bindParam(":district",$strDistrict);
|
|
$result->execute();
|
|
if ($row=$result->fetch(PDO::FETCH_NUM)) {
|
|
if ($row[0]==0) $strDistrict="hamm";
|
|
}
|
|
|
|
//$result = $db->query($strSQL);
|
|
$result= $db->prepare("SELECT * FROM district WHERE district=:district");
|
|
$result->bindParam(":district",$strDistrict);
|
|
$result->execute();
|
|
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
|
|
$strDistrict = $row['district'];
|
|
$strTitle = $row['title'];
|
|
$strGeojson = $row['geojson'];
|
|
|
|
$numULAND=$row['ULAND'];
|
|
$numUREGBEZ=$row['UREGBEZ'];
|
|
$numUKREIS=$row['UKREIS'];
|
|
$numUGEMEINDE=$row['UGEMEINDE'];
|
|
|
|
$numInfoLat=$row['lat'];
|
|
$numInfoLng=$row['lng'];
|
|
$numZoom=$row['zoom'];
|
|
|
|
$strTitle = "Unfallkarte $strTitle ";
|
|
$strIntroText = "$strTitle basierend auf den Daten des Statistischen Bundesamtes.";
|
|
|
|
$fileGeojson ="geojson/$strGeojson";
|
|
$strLocation = " AND ULAND=$numULAND AND UREGBEZ=$numUREGBEZ AND UKREIS=$numUKREIS ";
|
|
if ($numUGEMEINDE>0) {
|
|
$strLocation .= "AND UGEMEINDE=$numUGEMEINDE";
|
|
}
|
|
}
|
|
$arrDisctrict = array ();
|
|
|
|
$strSQL = "SELECT district,title FROM district ORDER BY title ASC";
|
|
$result=$db->query($strSQL);
|
|
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
|
|
$arrDistrict[$row['district']]=$row['title'];
|
|
}
|
|
|
|
$strIntro ="<h4>".$strTitle."</h4>";
|
|
$strIntro .= nl2br2($strIntroText);
|
|
|
|
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 data WHERE ".$strWhere.$strYear.$strLocation;
|
|
|
|
|
|
$result = $db->query($strSQL);
|
|
$arrMarker = array();
|
|
$arrDescription = array();
|
|
$description="";
|
|
$numId=0;
|
|
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
|
|
//print_r($row);echo "<hr>";
|
|
//$id = $row['OBJECTID'];
|
|
$id=$numId;
|
|
$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);
|
|
$strCategory=generate_category($row);
|
|
$arrMarker[]="marker[".$id."] = [L.marker([".$numLat."," .$numLng."],"
|
|
." { icon: ".$arrMarkerType[$topic]." }),'".$strCategory."'];\n"
|
|
."marker[".$id."][0].addTo(mymap);\n "
|
|
."marker[".$id."][0].bindPopup('".$strDescription."');";
|
|
$numId++;
|
|
}
|
|
|
|
$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=2022&v=<?=$numVehicle?>&d=<?=$strDistrict?>">2022</a>
|
|
<a class="navbar-brand" href="index.php?year=2021&v=<?=$numVehicle?>&d=<?=$strDistrict?>">2021</a>
|
|
<a class="navbar-brand" href="index.php?year=2020&v=<?=$numVehicle?>&d=<?=$strDistrict?>">2020</a>
|
|
<a class="navbar-brand" href="index.php?year=2019&v=<?=$numVehicle?>&d=<?=$strDistrict?>">2019</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?>&d=<?=$strDistrict?>"><?=$strVehicle?>
|
|
<span class="sr-only">(current)</span> </a>
|
|
<?php endforeach; ?>
|
|
|
|
</ul>
|
|
|
|
<div>
|
|
<form method="GET" action="index.php">
|
|
<select name="d" style="float:left;margin-top:0.5em;margin-right:0.5em;" onchange="this.form.submit()">
|
|
<?php foreach ($arrDistrict as $key => $strTitle):
|
|
$strActive = ($strDistrict==$key) ? "selected=\"selected\"" : ""; ?>
|
|
<option value="<?=$key?>" <?=$strActive?>><?=$strTitle?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</from>
|
|
<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=sk.eyJ1Ijoid2h1cGZlbGQiLCJhIjoiY2xrMW1icTYzMDUxMTNkbXF6NmIyeWI0aSJ9.-GyWgYxxDQGQnD2KnqTOug', {
|
|
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() {
|
|
filter = this.name;
|
|
if (jQuery(this).prop("checked")) {
|
|
jQuery.each(marker, function(key, value) {
|
|
if (value) {
|
|
if (filter.match(value[1])) { value[0].addTo(mymap); }
|
|
}
|
|
});
|
|
} else {
|
|
jQuery.each(marker, function(key, value) {
|
|
if (value) {
|
|
if (filter.match(value[1])) { value[0].remove(); }
|
|
}
|
|
});
|
|
}
|
|
})
|
|
|
|
function check_all(){
|
|
jQuery.each(marker, function(key, value) {
|
|
if (value) { value[0].addTo(mymap); }
|
|
});
|
|
};
|
|
|
|
function uncheck_all()
|
|
{
|
|
jQuery.each(marker, function(key, value) {
|
|
if (value) { value[0].remove(); }
|
|
});
|
|
};
|
|
|
|
$('input[type=radio][name=kategorie]').on('change', function() {
|
|
$('.td_ubet').hide();
|
|
$('.td_utyp').hide();
|
|
$('.td_uart').hide();
|
|
$('.td_ukat').hide();
|
|
check_all();
|
|
$("input[type=checkbox]").prop('checked', $(this).prop('checked'));
|
|
switch ($(this).val()) {
|
|
case 'UART':
|
|
$('.td_uart').show();
|
|
break;
|
|
case 'UKAT':
|
|
$('.td_ukat').show();
|
|
break;
|
|
case 'UTYP':
|
|
$('.td_utyp').show();
|
|
break;
|
|
case 'UBET':
|
|
$('.td_ubet').show();
|
|
$('.veh_<?=$numVehicle?>').hide();
|
|
break;
|
|
}
|
|
});
|
|
|
|
$('.td_ubet').hide();
|
|
$('.td_utyp').hide();
|
|
$('.td_uart').hide();
|
|
$('.td_ukat').show();
|
|
$('input:radio[name=kategorie]').val(['UKAT']);
|
|
</script>
|
|
</body>
|
|
</html>
|