Skip to content

Commit 6ddf475

Browse files
ccmitchellusaccmitchellusa
committed
fixes #12588 Add demos for OpenLayers map widget (experimental in 1.7) !strict
git-svn-id: http://svn.dojotoolkit.org/src/demos/trunk@24613 560b804f-0ae3-0310-86f3-f6aa0a117693
1 parent c1d255b commit 6ddf475

File tree

5 files changed

+250
-0
lines changed

5 files changed

+250
-0
lines changed

‎mobileOpenLayers/README‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
-------------------------------------------------------------------------------
2+
Dojo Gauges - Dojo Mobile OpenLayers Map Demo
3+
-------------------------------------------------------------------------------
4+
Authors: Marc Durocher
5+
-------------------------------------------------------------------------------
6+
Demo description
7+
8+
This is the map demo, a mobile application showcasing the dojo openLayers
9+
Map component.
10+
11+
-------------------------------------------------------------------------------
12+
Dependencies:
13+
14+
Dojo
15+
Dijit
16+
Dojox
17+
18+
-------------------------------------------------------------------------------
19+
Installation instructions
20+
21+
Simply run the included demo.html
22+
23+
To build, use the supplied demo.profile.js as your profileFile
24+
25+
-------------------------------------------------------------------------------
26+
@rank:1

‎mobileOpenLayers/demo.profile.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
dependencies = {
2+
layers: [
3+
{
4+
name: "../demos/mobileOpenLayers/src.js",
5+
resourceName: "demos.mobileOpenLayers.src",
6+
dependencies: [
7+
"demos.mobileOpenLayers.src"
8+
]
9+
}
10+
],
11+
12+
prefixes: [
13+
[ "dijit", "../dijit" ],
14+
[ "dojox", "../dojox" ],
15+
[ "demos", "../demos" ]
16+
]
17+
}

‎mobileOpenLayers/demos.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html>
2+
<head profile="http://www.w3.org/2002/12/namespace">
3+
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
4+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
5+
<meta name="apple-mobile-web-app-capable" content="yes" />
6+
<title>Dojo OpenLayers Map Demo</title>
7+
<link rel="stylesheet" type="text/css" href="../../dojox/mobile/themes/iphone/iphone.css">
8+
<!-- hosted version of Open Layer libraries -->
9+
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js">
10+
</script>
11+
<script type="text/javascript">
12+
var djConfig = {
13+
parseOnLoad: true
14+
};
15+
</script>
16+
<script type="text/javascript" src="../../dojo/dojo.js"></script>
17+
<script type="text/javascript" src="src.js" charset="utf-8"></script>
18+
</head>
19+
<body>
20+
<div id="home" dojoType="dojox.mobile.View" selected="true" style="width: 100%; height: 100%;">
21+
<h1 dojoType="dojox.mobile.Heading">Dojo OpenLayers Map Demo</h1>
22+
<h2 dojoType="dojox.mobile.RoundRectCategory">Go To:</h2>
23+
<ul dojoType="dojox.mobile.RoundRectList">
24+
<li id="paris" dojoType="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
25+
Paris
26+
</li>
27+
<li id="newyork" dojoType="dojox.mobile.ListItem" moveTo="mapPage" transition="flip">
28+
New York
29+
</li>
30+
<li id="lacolle" dojoType="dojox.mobile.ListItem" moveTo="mapPage" transition="fade">
31+
La Colle sur Loup
32+
</li>
33+
</ul>
34+
</div>
35+
<div id="mapPage" dojoType="dojox.mobile.View" style="width: 100%; height: 100%;">
36+
<h1 dojoType="dojox.mobile.Heading" back="Home" moveTo="home">Map</h1>
37+
<div id="map" style="background-color: #b5d0d0; width: 100%; height: 100%;">
38+
</div>
39+
</div>
40+
</body>
41+
</html>

