diff --git a/examples/side-by-side.css b/examples/side-by-side.css new file mode 100644 index 0000000000..aabe991891 --- /dev/null +++ b/examples/side-by-side.css @@ -0,0 +1,7 @@ +@media (min-width: 800px) { + .half { + padding: 0 10px; + width: 50%; + float: left; + } +} diff --git a/examples/side-by-side.html b/examples/side-by-side.html new file mode 100644 index 0000000000..73b6ce7fa4 --- /dev/null +++ b/examples/side-by-side.html @@ -0,0 +1,19 @@ +--- +layout: example.html +title: Shared Views +shortdesc: Two maps share view properties +docs: > + Two maps (one Road, one Aerial) share the same center, resolution and rotation. +tags: "side-by-side, bing, bing-maps" +cloak: + - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 + value: Your Bing Maps Key from http://www.bingmapsportal.com/ here +--- +
+

Road

+
+
+
+

Aerial

+
+
diff --git a/examples/side-by-side.js b/examples/side-by-side.js new file mode 100644 index 0000000000..31596fee95 --- /dev/null +++ b/examples/side-by-side.js @@ -0,0 +1,37 @@ +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import BingMaps from '../src/ol/source/BingMaps.js'; + +const roadLayer = new TileLayer({ + source: new BingMaps({ + key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5', + imagerySet: 'RoadOnDemand', + maxZoom: 19 + }) +}); + +const aerialLayer = new TileLayer({ + source: new BingMaps({ + key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5', + imagerySet: 'Aerial', + maxZoom: 19 + }) +}); + +const view = new View({ + center: [-6655.5402445057125, 6709968.258934638], + zoom: 13 +}); + +const map1 = new Map({ + target: 'roadMap', + layers: [roadLayer], + view: view +}); + +const map2 = new Map({ + target: 'aerialMap', + layers: [aerialLayer], + view: view +});