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

Make external map example work

Browse Source
This commit is contained in:
Maximilian Krög
2021-10-14 21:56:42 +02:00
parent 7a74ba606a
commit 86801d1151
6 changed files with 76 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/external-map.html
+11
View File
@@ -0,0 +1,11 @@
---
layout: example.html
title: External map
shortdesc: Show a map in a separate window.
docs: >
tags: "external, window"
resources:
---
<div id="map" class="map"></div>
<input id="extMap" type="button" value="Open external map"></input>
examples/external-map.js
+47
View File
@@ -0,0 +1,47 @@
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import {fromLonLat} from '../src/ol/proj.js';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: fromLonLat([37.41, 8.82]),
zoom: 4,
}),
});
let mapWindow;
const button = document.getElementById('extMap');
button.addEventListener('click', function () {
const localMapTarget = document.getElementById('map');
localMapTarget.style.height = '0px';
button.disabled = true;
mapWindow = window.open(
'resources/external-map-map.html',
'MapWindow',
'toolbar=0,location=0,menubar=0,width=800,height=600'
);
mapWindow.addEventListener('load', function () {
const extMapDiv = mapWindow.document.getElementById('map');
map.setTarget(extMapDiv);
});
mapWindow.addEventListener('beforeunload', function () {
localMapTarget.style.height = '';
map.setTarget(localMapTarget);
button.disabled = false;
mapWindow = undefined;
});
});
window.addEventListener('beforeunload', function () {
if (mapWindow) {
mapWindow.close();
}
});
examples/extmap-main.html
-45
View File
@@ -1,45 +0,0 @@
<!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
@@ -1,22 +0,0 @@
<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
@@ -1,13 +0,0 @@
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
})
});
examples/resources/external-map-map.html
+18
View File
@@ -0,0 +1,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<style>
body {
margin: 0;
}
.map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
</body>
</html>