‎mobileOpenLayers/src.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
dojo.require("dojox.geo.openlayers.widget.Map");
2+
dojo.require("dojox.mobile.parser");
3+
dojo.require("dojox.mobile");
4+
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
5+
dojo.require("demos.mobileOpenLayers.src.NavigationControl");
6+
7+
var map;
8+
var currentLocation;
9+
10+
dojo.addOnLoad(function(){
11+
var options = {
12+
baseLayerName: "TheMap",
13+
touchHandler: true,
14+
baseLayerType: dojox.geo.openlayers.BaseLayerType.ARCGIS
15+
};
16+
17+
map = new dojox.geo.openlayers.widget.Map(options);
18+
19+
dojo.place(map.domNode, "map");
20+
map.startup();
21+
22+
var olMap = map.map.getOLMap();
23+
var ctrl = new demos.mobileOpenLayers.src.NavigationControl({
24+
dojoMap: map
25+
});
26+
olMap.addControl(ctrl);
27+
var mapPage = dijit.byId("mapPage");
28+
dojo.connect(mapPage, "onAfterTransitionIn", mapPage, afterTransition);
29+
30+
var paris = dijit.byId("paris");
31+
dojo.connect(paris, "onClick", paris, click);
32+
33+
var ny = dijit.byId("newyork");
34+
dojo.connect(ny, "onClick", ny, click);
35+
36+
var lc = dijit.byId("lacolle");
37+
dojo.connect(lc, "onClick", lc, click);
38+
39+
dojo.connect(window, "onresize", resize);
40+
});
41+
42+
function afterTransition(){
43+
fitTo();
44+
}
45+
46+
function resize(){
47+
setTimeout(updateMap, 0);
48+
}
49+
50+
var locs = {
51+
paris: [2.350833, 48.856667, 10],
52+
newyork: [-74.00597, 40.71427, 11],
53+
lacolle: [7.1072435, 43.686842, 15]
54+
};
55+
56+
function click(e){
57+
currentLocation = this.id;
58+
}
59+
60+
function fitTo(loc){
61+
if (!loc)
62+
loc = currentLocation;
63+
var l = locs[loc];
64+
var p = map.map.transformXY(l[0], l[1]);
65+
var ll = new OpenLayers.LonLat(p.x, p.y);
66+
var olm = map.map.getOLMap();
67+
var center = ll;
68+
var zoom = l[2];
69+
olm.zoom = null;
70+
olm.setCenter(center, zoom);
71+
}
72+
73+
function updateMap(){
74+
var olm = map.map.getOLMap();
75+
var center = olm.getCenter();
76+
if (center != null) {
77+
var zoom = olm.getZoom();
78+
olm.zoom = null;
79+
olm.setCenter(center, zoom);
80+
}
81+
}

‎mobileOpenLayers/src/NavigationControl.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
dojo.provide("demos.mobileOpenLayers.src.NavigationControl");
2+
3+
dojo.require("dojox.mobile.IconContainer");
4+
dojo.require("dojox.mobile.Button");
5+
6+
dojo.declare("demos.mobileOpenLayers.src.NavigationControl", [OpenLayers.Control], {
7+
constructor: function(options, element){
8+
OpenLayers.Control.prototype.initialize.apply(this, [options]);
9+
this._element = null;
10+
},
11+
12+
draw: function(){
13+
OpenLayers.Control.prototype.draw.apply(this, arguments);
14+
if (!this._element) {
15+
16+
var div = dojo.create("div", {}, this.div);
17+
var b = new dojox.mobile.Button({
18+
label: "+"
19+
}, div);
20+
b.startup();
21+
var d = b.domNode;
22+
dojo.style(d, {
23+
position: "absolute",
24+
left: 20 + "px",
25+
top: 10 + "px",
26+
fontFamily: "Helvetica",
27+
fontSize: 20 + "px",
28+
width: 40 + "px",
29+
height: 27 + "px",
30+
textAlign: "center",
31+
verticalAlign: "baseline"
32+
});
33+
dojo.connect(d, "touchstart", this, this.zoomIn);
34+
dojo.connect(d, "onclick", this, this.zoomIn);
35+
36+
div = dojo.create("div", {}, this.div);
37+
38+
b = new dojox.mobile.Button({
39+
label: "-"
40+
}, div);
41+
b.startup();
42+
d = b.domNode;
43+
dojo.style(d, {
44+
position: "absolute",
45+
left: 90 + "px",
46+
top: 10 + "px",
47+
fontFamily: "Helvetica",
48+
fontSize: 20 + "px",
49+
width: 40 + "px",
50+
height: 27 + "px",
51+
textAlign: "center",
52+
verticalAlign: "baseline"
53+
});
54+
dojo.connect(d, "touchstart", this, this.zoomOut);
55+
dojo.connect(d, "onclick", this, this.zoomOut);
56+
57+
this._element = this.div;
58+
59+
}
60+
return this.div;
61+
},
62+
63+
log: function(s){
64+
var t = document.createTextNode(s);
65+
this._element.appendChild(t);
66+
},
67+
68+
setVisible: function(v){
69+
var d = this.div;
70+
dojo.style(d, {
71+
'visibility': (v ? 'visible' : 'hidden')
72+
});
73+
},
74+
75+
zoomIn: function(e){
76+
dojo.stopEvent(e);
77+
this.map.zoomIn();
78+
},
79+
80+
zoomOut: function(e){
81+
dojo.stopEvent(e);
82+
this.map.zoomOut();
83+
}
84+
85+
})

0 commit comments

Comments
 (0)