Weitere Kleinigkeiten ergänzt für eine Anzeige im IFrame

app/Http/Controllers/SearchController.php

@@ -74,6 +74,5 @@ public function iframeSearch($search)
             }
         }
         # Wir erstellen die Ergebnisseite (JavaScipt)
-        return view('mapIframe')->with("results", json_encode($searchResults))->with('adjustView', true);
     }
 }

gulpfile.js

@@ -11,6 +11,8 @@ require('laravel-elixir-vue-2');
  |
  */
 elixir((mix) => {
-    mix.styles(['bootstrap.min.css', 'ol.css', 'style.css']);
-    mix.scripts(['jquery.min.js', 'bootstrap.min.js', 'iframeResizer.contentWindow.min.js', 'ol.js', 'map.js']);
+    mix.styles(['bootstrap.min.css', 'ol.css', 'style.css', 'mapSearch.css'], 'public/css/mapSearch.css');
+    mix.styles(['bootstrap.min.css', 'ol.css', 'style.css', 'iframeSearch.css'], 'public/css/iframeSearch.css');
+    mix.scripts(['jquery.min.js', 'bootstrap.min.js', 'ol.js', 'map.js', 'mapSearch.js'], 'public/js/mapSearch.js');
+    mix.scripts(['jquery.min.js', 'bootstrap.min.js', 'ol.js', 'map.js', 'iframeSearch.js', 'iframeResizer.contentWindow.min.js'], 'public/js/iframeSearch.js');
 });
\ No newline at end of file

resources/assets/css/iframeSearch.css

+body {
+    max-height: 500px;
+}
+
+#map {
+    height: 500px;
+}
+
+#results {
+    height: 500px;
+}
\ No newline at end of file

resources/assets/css/mapSearch.css

+#map {
+    height: 100vh;
+}
+
+#results {
+    height: 100vh;
+    padding-top: 51px;
+}
+
+#closer {
+    top: 50px;
+}
\ No newline at end of file

resources/assets/css/style.css

@@ -73,10 +73,6 @@ nav {
     margin-bottom: 0!important;
 }
 
-#map {
-    height: 100vh;
-}
-
 .marker {
     background-image: url('/img/marker-icon.png');
     width: 25px;
@@ -138,12 +134,10 @@ nav {
 #results {
     background-color: white;
     position: absolute;
-    height: 100vh;
     overflow-y: scroll!important;
     top: 0;
     right: 0;
     padding: 0;
-    padding-top: 51px;
     overflow: visible;
     -webkit-box-shadow: -5px 0px 1px 0px rgba(50, 50, 50, 0.16);
     -moz-box-shadow: -5px 0px 1px 0px rgba(50, 50, 50, 0.16);
@@ -166,7 +160,7 @@ nav {
     -webkit-box-shadow: -2px 0px 1px 0px rgba(50, 50, 50, 0.16);
     -moz-box-shadow: -2px 0px 1px 0px rgba(50, 50, 50, 0.16);
     box-shadow: -2px 0px 1px 0px rgba(50, 50, 50, 0.16);
-    top: 50px;
+    top: 0;
 }
 
 .ol-popup {

resources/assets/js/iframeSearch.js

+function initMap() {
+
+    popupOverlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
+        element: $("#popup"),
+        autoPan: true,
+        autoPanAnimation: {
+            duration: 250
+        }
+    }));
+    map = new ol.Map({
+        layers: [
+            new ol.layer.Tile({
+                preload: Infinity,
+                source: new ol.source.OSM({
+                    attributions: [
+                        new ol.Attribution({
+                            html: 'All search results &copy; ' + '<a href="http://nominatim.openstreetmap.org/">Nominatim</a>'
+                        }),
+                        ol.source.OSM.ATTRIBUTION,
+                    ],
+                    url: 'https://maps.metager.de/osm_tiles/{z}/{x}/{y}.png'
+                })
+            })
+        ],
+        target: 'map',
+        controls: [],
+            interactions: ol.interaction.defaults({
+                doubleClickZoom: false,
+                dragAndDrop: false,
+                dragPan: false,
+                dragBox: false,
+                dragRotate: false,
+                dragRotateAndZoom: false,
+                dragZoom: false,
+                draw: false,
+                extent: false,
+                interaction: false,
+                pointer: false,
+                keyboardPan: false,
+                keyboardZoom: false,
+                modify: false,
+                pinchRotate: false,
+                pinchZoom: false,
+                snap: false,
+                translate: false,
+                mouseWheelZoom: false,
+                pointer: false,
+                select: false
+            }),
+        overlays: [popupOverlay],
+        view: new ol.View({
+            maxZoom: 18,
+            minZoom: 6,
+            center: ol.proj.transform(
+                [10.06897, 51.37247], 'EPSG:4326', 'EPSG:3857'),
+            zoom: 6
+        }),
+        loadTilesWhileAnimating: true,
+        loadTilesWhileInteracting: true
+    });
+    map.addControl(new ol.control.ZoomSlider());
+    $("#popup-closer").click(function(){
+        popupOverlay.setPosition(undefined);
+        $(this).blur();
+        return false;
+    });
+}
\ No newline at end of file

