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
+23 -14
View File
@@ -1,17 +1,26 @@
<!doctype html> <!doctype html>
<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;
} }
</style> #map1 {
</head> left: 5px;
<body> top: 5px;
<div id="map"></div> }
<script src="http://localhost:9810/compile?id=ol-skeleton" type="text/javascript"></script> #map2 {
</body> 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> </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);