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
skeleton.html
+15 -6
View File
@@ -2,16 +2,25 @@
<html> <html>
<head> <head>
<style type="text/css"> <style type="text/css">
html, body, #map { .map {
margin: 0; width: 400px;
overflow: hidden; height: 400px;
padding: 0; border: thin solid;
height: 100%; position: absolute;
}
#map1 {
left: 5px;
top: 5px;
}
#map2 {
left: 450px;
top: 5px;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <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> <script src="http://localhost:9810/compile?id=ol-skeleton" type="text/javascript"></script>
</body> </body>
</html> </html>
skeleton.js
+22 -5
View File
@@ -4,18 +4,35 @@ goog.require('ol.RendererHint');
goog.require('ol.createMap'); goog.require('ol.createMap');
goog.require('ol.tilelayer.createOpenStreetMap'); goog.require('ol.tilelayer.createOpenStreetMap');
var twoMaps = true;
var target = /** @type {!HTMLDivElement} */ document.getElementById('map'); var target;
var map = ol.createMap(target, undefined, ol.RendererHint.DOM); 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 'opacity': 0.5
}); });
map.getLayers().push(layer); map.getLayers().push(layer);
var resolutions = layer.getStore().getResolutions(); var resolutions = layer.getStore().getResolutions();
map.setCenter(new goog.math.Coordinate(0, 0)); map1.setCenter(new goog.math.Coordinate(0, 0));
map.setResolution(resolutions[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('layer', layer);
goog.exportSymbol('map', map); goog.exportSymbol('map', map);
goog.exportSymbol('map1', map1);
goog.exportSymbol('map2', map2);