<?php require("config.php"); require_once("lib/attributes.php"); require_once("lib/functions.php"); $numYear=$numLatestYear; $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> <form method="GET" action="index.php"> <select name="year" style="float:left;margin-top:0.5em;margin-right:0.5em;" onchange="this.form.submit()"> <?php for ($i=$numLatestYear;$i>=$numStartYear;$i--) { $strActive = ($i==$numYear) ? "selected=\"selected\"" : ""; echo "<option value='$i' $strActive >$i</a>"; } echo "<input type='hidden' name='v' value='$numVehicle'>"; echo "<input type='hidden' name='d' value='$strDistrict'>"; ?> </form> <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> <!-- District --> <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> </form> <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> <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> </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 --> <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=<?=$mapbox_token?>', { 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 districtLayer = new L.GeoJSON.AJAX(["<?= $fileGeojson ?>"], { style: myStyle, invert: true }); districtLayer.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>