Init
This commit is contained in:
Walter Hupfeld
244
index.php
Normal file
244
index.php
Normal file
@@ -0,0 +1,244 @@
|
||||
<?php
|
||||
|
||||
require("config.php");
|
||||
require_once("lib/functions.php");
|
||||
|
||||
|
||||
|
||||
$strIntro ="<h4>".$strTitle."</h4>";
|
||||
$strIntro .= nl2br2($strIntroText);
|
||||
|
||||
$strSQL="SELECT * FROM Unfallorte";
|
||||
|
||||
$result = $db->query($strSQL);
|
||||
$arrMarker = array();
|
||||
$arrDescription = array();
|
||||
|
||||
while ($row = $result->fetchArray()) {
|
||||
$id=$row['OBJECTID'];
|
||||
$topic = 2;
|
||||
$numLng = $row['XGCSWGS84'];
|
||||
$numLat = $row['YGCSWGS84'];
|
||||
$strDescription=generate_tooltip_description($row);
|
||||
|
||||
|
||||
$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">
|
||||
|
||||
<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/lightbox.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/lightbox.css" />
|
||||
|
||||
<title>Ideenmelder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="#"><?= $strTitle ?></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>
|
||||
</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;">
|
||||
<div class="row">
|
||||
|
||||
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
|
||||
<div class="sidebar-sticky">
|
||||
<img class="logo" src="<?=$strLogo?>" alt="Logo" >
|
||||
<ul class="nav flex-column">
|
||||
<?php
|
||||
foreach ($arrTopic as $key=>$topic) {
|
||||
echo "<li class='nav-item'>";
|
||||
echo "<label>";
|
||||
echo "<a class='nav-link'>".$arrIcon[$key]." ";
|
||||
echo "<input type='checkbox' name='check_".$key."' id='check_".$key."' class='check' checked='checked' > ";
|
||||
echo $topic."</a></label>";
|
||||
echo "</li>";
|
||||
}
|
||||
?>
|
||||
</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=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
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
|
||||
};
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
|
||||
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."').openPopup();";
|
||||
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
hammLayer.on('click',function(e){ e.preventDefault(); })
|
||||
mymap.on('click', onMapClick);
|
||||
|
||||
|
||||
|
||||
|
||||
// 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(); }
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user