<?php /* ****************************** * Ideenmelder * Autor: Walter Hupfeld, Hamm * E-Mail: info@hupfeld-software.de * Version: 3.0 * Datum: 12.03.2024 ******************************** */ // Starte die Session session_start(); if (isset($_GET['d'])) { $strDistrict=$_GET['d']; $_SESSION['district'] = $_GET['d']; } else if (isset($_SESSION['district'])) { $strDistrict=$_SESSION['district']; } else { header("Location: start.php"); } require("config.php"); if ($strDistrict=="unkown") { header("Location: start.php");} require_once("lib/functions.php"); $ref=(isset($_GET['ref']) && ($_GET['ref']==1)); $strIntro ="<h4>".$strTitle."</h4>"; $strIntro .= nl2br2($strIntroText); $result= $db->prepare("SELECT loc.*,f.filename FROM location loc LEFT JOIN files f ON loc.id=f.loc_id WHERE loc.district=:district"); $result->bindParam(":district",$strDistrict); $result->execute(); /* Für die Auswertung nur bestimmte Kategorien anzeigen $numDefect="(6,8,21)"; $strSQL="SELECT loc.*,f.filename FROM location loc LEFT JOIN files f ON loc.id=f.loc_id WHERE defect in ".$numDefect; */ $arrMarker = array(); $arrDescription = array(); $id=0; while ($row = $result->fetch(PDO::FETCH_ASSOC)) { $id=$row['id']; $topic = $row['topic']; $numLng = $row['lng']; $numLat = $row['lat']; $strDescription=generate_tooltip_description($row); if ($boolActive) { $arrDescription[$id] = $strDescription; } $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"> <meta name="author" content="Walter Hupfeld, info@hupfeld-software.de"> <meta name="description" content="Georeferenzieter Ideenmelder"> <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> <script src="js/jquery.fancybox.min.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" /> <link rel="stylesheet" href="css/jquery.fancybox.min.css" /> <title><?=$strTitle?></title> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <?php if (!$boolSidebar): ?> <a href="start.php"><img class="logo_navbar" src="<?=$strLogo?>" alt="Logo"></a> <?php endif; ?> <a class="navbar-brand" href="#"><?= $strTitle ?> » <?=$strDistrictTitle?></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"> <li class="nav-item active"> <a class="nav-link" href="index.php?ref=1">Karte <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="liste.php">Liste</a> </li> <?php if ($boolDistrictSelection): ?> <!-- 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> <?php endif; ?> </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> <li class="nav-item"> <a class="nav-link" href="admin/login.php">Login</a> </li> </ul> </div> </div> </nav> <!-- Ende Navbar --> <div class="container-fluid" style="margin-top: 4em;"> <?php if ($boolSidebar): ?> <div class="row"> <nav class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <a href="start.php"><img class="logo" src="<?=$strLogo?>" alt="Logo" ></a> <ul class="nav flex-column"> <?php foreach ($arrTopic as $key=>$topic): ?> <li class='nav-item'> <label> <a class='nav-link'><?=$arrIcon[$key]?> <input type='checkbox' name='check_".$key."' id='check_".$key."' class='check' checked='checked'> <?=$topic?></a></label> </li> <?php endforeach; ?> </ul> </div> </nav> <?php endif; ?> <main role="main" class="<?= ($boolSidebar)?"col-md-9 col-lg-10":"col-md-12 col-lg-12"?> ml-sm-auto px-1"> <div id="mapid"></div> </main> <?php if ($boolSidebar) echo "</div>"; ?> <!-- row --> </div> <!-- container-fluid --> <?php if ($boolActive) { require("lib/dialog_karte.php"); require("lib/dialog_comment.php"); } ?> <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=<?=$mapbox_key?>', { 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: 'green'}); 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 }; // Sonderfall Unna mit Gemeindegrenzen var gemeindeStyle = { "color": "grey", "fillColor": "white", "weight": 2, "opacity": 0.6 }; var unnaLayer = new L.GeoJSON.AJAX(["geojson/KommunenKU.geojson"],{style:gemeindeStyle}); unnaLayer.addTo(mymap); var hammLayer = new L.GeoJSON.AJAX(["<?= $fileGeojson ?>"], { style: myStyle, invert: true }); hammLayer.addTo(mymap); // Marker from database ------------------------------------------------------- var up="up"; var down="down"; var marker = []; var arrDescription = []; <?php foreach ($arrMarker as $idx=>$strMarker) { echo $strMarker."\n"; } if ($boolComment) { foreach ($arrDescription as $index => $value) { echo "arrDescription[".$index."]=\"$value\"\n"; } } echo "var marker_max=".$markerid."\n"; ?> // Info-Marker für Start -------------------------------------------------------- var marker2 = L.marker([<?=$numInfoLat?>, <?=$numInfoLng?>], { icon: infoMarker }).addTo(mymap); <?php if ($ref) { echo "marker2.bindPopup('".$strIntro."');"; } else { echo "marker2.bindPopup('".$strIntro."').openPopup();"; } ?> // Editor ---------------------------------------------------------------------- var edit = <?= ($boolActive) ? "true" : "false" ?>; var myMarker; var lat; var lng; function onMapClick(e) { if (!edit) return false; edit = false; lat=e.latlng.lat; lng=e.latlng.lng; myMarker = L.marker([e.latlng.lat, e.latlng.lng], { title: "Mein Punkt", alt: "Informationspunkt", draggable: true, }) .addTo(mymap) .on('dragend', function() { var coord = String(myMarker.getLatLng()).split(','); var lata = coord[0].split('('); var lnga = coord[1].split(')'); lat = lata[1]; lng = lnga[0]; myMarker.bindPopup("Bewegt zu: " + lata[1] + ", " + lnga[0] + "."); //console.log(lat+" "+lng); }); $("#dialog").show(); }; hammLayer.on('click',function(e){ e.preventDefault(); }) mymap.on('click', onMapClick); // Close Dialog $("#close").click(function(e) { $("#dialog").hide(); $("#description").val("").empty(); $("#defect").val(0); $("#topic").val(2); $("#photo").val(""); edit = true; mymap.removeLayer(myMarker); }) // Ajax-Based submit $("#newobjectform").submit(function(event){ $("#lat").val(lat); $("#lng").val(lng); $("#district").val("<?=$strDistrict?>"); //topic=$('input[name=topic]:checked').val(); topic=2; // Keine Eingabe als Auswahlfeld in ADFC-Hindernis-Melder newMarker = getMarker(topic); event.preventDefault(); //grab all form data var formData = new FormData($(this)[0]); $.ajax({ type: "POST", url: "ajax/ajax_location_push.php", enctype: 'multipart/form-data', data: formData, //$("#newobjectform").serialize(), // serializes the form's elements. processData: false, contentType: false, cache: false, beforeSend : function () { $("#loader").show(); }, success: function(data) { $("#dialog").hide(); $("#description").val("").empty(); $("#defect").val(0); $("#topic").val(2); $("#photo").val(""); popuptext=data; marker[marker_max] = L.marker([lat,lng], { icon: newMarker }).addTo(mymap); marker[marker_max].bindPopup(popuptext); marker_max++; edit=true; mymap.removeLayer(myMarker); $("#btnSubmit").prop("disabled", false); event.preventDefault(); // description = arrDescription[id]+"<div class='comment'><em>"+username+" schrieb am "+today+"</em><br>"+comment+"</div>"; // marker[id][0].bindPopup(description); }, complete: function() { $("#loader").hide(); }, error: function(data) { alert('Fehler: Konnte keine Daten senden!'); // show response from post. } }); edit=true; mymap.removeLayer(myMarker); return false; }); // 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(); } } }); } }) // Rating ---------------------------------------------------------------- function thumb_up_down(id,num,mode) { $.ajax({ type: 'POST', url: 'ajax/ajax_rating.php', data: 'mode='+mode+'&id='+id+'&value='+num+'', success: function(data){ if (data=="error") alert("Fehler"); }, dataType: 'html' }); alert("Vielen Dank für Ihre Bewertung!"); id="#"+mode+"s_"+id; num=num+1; $(id).html(num); } // Comment ------------------------------------------------------------------- function open_comment(id) { $("#dialog_comment").show(); $("#loc_id").val(id); $('#comment').val(""); } $("#close_comment").click(function(e) { $("#dialog_comment").hide(); }) $("#commentform").submit(function(event){ //$(".ajax-wait-panel").addClass("ajax-waiting"); //console.log($("#commentform").serialize()); $.ajax({ type: "POST", url: "ajax/ajax_comment_push.php", data: $("#commentform").serialize(), // serializes the form's elements. success: function(data) { $("#dialog_comment").hide(); var id = $("#loc_id").val(); var username = $("#comment_username").val(); var comment = $("#comment").val(); var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = dd + '.' + mm + '.' + yyyy; description = arrDescription[id]+"<div class='comment'><em>"+username+" schrieb am "+today+"</em><br>"+comment+"</div>"; marker[id][0].bindPopup(description); }, error: function(data) { alert('Fehler: Konnte keine Daten senden!'); // show response from post. } //$(".ajax-wait-panel").removeClass("ajax-waiting"); }); return false; // avoid to execute the actual submit of the form. event.preventDefault(); }); // Check image upload ------------------------------------------------------ $("#photo").on('change', function (e) { var image_ok = true; var file, img; var _URL = window.URL || window.webkitURL; if ((file = this.files[0])) { var file = this.files[0]; var fileType = file["type"]; var validImageTypes = ["image/gif", "image/jpeg", "image/png"]; if ($.inArray(fileType, validImageTypes) < 0) { image_ok=false; alert("Keine Bilddatei, nur gif,jpeg,png erlaubt.") $("#photo").val(""); } //if (file["size"]>1000000) { alert("Bilder sollten maximal 1 MB groß sein");} if (image_ok) { img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { image_ok = (this.width<4000 && this.height<4000 && this.width>100 && this.height>100); //console.log("Breite:" + this.width + " Höhe: " + this.height); if (!image_ok) { alert("Bilder sollten maximal 4000 x 4000 Pixel groß sein.\n" +"Breite:" + this.width + " Höhe: " + this.height) } }; img.src = objectUrl; } } }); </script> </body> </html>