unfallkarte/index.php

<?php
    
    require("config.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 &copy; '+ 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;
        console.log(filter);

        if (jQuery(this).prop("checked")) {
            jQuery.each(marker, function(key, value) {
                console.log(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(); }
                }
            });
        }
    })

   $('#check_art').click(function(){
      if (jQuery(this).prop("checked")) { 
        $('.uart').prop( "checked", true );
      } else {
        $('.uart').prop( "checked", false );
      }
   });

   $('#check_kat').click(function(){
    console.log("test");
      if (jQuery(this).prop("checked")) { 
        $('.ukat').prop( "checked", true );
      } else {
        $('.ukat').prop( "checked", false );
      }
   });

   $('#check_typ').click(function(){
      if (jQuery(this).prop("checked")) { 
        $('.utyp').prop( "checked", true );
      } else {
        $('.utyp').prop( "checked", false );
      }
   });

   $('#check_art').click(function(){
      if (jQuery(this).prop("checked")) { 
        $('.uart').prop( "checked", true );
      } else {
        $('.uart').prop( "checked", false );
      }
   });
   
 
   

    </script>
</body>
</html>