Skip to content
Snippets Groups Projects
Commit 0922bdd6 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Marker heben sich nun auch farblich voneinander ab. 

Polygone werden wieder auf der Karte eingezeichnet
parent 31cedc6b
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
app/Http/Controllers/SearchController.php
+ 9
− 5
View file @ 0922bdd6
......@@ -10,14 +10,16 @@ class SearchController extends Controller
public function boundingBoxSearch($search, $latMin, $lonMin, $latMax, $lonMax, $adjustView = true)
{
$search = urldecode($search);
// Gibt an, ob die Suche im angezeigten Bereich erfolgreich war:
$boundingSuccess = true;
# Get The Search Results
$link = "https://maps.metager.de/nominatim/search.php?q=" . urlencode($search) . "&limit=1000&bounded=1&polygon_geojson=1&viewbox=$latMin,$lonMin,$latMax,$lonMax&format=json&extratags=1&addressdetails=1";
$results = json_decode(file_get_contents($link), true);
if (!$results && $latMin && $lonMin && $latMax && $lonMax) {
$link = "https://maps.metager.de/nominatim/search.php?q=" . urlencode($search) . "&limit=1000&polygon_geojson=1&format=json&extratags=1&addressdetails=1";
$results = json_decode(file_get_contents($link), true);
$boundingSuccess = false;
$link = "https://maps.metager.de/nominatim/search.php?q=" . urlencode($search) . "&limit=1000&polygon_geojson=1&format=json&extratags=1&addressdetails=1";
$results = json_decode(file_get_contents($link), true);
}
$searchResults = [];
......@@ -34,11 +36,13 @@ public function boundingBoxSearch($search, $latMin, $lonMin, $latMax, $lonMax, $
$tmp["extratags"] = $result["extratags"];
$tmp["boundingbox"] = $result["boundingbox"];
$tmp["geojson"] = $result["geojson"];
$searchResults[] = $tmp;
$tmp["huerotate"] = hexdec(substr(md5(serialize($result)), 0, 5)) % 360;
$searchResults[] = $tmp;
}
}
# Wir erstellen die Ergebnisseite (JavaScipr)
$response = Response::make(view('searchResults')->with("results", json_encode($searchResults))->with('adjustView', $adjustView), 200);
$response = Response::make(view('searchResults')->with("results", json_encode($searchResults))->with('adjustView', $adjustView)->with('boundingSuccess', $boundingSuccess), 200);
$response->header('Content-Type', 'application/javascript');
return $response;
}
......
public/js/all.js
+ 20
− 20
View file @ 0922bdd6
This diff is collapsed.
public/js/all.js.map
+ 1
− 1
View file @ 0922bdd6
This diff is collapsed.
resources/assets/js/map.js
+ 42
− 0
View file @ 0922bdd6
var map;
var extent;
var overlays = [];
var vectorSource = new ol.source.Vector();
var lastClick;
var popupOverlay;
var vectorLayer;
$(document).ready(function() {
// Initialize the Map
initMap();
......@@ -33,6 +35,7 @@ $(document).ready(function() {
q = encodeURI(q);
$("#clearInput").html("<img src=\"/img/ajax-loader.gif\" />");
var url = '/' + q + '/' + encodeURI(extent[0]) + '/' + encodeURI(extent[1]) + '/' + encodeURI(extent[2]) + '/' + encodeURI(extent[3]);
console.log(url);
$.getScript(url).fail(function(jqxhr, settings, exception){
console.log(exception);
});
......@@ -147,4 +150,43 @@ function updateMapExtent() {
function numberWithPoints(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function adjustView(results) {
if(results.length <= 0)
return;
var minPosition = [];
var maxPosition = [];
for (var i = 0; i < results.length; i++) {
if (typeof minPosition[0] === 'undefined' || minPosition[0] > parseFloat(results[i]["lon"])) {
minPosition[0] = parseFloat(results[i]["lon"]);
}
if (typeof minPosition[0] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && minPosition[0] > parseFloat(results[i]["boundingbox"][2]))) {
minPosition[0] = parseFloat(results[i]["boundingbox"][2]);
}
if (typeof minPosition[1] === 'undefined' || minPosition[1] > parseFloat(results[i]["lat"])) {
minPosition[1] = parseFloat(results[i]["lat"]);
}
if (typeof minPosition[1] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && minPosition[1] > parseFloat(results[i]["boundingbox"][0]))) {
minPosition[1] = parseFloat(results[i]["boundingbox"][0]);
}
if (typeof maxPosition[0] === 'undefined' || maxPosition[0] < parseFloat(results[i]["lon"])) {
maxPosition[0] = parseFloat(results[i]["lon"]);
}
if (typeof maxPosition[0] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && maxPosition[0] < parseFloat(results[i]["boundingbox"][3]))) {
maxPosition[0] = parseFloat(results[i]["boundingbox"][3]);
}
if (typeof maxPosition[1] === 'undefined' || maxPosition[1] < parseFloat(results[i]["lat"])) {
maxPosition[1] = parseFloat(results[i]["lat"]);
}
if (typeof maxPosition[1] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && maxPosition[1] < parseFloat(results[i]["boundingbox"][1]))) {
maxPosition[1] = parseFloat(results[i]["boundingbox"][1]);
}
if (typeof results[i]["type"] !== 'undefined' && (results[i]["type"] === 'city' || results[i]["type"] === 'administrative' || results[i]["type"] === 'river')) {
break;
}
}
minPosition = ol.proj.transform(minPosition, 'EPSG:4326', 'EPSG:3857');
maxPosition = ol.proj.transform(maxPosition, 'EPSG:4326', 'EPSG:3857');
map.getView().fitExtent([minPosition[0], minPosition[1], maxPosition[0], maxPosition[1]], map.getSize())
}
\ No newline at end of file
resources/views/searchResults.blade.php
+ 29
− 43
View file @ 0922bdd6
......@@ -4,14 +4,22 @@ var searchResults = {!! $results !!};
$.each(overlays, function(index, value) {
map.removeOverlay(value);
});
map.removeLayer(vectorLayer);
// Remove Existing Results
$("#results > .result").remove();
$("#results > h4").remove();
overlays = [];
@if($boundingSuccess === false)
$("#results").append('<div class="result col-xs-12"><div class="col-xs-2"></div><div class="col-xs-10"><p class="title">Keine Ergebnisse gefunden</p></div></div><div class="clearfix result"></div><h4>Ergebnisse außerhalb des angezeigten Bereichs:<small><a id="showResults" href="#">(anzeigen)</a></small></h4>');
$("#showResults").click(function(){
adjustView(searchResults);
});
@endif
$.each(searchResults, function(index, value) {
var el = $('<span id="index" class="marker">'+index+'</span>');
var el = $('<span id="index" class="marker" style="filter: hue-rotate('+value["huerotate"]+'deg);">'+index+'</span>');
var pos = ol.proj.transform([parseFloat(value["lon"]), parseFloat(value["lat"])], 'EPSG:4326', 'EPSG:3857');
var overlay = new ol.Overlay({
position: pos,
......@@ -54,8 +62,8 @@ $.each(searchResults, function(index, value) {
opening_hours = opening_hours.replace(/;/g, ",<br />");
population = typeof value["extratags"]["population"] !== 'undefined' ? " (" + numberWithPoints(value["extratags"]["population"]) + " Einwohner)" : "";
}
var res = $("<div class=\"result col-sm-12\"><div class=\"col-xs-2\"><span id=\"index\" class=\"marker\">"+index+"</span></div>" + "<div class=\"col-xs-10\"><p class=\"title\">" + value["title"] + "</p>" + "<p class=\"type\">" + type + population + "</p>" + "<p class=\"address\">" + road + " " + house_number + "</p><p class=\"city\">" + city + "</p>" + "<p class=\"opening-hours\">" + opening_hours + "</p>" + "<p class=\"tags\">" + "</p>" + "</div></div>");
var resPopup = $("<div class=\"result col-sm-12\"> " + "<p class=\"title\">" + value["title"] + "</p>" + "<p class=\"type\">" + type + population + "</p>" + "<p class=\"address\">" + road + " " + house_number + "</p><p class=\"city\">" + city + "</p>" + "<p class=\"opening-hours\">" + opening_hours + "</p>" + "<p class=\"tags\">" + "</p>" + "</div>");
var res = $("<div class=\"result col-xs-12\" id=\"result-"+index+"\"><div class=\"col-xs-2\"><span class=\"marker\" style=\"filter: hue-rotate("+value["huerotate"]+"deg);\">"+index+"</span></div>" + "<div class=\"col-xs-10\"><p class=\"title\">" + value["title"] + "</p>" + "<p class=\"type\">" + type + population + "</p>" + "<p class=\"address\">" + road + " " + house_number + "</p><p class=\"city\">" + city + "</p>" + "<p class=\"opening-hours\">" + opening_hours + "</p>" + "<p class=\"tags\">" + "</p></div></div>");
var resPopup = $("<div class=\"result col-xs-12\"> " + "<p class=\"title\">" + value["title"] + "</p>" + "<p class=\"type\">" + type + population + "</p>" + "<p class=\"address\">" + road + " " + house_number + "</p><p class=\"city\">" + city + "</p>" + "<p class=\"opening-hours\">" + opening_hours + "</p>" + "<p class=\"tags\">" + "</p>" + "</div>");
$("#results").append(res);
el.click(function(evt){
$("#popup-content").html(resPopup);
......@@ -63,8 +71,25 @@ $.each(searchResults, function(index, value) {
});
$("#results").removeClass("hidden");
// Add Features
var geom = (new ol.format.GeoJSON()).readGeometry(value["geojson"], {
'dataProjection': 'EPSG:4326',
'featureProjection': 'EPSG:3857'
});
var feature = new ol.Feature({
'geometry': geom
});
feature.setId(index);
vectorSource.addFeature(feature);
});
// add Features
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer)
@if($adjustView === true)
console.log("test");
adjustView(searchResults);
......@@ -72,42 +97,3 @@ adjustView(searchResults);
$("#clearInput").html('<span class="font-bold">X</span>');
function adjustView(results) {
if(results.length <= 0)
return;
var minPosition = [];
var maxPosition = [];
for (var i = 0; i < results.length; i++) {
if (typeof minPosition[0] === 'undefined' || minPosition[0] > parseFloat(results[i]["lon"])) {
minPosition[0] = parseFloat(results[i]["lon"]);
}
if (typeof minPosition[0] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && minPosition[0] > parseFloat(results[i]["boundingbox"][2]))) {
minPosition[0] = parseFloat(results[i]["boundingbox"][2]);
}
if (typeof minPosition[1] === 'undefined' || minPosition[1] > parseFloat(results[i]["lat"])) {
minPosition[1] = parseFloat(results[i]["lat"]);
}
if (typeof minPosition[1] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && minPosition[1] > parseFloat(results[i]["boundingbox"][0]))) {
minPosition[1] = parseFloat(results[i]["boundingbox"][0]);
}
if (typeof maxPosition[0] === 'undefined' || maxPosition[0] < parseFloat(results[i]["lon"])) {
maxPosition[0] = parseFloat(results[i]["lon"]);
}
if (typeof maxPosition[0] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && maxPosition[0] < parseFloat(results[i]["boundingbox"][3]))) {
maxPosition[0] = parseFloat(results[i]["boundingbox"][3]);
}
if (typeof maxPosition[1] === 'undefined' || maxPosition[1] < parseFloat(results[i]["lat"])) {
maxPosition[1] = parseFloat(results[i]["lat"]);
}
if (typeof maxPosition[1] === 'undefined' || (typeof results[i]["boundingbox"] !== 'undefined' && maxPosition[1] < parseFloat(results[i]["boundingbox"][1]))) {
maxPosition[1] = parseFloat(results[i]["boundingbox"][1]);
}
if (typeof results[i]["type"] !== 'undefined' && (results[i]["type"] === 'city' || results[i]["type"] === 'administrative' || results[i]["type"] === 'river')) {
break;
}
}
minPosition = ol.proj.transform(minPosition, 'EPSG:4326', 'EPSG:3857');
maxPosition = ol.proj.transform(maxPosition, 'EPSG:4326', 'EPSG:3857');
map.getView().fitExtent([minPosition[0], minPosition[1], maxPosition[0], maxPosition[1]], map.getSize())
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment