dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
146 lines (124 loc) • 3.94 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css"
href="../../../../dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="../../../../dijit/themes/claro/claro.css" />
<script type="text/javascript">
var djConfig = {
parseOnLoad : true
};
</script>
<!-- Google API -->
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<!-- Virtual Earth -->
<script
src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3'></script>
<!-- Yahoo -->
<script
src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<!-- hosted version -->
<script type="text/javascript"
src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../../../../dojo/dojo.js"></script>
<script>
require([ "dojo/ready",
"dojo/_base/array",
"dojo/_base/connect",
"dojo/aspect",
"dijit/registry",
"dojo/_base/lang",
"dojox/geo/openlayers/widget/Map",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dojo/parser" ],
function(ready, arr, connect, aspect, WidgetRegistry, lang, Map) {
var maps = [ "osm", "google", "yahoo", "arcGis", "virtualEarth" ];
ready(function() {
arr.forEach(maps, function(map) {
var m = WidgetRegistry.byId(map);
connect.connect(m.map.olMap, "setCenter", m, update);
});
});
var _updating = false;
function update(center, zoom, dragging, forceZoomChange) {
if (dragging)
return;
if (_updating)
return;
var from = this.map.olMap.getProjectionObject();
var to = dojox.geo.openlayers.EPSG4326;
var p = {
x : center.lon,
y : center.lat
};
OpenLayers.Projection.transform(p, from, to);
_updating = true;
arr.forEach(maps, function(map) {
var m = WidgetRegistry.byId(map);
if (m != this) {
from = dojox.geo.openlayers.EPSG4326;
to = m.map.olMap.getProjectionObject();
var c = lang.mixin({}, p);
OpenLayers.Projection.transform(c, from, to);
m.map.olMap.setCenter(new OpenLayers.LonLat(c.x, c.y));
}
});
_updating = false;
}
});
</script>
<style type="text/css">
.olLayerGoogleCopyright {
visibility: hidden;
}
</style>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" design="headline"
style="height: 100%; width: 100%;">
<div data-dojo-type="dijit.layout.ContentPane" region="top"
style="height: 200px;" splitter="true">
<div data-dojo-type="dojox.geo.openlayers.widget.Map" baseLayerType="OSM"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.2 }"
id="osm"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" region="center">
<div data-dojo-type="dojox.geo.openlayers.widget.Map"
baseLayerType="Google"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.2 }"
id="google"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" region="bottom"
style="height: 200px;" splitter="true">
<div data-dojo-type="dojox.geo.openlayers.widget.Map" baseLayerType="Yahoo"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.2 }"
id="yahoo"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" region="left"
style="width: 200px;" splitter="true">
<div data-dojo-type="dojox.geo.openlayers.widget.Map"
baseLayerType="ArcGIS"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.2 }"
id="arcGis"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" region="right"
style="width: 200px;" splitter="true">
<div data-dojo-type="dojox.geo.openlayers.widget.Map"
baseLayerType="VirtualEarth"
initialLocation="{
position : [7.154126, 43.651748],
extent : 0.2 }"
id="virtualEarth"></div>
</div>
</div>
</body>
</html>