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

Ein Klick auf der Karte führt nun dazu, dass ein Popup mit Informationen über... 

Ein Klick auf der Karte führt nun dazu, dass ein Popup mit Informationen über diese Position erscheint.
parent f6706c73
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/js/iframeSearch.js
+ 20
− 20
View file @ da1d5c48
Source diff could not be displayed: it is too large. Options to address this: view the blob.
public/js/iframeSearch.js.map
+ 1
− 1
View file @ da1d5c48
Source diff could not be displayed: it is too large. Options to address this: view the blob.
public/js/mapSearch.js
+ 20
− 19
View file @ da1d5c48
Source diff could not be displayed: it is too large. Options to address this: view the blob.
public/js/mapSearch.js.map
+ 1
− 1
View file @ da1d5c48
Source diff could not be displayed: it is too large. Options to address this: view the blob.
resources/assets/js/map.js
+ 137
− 107
View file @ da1d5c48
......@@ -8,17 +8,17 @@ var vectorLayer;
var id = null;
var userPositionMarker = null;
var lockViewToPosition = true;
var moveFunction = function(){
var q = $("#search input[name=q]").val();
if(q !== ""){
updateMapExtent();
var q = $("#search input[name=q]").val();
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]+'/'+false+'/50');
$.getScript(url);
}
};
var moveFunction = function() {
var q = $("#search input[name=q]").val();
if (q !== "") {
updateMapExtent();
var q = $("#search input[name=q]").val();
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] + '/' + false + '/50');
$.getScript(url);
}
};
$(document).ready(function() {
// Initialize the Map
initMap();
......@@ -26,23 +26,21 @@ $(document).ready(function() {
toggleResults();
});
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
lastClick = coordinate;
var pos = ol.proj.transform(evt["coordinate"], 'EPSG:3857', 'EPSG:4326');
lastClick = pos;
getNearest(pos[0], pos[1]);
});
$(window).resize(function(){
$(window).resize(function() {
updateResultsPosition();
updateCloserPosition();
});
$("#follow-location > span.button").click(function(){
$("#follow-location > span.button").click(function() {
followLocation();
});
$("#lock-location > span.button").click(function(){
$("#lock-location > span.button").click(function() {
toggleViewLock();
});
});
var options = {
enableHighAccuracy: true,
timeout: 5000,
......@@ -73,48 +71,47 @@ function numberWithPoints(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function toggleResults(){
if ($("#results").attr("data-status") === "in") {
$("#closer").html("<");
$("#results").attr("data-status", "out");
$("#closer").attr("title", "Ergebnisse ausklappen");
updateResultsPosition();
updateCloserPosition();
} else {
$("#closer").html(">");
$("#results").attr("data-status", "in");
$("#closer").attr("title", "Ergebnisse einklappen");
updateResultsPosition();
updateCloserPosition();
}
function toggleResults() {
if ($("#results").attr("data-status") === "in") {
$("#closer").html("<");
$("#results").attr("data-status", "out");
$("#closer").attr("title", "Ergebnisse ausklappen");
updateResultsPosition();
updateCloserPosition();
} else {
$("#closer").html(">");
$("#results").attr("data-status", "in");
$("#closer").attr("title", "Ergebnisse einklappen");
updateResultsPosition();
updateCloserPosition();
}
}
function updateResultsPosition() {
if ($("#results").attr("data-status") === "out") {
$("#results").css("display", "none");
}else{
} else {
$("#results").css("display", "");
}
}
function updateCloserPosition() {
if($("#results").attr("data-status") === "out"){
if ($("#results").attr("data-status") === "out") {
$("#closer").css("right", "0px");
}else{
} else {
var screenWidth = $(window).width();
var resultsWidth = $("#results").width()-1;
var resultsWidth = $("#results").width() - 1;
var closerWidth = $("#closer").width();
if(screenWidth > (resultsWidth + closerWidth)){
if (screenWidth > (resultsWidth + closerWidth)) {
$("#closer").css("right", resultsWidth + "px");
}else{
} else {
$("#closer").css("right", (resultsWidth - closerWidth) + "px");
}
}
}
}
function adjustView(results) {
if(results.length <= 0)
return;
if (results.length <= 0) return;
var minPosition = [];
var maxPosition = [];
for (var i = 0; i < results.length; i++) {
......@@ -151,15 +148,56 @@ function adjustView(results) {
map.getView().fitExtent([minPosition[0], minPosition[1], maxPosition[0], maxPosition[1]], map.getSize());
updateMapExtent();
}
/**
* Parsesan OSM-Address-Object for the Road-Name
* @param {Array} address
* @return {String} roadname
*/
function getRoad(address) {
var road = "";
if (typeof address["road"] !== 'undefined') {
road = address["road"];
} else if (typeof address["pedestrian"] !== 'undefined') {
road = address["pedestrian"];
} else if (typeof address["footway"] !== 'undefined') {
road = address["footway"];
}
return road;
}
/**
* Parse an OSM-Address-Object for the House Number
* @param {Array} address
* @return {String} Housenumber
*/
function getHouseNumber(address) {
var house_number = typeof address["house_number"] !== 'undefined' ? address["house_number"] : "";
return house_number;
}
/**
* Parse an OSM-Address-Object for the City (including Zip-Code)
* @param {Array} address
* @return {String} City
*/
function getCity(address) {
var city = typeof address["postcode"] !== 'undefined' ? address["postcode"] + " " : "";
if (typeof address["city"] !== "undefined") {
city += address["city"];
} else if (typeof address["town"] !== "undefined") {
city += address["town"];
} else if (typeof address["village"] !== "undefined") {
city += address["village"];
}
return city;
}
function adjustViewBoundingBox(minpos,maxpos){
function adjustViewBoundingBox(minpos, maxpos) {
minPosition = ol.proj.transform(minpos, 'EPSG:4326', 'EPSG:3857');
maxPosition = ol.proj.transform(maxpos, 'EPSG:4326', 'EPSG:3857');
map.getView().fitExtent([minPosition[0], minPosition[1], maxPosition[0], maxPosition[1]], map.getSize());
updateMapExtent();
}
function clearPOIS(){
function clearPOIS() {
// Remove All Existing Overlays
$.each(overlays, function(index, value) {
map.removeOverlay(value);
......@@ -169,89 +207,75 @@ function clearPOIS(){
// Remove Existing Results
$("#results > .result").remove();
$("#results > h4").remove();
overlays = [];
}
function centerMap(longitude, latitude){
function centerMap(longitude, latitude) {
var point = ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857')
map.getView().setCenter(point);
}
/**
* Fügt einen Marker auf die Karte hinzu
* Parameter:
* el: HTML-Code für das Element, welches den Marker definiert
* pos: Position, auf der sich der Marker befinden soll int[2] (Lat, Long)
**/
function addMarker(el, pos){
* Fügt einen Marker auf die Karte hinzu
* Parameter:
* el: HTML-Code für das Element, welches den Marker definiert
* pos: Position, auf der sich der Marker befinden soll int[2] (Lat, Long)
**/
function addMarker(el, pos) {
var overlay = new ol.Overlay({
position: pos,
element: el,
offset: [-12, -45],
stopEvent: false,
});
position: pos,
element: el,
offset: [-12, -45],
stopEvent: false,
});
map.addOverlay(overlay);
return overlay;
}
function followLocation(){
function followLocation() {
// Element to be displayed at the user-location
var el = $('<span id="user-position" class="glyphicon glyphicon-record" style="color: #2881cc;"></span>');
if(lockViewToPosition)
$("#lock-location").addClass("active");
else
$("#lock-location").removeClass("active");
if(id === null){
if (lockViewToPosition) $("#lock-location").addClass("active");
else $("#lock-location").removeClass("active");
if (id === null) {
id = navigator.geolocation.watchPosition(function(position) {
// Remove possibly existing User-Location Marker:
if(userPositionMarker !== null){
map.removeLayer(userPositionMarker);
userPositionMarker = null;
}
// Create User Position
var point_geom = new ol.geom.Point(ol.proj.transform([position.coords.longitude, position.coords.latitude], 'EPSG:4326', 'EPSG:3857'));
var point_feature = new ol.Feature({
name: "Position",
geometry: point_geom
});
// Create the accuracy Circle:
var circle = new ol.geom.Circle(
ol.proj.transform([position.coords.longitude, position.coords.latitude], 'EPSG:4326', 'EPSG:3857'),
position.coords.accuracy);
var accuracy_feature = new ol.Feature({
name: "Accuracy",
geometry: circle
});
userPositionMarker = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature, accuracy_feature]
})
});
map.addLayer(userPositionMarker);
if(lockViewToPosition){
// Fit the Extent of the Map to Fit the new Features Exactly
map.getView().fitExtent(userPositionMarker.getSource().getExtent(), map.getSize());
}
// Change the color of the Icon so the user knows that the position is tracked:
$("#follow-location").addClass("active");
}, function(error){}, options);
// Remove possibly existing User-Location Marker:
if (userPositionMarker !== null) {
map.removeLayer(userPositionMarker);
userPositionMarker = null;
}
// Create User Position
var point_geom = new ol.geom.Point(ol.proj.transform([position.coords.longitude, position.coords.latitude], 'EPSG:4326', 'EPSG:3857'));
var point_feature = new ol.Feature({
name: "Position",
geometry: point_geom
});
// Create the accuracy Circle:
var circle = new ol.geom.Circle(ol.proj.transform([position.coords.longitude, position.coords.latitude], 'EPSG:4326', 'EPSG:3857'), position.coords.accuracy);
var accuracy_feature = new ol.Feature({
name: "Accuracy",
geometry: circle
});
userPositionMarker = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature, accuracy_feature]
})
});
map.addLayer(userPositionMarker);
if (lockViewToPosition) {
// Fit the Extent of the Map to Fit the new Features Exactly
map.getView().fitExtent(userPositionMarker.getSource().getExtent(), map.getSize());
}
// Change the color of the Icon so the user knows that the position is tracked:
$("#follow-location").addClass("active");
}, function(error) {}, options);
// Show the Lock View to Position Button
$("#lock-location").removeClass("hidden");
$("#lock-location > span.info").fadeOut(2000);
}else{
} else {
map.removeLayer(userPositionMarker);
userPositionMarker = null;
navigator.geolocation.clearWatch(id);
id = null;
// Clear the color of the Icon so the user knows that the position is no longer tracked
$("#follow-location").removeClass("active");
// Hide the lock View to Position Button
......@@ -261,13 +285,13 @@ function followLocation(){
}
function toggleViewLock() {
if(lockViewToPosition){
if (lockViewToPosition) {
lockViewToPosition = false;
$("#lock-location").removeClass("active");
$("#lock-location > span.info").html("Ansicht freigegeben");
$("#lock-location > span.info").css("display", "");
$("#lock-location > span.info").fadeOut(2000);
}else{
} else {
lockViewToPosition = true;
$("#lock-location").addClass("active");
$("#lock-location > span.info").html("Ansicht zentriert");
......@@ -275,3 +299,9 @@ function toggleViewLock() {
$("#lock-location > span.info").fadeOut(2000);
}
}
function createPopup(lon, lat, html){
var pos = ol.proj.transform([parseFloat(lon), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857');
$("#popup-content").html(html);
popupOverlay.setPosition(pos);
}
resources/assets/js/mapSearch.js
+ 36
− 14
View file @ da1d5c48
$(document).ready(function() {
if(!boundings && getPosition)
receiveLocation();
if(boundings){
adjustViewBoundingBox(minPos,maxPos);
if (!boundings && getPosition) receiveLocation();
if (boundings) {
adjustViewBoundingBox(minPos, maxPos);
}
$("#clearInput").click(function() {
$("#clearInput").click(function() {
$("#search input[name=q]").val('');
$("#search input[name=q]").focus();
clearPOIS();
$("#results").addClass("hidden");
$.each(overlays, function(index, value){
$.each(overlays, function(index, value) {
map.removeOverlay(value);
$("#popup-closer").click();
});
});
$( "#search input[name=q]" ).on( "keydown", function(event) {
if(event.which == 13)
$("#doSearch").click();
$("#search input[name=q]").on("keydown", function(event) {
if (event.which == 13) $("#doSearch").click();
});
$("#doSearch").click(function() {
updateMapExtent();
......@@ -24,17 +22,15 @@ $(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]);
$.getScript(url).fail(function(jqxhr, settings, exception){
$.getScript(url).fail(function(jqxhr, settings, exception) {
console.log(exception);
});
$("#search input[name=q]").blur();
});
});
function initMap() {
popupOverlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
popupOverlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
element: $("#popup"),
autoPan: true,
autoPanAnimation: {
......@@ -77,9 +73,35 @@ function initMap() {
loadTilesWhileInteracting: true
});
map.addControl(new ol.control.ZoomSlider());
$("#popup-closer").click(function(){
$("#popup-closer").click(function() {
popupOverlay.setPosition(undefined);
$(this).blur();
return false;
});
}
/**
* This function sends a request to our Nominatim instance and evaluates the given coordinates to an adress
* @param {Float} lon
* @param {Float} lat
* @return {Array} adress
*/
function getNearest(lon, lat) {
var url = "https://maps.metager.de/nominatim/reverse.php?format=json&lat=" + lat + "&lon=" + lon + "&zoom=18";
// Send the Request
$.get(url, function(data) {
if (typeof data !== "undefined" && typeof data["address"] !== "undefined") {
// Success we have an address
var address = data["address"];
var road = getRoad(address);
var house_number = getHouseNumber(address);
var city = getCity(address);
var id = data["place_id"];
var popup = $("<div class=\"result col-xs-12\"> " + "<p class=\"address\">" + road + " " + house_number + "</p><p class=\"city\">" + city + "</p><p class=\"address\">Longitude: " + lon + "</p><p class=\"address\">Latitude: " + lat + "</p>" + "<a href=\"https://maps.metager.de/nominatim/details.php?place_id=" + id + "\" target=\"_blank\" class=\"btn btn-default btn-xs\">Details</a></div>");
// And now we can show the Popup where the user clicked
createPopup(lon, lat, popup);
}
});
}
\ No newline at end of file
resources/views/searchResults.blade.php
+ 86
− 113
View file @ da1d5c48
var searchResults = {!! $results !!};
var searchResults = {!!$results!!};
map.un("moveend", moveFunction, map);
clearPOIS();
var markers = [];
@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(){
$("#showResults").click(function() {
adjustView(searchResults);
});
@endif
var featureStyle = new ol.style.Style({
stroke: new ol.style.Stroke({ color: 'rgb(255,128,0)' }),
fill: new ol.style.Fill({ color: 'rgba(255,128,0,.03)'})
stroke: new ol.style.Stroke({
color: 'rgb(255,128,0)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,128,0,.03)'
})
});
$.each(searchResults, function(index, value) {
var el = $('<span id="index" class="marker" style="filter: hue-rotate('+value["huerotate"]+'deg);">'+index+'</span>');
markers.push(el);
var pos = ol.proj.transform([parseFloat(value["lon"]), parseFloat(value["lat"])], 'EPSG:4326', 'EPSG:3857');
overlays.push(addMarker(el, pos));
// Push Resultlist
var type = typeof value["type"] !== 'undefined' ? value["type"] : "";
type = type.replace("_", " ");
type = type.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
var road = "";
var house_number = "";
var city = "";
if(typeof value["address"] !== 'undefined'){
if (typeof value["address"]["road"] !== 'undefined') {
road = value["address"]["road"];
} else if (typeof value["address"]["pedestrian"] !== 'undefined') {
road = value["address"]["pedestrian"];
} else if (typeof value["address"]["footway"] !== 'undefined') {
road = value["address"]["footway"];
}
house_number = typeof value["address"]["house_number"] !== 'undefined' ? value["address"]["house_number"] : "";
city = typeof value["address"]["postcode"] !== 'undefined' ? value["address"]["postcode"] + " " : "";
if(typeof value["address"]["city"] !== "undefined"){
city += value["address"]["city"];
}else if(typeof value["address"]["town"] !== "undefined"){
city += value["address"]["town"];
}else if(typeof value["address"]["village"] !== "undefined"){
city += value["address"]["village"];
var el = $('<span id="index" class="marker" style="filter: hue-rotate(' + value["huerotate"] + 'deg);">' + index + '</span>');
markers.push(el);
var pos = ol.proj.transform([parseFloat(value["lon"]), parseFloat(value["lat"])], 'EPSG:4326', 'EPSG:3857');
overlays.push(addMarker(el, pos));
// Push Resultlist
var type = typeof value["type"] !== 'undefined' ? value["type"] : "";
type = type.replace("_", " ");
type = type.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
var road = "";
var house_number = "";
var city = "";
if (typeof value["address"] !== 'undefined') {
road = getRoad(value["address"]);
house_number = getHouseNumber(value["address"]);
city = getCity(value["address"]);
}
var opening_hours = "";
var population = "";
if (typeof value["extratags"] !== 'undefined') {
opening_hours = typeof value["extratags"]["opening_hours"] !== 'undefined' ? value["extratags"]["opening_hours"] : "";
opening_hours = opening_hours.replace(/,/g, ",<br />");
opening_hours = opening_hours.replace(/;/g, ",<br />");
population = typeof value["extratags"]["population"] !== 'undefined' ? " (" + numberWithPoints(value["extratags"]["population"]) + " Einwohner)" : "";
}
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><a href=\"https://maps.metager.de/nominatim/details.php?place_id=" + value["place_id"] + "\" target=\"_blank\" class=\"btn btn-default btn-xs\">Details</a></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>" + "<a href=\"https://maps.metager.de/nominatim/details.php?place_id=" + value["place_id"] + "\" target=\"_blank\" class=\"btn btn-default btn-xs\">Details</a></div>");
$("#results").append(res);
el.click(function(evt) {
createPopup(value["lon"], value["lat"], resPopup);
});
var resultHoverIn = function() {
// Wenn du Maus auf das Ergebnis fährt:
$.each(markers, function(index, value) {
if (value !== el) {
value.css("filter", value.css("filter") + " grayscale(1)");
}
}
var opening_hours = "";
var population = "";
if(typeof value["extratags"] !== 'undefined'){
opening_hours = typeof value["extratags"]["opening_hours"] !== 'undefined' ? value["extratags"]["opening_hours"] : "";
opening_hours = opening_hours.replace(/,/g, ",<br />");
opening_hours = opening_hours.replace(/;/g, ",<br />");
population = typeof value["extratags"]["population"] !== 'undefined' ? " (" + numberWithPoints(value["extratags"]["population"]) + " Einwohner)" : "";
}
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><a href=\"https://maps.metager.de/nominatim/details.php?place_id="+value["place_id"]+"\" target=\"_blank\" class=\"btn btn-default btn-xs\">Details</a></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>" + "<a href=\"https://maps.metager.de/nominatim/details.php?place_id="+value["place_id"]+"\" target=\"_blank\" class=\"btn btn-default btn-xs\">Details</a></div>");
$("#results").append(res);
el.click(function(evt){
$("#popup-content").html(resPopup);
popupOverlay.setPosition(pos);
});
var resultHoverIn = function(){
// Wenn du Maus auf das Ergebnis fährt:
$.each(markers, function(index, value){
if(value !== el){
value.css("filter", value.css("filter") + " grayscale(1)");
}
});
el.css("transform", "scale(1.2)");
el.parent().css("z-index", "20000");
res.css("background-color", "#f2dede");
res.css("border-color", "#a94442");
};
var resultHoverOut = function(){
// Wenn die Maus das Ergebnis verlässt:
$.each(markers, function(index, value){
if(value !== el){
var css = value.css("filter");
css = css.replace(" grayscale(1)", "");
value.css("filter", css);
}
});
el.css("transform", "scale(1)");
el.parent().css("z-index", "0");
res.css("background-color", "");
res.css("border-color", "");
};
res.hover(resultHoverIn, resultHoverOut);
el.hover(resultHoverIn, resultHoverOut);
$("#results").removeClass("hidden");
$("#closer").removeClass("hidden");
updateCloserPosition();
// Add Features
var geom = (new ol.format.GeoJSON()).readGeometry(value["geojson"], {
'dataProjection': 'EPSG:4326',
'featureProjection': 'EPSG:3857'
});
var feature = new ol.Feature({
'geometry': geom
el.css("transform", "scale(1.2)");
el.parent().css("z-index", "20000");
res.css("background-color", "#f2dede");
res.css("border-color", "#a94442");
};
var resultHoverOut = function() {
// Wenn die Maus das Ergebnis verlässt:
$.each(markers, function(index, value) {
if (value !== el) {
var css = value.css("filter");
css = css.replace(" grayscale(1)", "");
value.css("filter", css);
}
});
feature.setStyle(featureStyle);
feature.setId(index);
vectorSource.addFeature(feature);
el.css("transform", "scale(1)");
el.parent().css("z-index", "0");
res.css("background-color", "");
res.css("border-color", "");
};
res.hover(resultHoverIn, resultHoverOut);
el.hover(resultHoverIn, resultHoverOut);
$("#results").removeClass("hidden");
$("#closer").removeClass("hidden");
updateCloserPosition();
// 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.setStyle(featureStyle);
feature.setId(index);
vectorSource.addFeature(feature);
});
// add Features
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer)
source: vectorSource
});
map.addLayer(vectorLayer)
@if($adjustView === true)
adjustView(searchResults);
@endif
// Hide Navbar if expanded
$(".collapse").collapse("hide");
$("#clearInput").html('<span class="font-bold">X</span>');
@if($adjustLink)
var stateObj = { url: '/{{$search . "/" . $bounds[0] . "/" . $bounds[1] . "/" . $bounds[2] . "/" . $bounds[3]}}'};
var stateObj = {
url: '/{{$search . "/" . $bounds[0] . "/" . $bounds[1] . "/" . $bounds[2] . "/" . $bounds[3]}}'
};
// Change URL
window.history.pushState(stateObj, '', '/map/{{$search . "/" . $bounds[0] . "/" . $bounds[1] . "/" . $bounds[2] . "/" . $bounds[3]}}');
// Add the research function after the map moved
map.on("moveend", moveFunction, map);
@endif
@endif
\ No newline at end of file
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