From 7a74ba606a0250725e92339a9d74eb8da3b0b4fa Mon Sep 17 00:00:00 2001
From: andrewcoder002 <92372311+andrewcoder002@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:05:46 +0200
Subject: [PATCH] Test case of new functionality

Test case of new functionality that enables to switch map to another browser window and back
---
 examples/extmap-main.html | 45 +++++++++++++++++++++++++++++++++++++++
 examples/extmap-map.html  | 22 +++++++++++++++++++
 examples/extmap.js        | 13 +++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 examples/extmap-main.html
 create mode 100644 examples/extmap-map.html
 create mode 100644 examples/extmap.js
diff --git a/examples/extmap-main.html b/examples/extmap-main.html
new file mode 100644
index 0000000000..16a6a4693b
--- /dev/null
+++ b/examples/extmap-main.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../build/ol.css" type="text/css">
+    <style>
+      .map {
+        height: 400px;
+        width: 600px;
+      }
+    </style>
+    <script src="../build/ol.js"></script>
+    <title>OpenLayers example</title>
+  </head>
+  <body>
+    <h2>External map window test case</h2>
+    <div id="map" class="map"></div>
+    <script src="extmap.js"></script>    
+    <br/>
+    <input id="extMap" type="button" value="Open exteral map"></input>
+    <script>
+     
+        const extMap = document.getElementById('extMap')
+        extMap.onclick = function(e){
+          extMap.disabled = true;
+          mapWindow = window.open('extmap-map.html','MapWindow','toolbar=0,location=0,menubar=0,width=800,height=600');
+          let smallMapDiv = document.getElementById("map");
+            smallMapDiv.style.height='0px';
+          mapWindow.onload = function() {
+            mapWindow.map = map;
+            
+            let extMapDiv = mapWindow.document.getElementById("map");
+            map.setTarget(extMapDiv);
+            
+            
+            mapWindow.onbeforeunload = function () {
+              smallMapDiv.style.height='400px';
+              map.setTarget(smallMapDiv);
+              extMap.disabled = false;
+             };
+          }
+        }
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/extmap-map.html b/examples/extmap-map.html
new file mode 100644
index 0000000000..0b02d97932
--- /dev/null
+++ b/examples/extmap-map.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../build/ol.css" type="text/css">
+<script src="../build/ol.js"></script>
+<style>
+     
+      .map {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+      
+    
+</style>
+</head>
+<body>
+<div id="map" class="map"></div>
+    
+
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/extmap.js b/examples/extmap.js
new file mode 100644
index 0000000000..fc770a9c15
--- /dev/null
+++ b/examples/extmap.js
@@ -0,0 +1,13 @@
+      var map = new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.OSM()
+          })
+        ],
+        view: new ol.View({
+          center: ol.proj.fromLonLat([37.41, 8.82]),
+          zoom: 4
+        })
+      });
+    
\ No newline at end of file
