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

two maps in the skeleton example

Browse Source
This commit is contained in:
Éric Lemoine
2012-07-18 16:32:16 +02:00
parent aab2bc093a
commit b53e5a3fda
2 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
skeleton.html
View File

@@ -1,17 +1,26 @@
<!doctype html>
<html>
<head>
<style type="text/css">
html, body, #map {
margin: 0;
overflow: hidden;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://localhost:9810/compile?id=ol-skeleton" type="text/javascript"></script>
</body>
<head>
<style type="text/css">
.map {
width: 400px;
height: 400px;
border: thin solid;
position: absolute;
}
#map1 {
left: 5px;
top: 5px;
}
#map2 {
left: 450px;
top: 5px;
}
</style>
</head>
<body>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<script src="http://localhost:9810/compile?id=ol-skeleton" type="text/javascript"></script>
</body>
</html>

27
skeleton.js
View File

@@ -4,18 +4,35 @@ goog.require('ol.RendererHint');
goog.require('ol.createMap');
goog.require('ol.tilelayer.createOpenStreetMap');
var twoMaps = true;
var target = /** @type {!HTMLDivElement} */ document.getElementById('map');
var map = ol.createMap(target, undefined, ol.RendererHint.DOM);
var target;
var map, map1, map2;
var layer;
var layer = ol.tilelayer.createOpenStreetMap({
target = /** @type {!HTMLDivElement} */ document.getElementById('map1');
map = map1 = ol.createMap(target, undefined, ol.RendererHint.DOM);
layer = ol.tilelayer.createOpenStreetMap({
'opacity': 0.5
});
map.getLayers().push(layer);
var resolutions = layer.getStore().getResolutions();
map.setCenter(new goog.math.Coordinate(0, 0));
map.setResolution(resolutions[0]);
map1.setCenter(new goog.math.Coordinate(0, 0));
map1.setResolution(resolutions[0]);
if (twoMaps) {
target = /** @type {!HTMLDivElement} */ document.getElementById('map2');
map2 = ol.createMap(target, undefined, ol.RendererHint.DOM);
layer = ol.tilelayer.createOpenStreetMap({
'opacity': 0.5
});
map2.getLayers().push(layer);
map2.bindTo('center', map1);
map2.bindTo('resolution', map1);
}
goog.exportSymbol('layer', layer);
goog.exportSymbol('map', map);
goog.exportSymbol('map1', map1);
goog.exportSymbol('map2', map2);