resources/assets/js/map.js

@@ -8,48 +8,9 @@ var vectorLayer;
 $(document).ready(function() {
     // Initialize the Map
     initMap();
-    receiveLocation();
-    $("#clearInput").click(function() {
-        $("#search input[name=q]").val('');
-        $("#search input[name=q]").focus();
-        $("#results > .result").remove();
-        $("#results").addClass("hidden");
-        $.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();
-    });
-    $("#doSearch").click(function() {
-        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]);
-        $.getScript(url).fail(function(jqxhr, settings, exception){
-            console.log(exception);
-        });
-        $("#search input[name=q]").blur();
-    });
     $("#closer").click(function() {
         toggleResults();
     });
-
-    // Register Map Changed Event
-    map.on("moveend", 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');
-        $.getScript(url);
-        }
-    }, map);
     map.on('singleclick', function(evt) {
         var coordinate = evt.coordinate;
         lastClick = coordinate;
@@ -60,54 +21,7 @@ $(document).ready(function() {
     });
 });
 
-function initMap() {
 
-    popupOverlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
-        element: $("#popup"),
-        autoPan: true,
-        autoPanAnimation: {
-            duration: 250
-        }
-    }));
-    map = new ol.Map({
-        layers: [
-            new ol.layer.Tile({
-                preload: Infinity,
-                source: new ol.source.OSM({
-                    attributions: [
-                        new ol.Attribution({
-                            html: 'All search results &copy; ' + '<a href="http://nominatim.openstreetmap.org/">Nominatim</a>'
-                        }),
-                        ol.source.OSM.ATTRIBUTION,
-                    ],
-                    url: 'https://maps.metager.de/osm_tiles/{z}/{x}/{y}.png'
-                })
-            })
-        ],
-        target: 'map',
-        controls: ol.control.defaults({
-            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-                collapsible: true
-            })
-        }),
-        overlays: [popupOverlay],
-        view: new ol.View({
-            maxZoom: 18,
-            minZoom: 6,
-            center: ol.proj.transform(
-                [10.06897, 51.37247], 'EPSG:4326', 'EPSG:3857'),
-            zoom: 6
-        }),
-        loadTilesWhileAnimating: true,
-        loadTilesWhileInteracting: true
-    });
-    map.addControl(new ol.control.ZoomSlider());
-    $("#popup-closer").click(function(){
-        popupOverlay.setPosition(undefined);
-        $(this).blur();
-        return false;
-    });
-}
 var options = {
     enableHighAccuracy: true,
     timeout: 5000,

resources/assets/js/mapSearch.js

+$(document).ready(function() {
+	receiveLocation();
+	$("#clearInput").click(function() {
+        $("#search input[name=q]").val('');
+        $("#search input[name=q]").focus();
+        $("#results > .result").remove();
+        $("#results").addClass("hidden");
+        $.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();
+    });
+    $("#doSearch").click(function() {
+        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]);
+        $.getScript(url).fail(function(jqxhr, settings, exception){
+            console.log(exception);
+        });
+        $("#search input[name=q]").blur();
+    });
+    // Register Map Changed Event
+    map.on("moveend", 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');
+        $.getScript(url);
+        }
+    }, map);
+});
+
+function initMap() {
+
+    popupOverlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
+        element: $("#popup"),
+        autoPan: true,
+        autoPanAnimation: {
+            duration: 250
+        }
+    }));
+    map = new ol.Map({
+        layers: [
+            new ol.layer.Tile({
+                preload: Infinity,
+                source: new ol.source.OSM({
+                    attributions: [
+                        new ol.Attribution({
+                            html: 'All search results &copy; ' + '<a href="http://nominatim.openstreetmap.org/">Nominatim</a>'
+                        }),
+                        ol.source.OSM.ATTRIBUTION,
+                    ],
+                    url: 'https://maps.metager.de/osm_tiles/{z}/{x}/{y}.png'
+                })
+            })
+        ],
+        target: 'map',
+        controls: ol.control.defaults({
+            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+                collapsible: true
+            })
+        }),
+        overlays: [popupOverlay],
+        view: new ol.View({
+            maxZoom: 18,
+            minZoom: 6,
+            center: ol.proj.transform(
+                [10.06897, 51.37247], 'EPSG:4326', 'EPSG:3857'),
+            zoom: 6
+        }),
+        loadTilesWhileAnimating: true,
+        loadTilesWhileInteracting: true
+    });
+    map.addControl(new ol.control.ZoomSlider());
+    $("#popup-closer").click(function(){
+        popupOverlay.setPosition(undefined);
+        $(this).blur();
+        return false;
+    });
+}
\ No newline at end of file