<?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; require_once("lib/init.php"); ?> <!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> <form method="GET" action="index.php"> <select name="v" style="float:left;margin-top:0.5em;margin-right:0.5em;" onchange="this.form.submit()"> <?php foreach ($arrVehicles as $key=>$vehicle) { $strActive = ($key==$numVehicle) ? "selected=\"selected\"" : ""; echo "<option value='$key' $strActive >$vehicle</a>"; } echo "<input type='hidden' name='year' value='$numYear'>"; 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="statistics/">Statistik</a> </li> <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>