ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Test case of new functionality

Browse Source 
Test case of new functionality that enables to switch map to another browser window and back
This commit is contained in:
andrewcoder002
2021-10-14 10:05:46 +02:00
committed by Maximilian Krög
parent bc064aba36
commit 7a74ba606a
3 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/extmap-main.html
+45
View File
@@ -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>
examples/extmap-map.html
+22
View File
@@ -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>
examples/extmap.js
+13
View File
@@ -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
})
});