| ed5f849 by pradeep at 2013-04-29 |
1 |
<!DOCTYPE HTML> |
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://schema.org/article"> |
|
3 |
<head> |
|
4 |
<title>Sheep Narratives</title> |
|
5 |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> |
|
6 |
<style type="text/css"> |
|
7 |
<!-- |
|
8 |
@import "http://www.rudzick.de/css/or.css"; |
|
9 |
@import "http://www.rudzick.de/css/or-fonts.css"; |
|
10 |
--> |
|
11 |
<!-- |
|
12 |
@import "http://www.rudzick.de/css/gm.css"; |
|
13 |
--> |
|
14 |
|
|
15 |
</style> |
|
16 |
<!--<script src="http://www.rudzick.de/OpenLayers-2.11/OpenLayers.js" type="text/javascript"></script>--> |
|
17 |
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script> |
|
18 |
<!-- Google Maps API --> |
|
19 |
<!--<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAoUtqUOAJeUiuzNdwCtbALhQlRCzQCC2MTCX3YYV_EP0_DDMWgRTodwHqRMJDo8Nyi18PmqB7enB4KQ" type="text/javascript"></script>--> |
|
20 |
<!-- Yahoo Maps API --> |
|
21 |
<!--<script src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=GFY7TNTV34EuESDqQDRERNHgy4ms4i2MIS6Kgm6Fh1zqS3LPpjqRSSBxrzPV5A" type="text/javascript"></script>--> |
|
22 |
<!-- Bing Maps --> |
|
23 |
<!--<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us" type="text/javascript"></script>--> |
|
24 |
<!-- OSM OpenLayers Bibliotheken einbinden --> |
|
25 |
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> |
|
26 |
</head> |
|
27 |
<body> |
|
28 |
<div id="main"> |
|
29 |
<div id="karte" style="width:100%; height:600px; border:3px solid #546e76;"> |
|
30 |
</div> |
|
31 |
<!--<a href="external-content.htm" rel="#overlay" style="text-decoration:none"></a> |
|
32 |
<div class="apple_overlay" id="overlay"> |
|
33 |
<div id="contentWrap" style="background:rgba(0, 0, 0, 0.5);position:absolute;top:0;left:0width:300px;height:600px;display:none;z-index:999"></div> |
|
34 |
</div>--> |
|
35 |
<ul id="controlToggle"> |
|
36 |
<li> |
|
37 |
<input type="radio" name="type" value="none" id="noneToggle" |
|
38 |
onclick="toggleControl(this);" checked="checked" /> |
|
39 |
<label for="noneToggle">navigate</label> |
|
40 |
</li> |
|
41 |
<li> |
|
42 |
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> |
|
43 |
<label for="pointToggle">draw point</label> |
|
44 |
</li> |
|
45 |
<li> |
|
46 |
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> |
|
47 |
<label for="lineToggle">draw line</label> |
|
48 |
</li> |
|
49 |
<li> |
|
50 |
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> |
|
51 |
<label for="polygonToggle">draw polygon</label> |
|
52 |
</li> |
|
53 |
<li> |
|
54 |
<input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" /> |
|
55 |
<label for="boxToggle">draw box</label> |
|
56 |
</li> |
|
57 |
<li> |
|
58 |
<input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" /> |
|
59 |
<label for="allowPanCheckbox">allow pan while drawing</label> |
|
60 |
</li> |
|
61 |
<li> |
|
62 |
<input type="radio" name="type" value="select" id="selectToggle" |
|
63 |
onclick="toggleControl(this);" /> |
|
64 |
<label for="selectToggle">select line on click</label> |
|
65 |
</li> |
|
66 |
<li> |
|
67 |
<input type="radio" name="type" value="select" id="selectToggle" |
|
68 |
onclick="toggleControl(this);" /> |
|
69 |
<label for="selectToggle">select box on click</label> |
|
70 |
</li> |
|
71 |
</ul> |
|
72 |
<script defer="defer" type="text/javascript"> |
|
73 |
var karte,drawControls, selectControl, selectedFeature; |
|
74 |
|
|
75 |
var options = { |
|
76 |
projection: new OpenLayers.Projection("EPSG:900913"), |
|
77 |
displayProjection: new OpenLayers.Projection("EPSG:4326"), |
|
78 |
units: "m", |
|
79 |
maxResolution: 156543.0339, |
|
80 |
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) |
|
81 |
}; |
|
82 |
karte = new OpenLayers.Map( 'karte', options); |
|
83 |
|
|
84 |
// Vermeiden von rosa Tiles |
|
85 |
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; |
|
86 |
OpenLayers.Util.onImageLoadErrorColor = "transparent"; |
|
87 |
|
|
88 |
|
|
89 |
var osm_transportmap = new OpenLayers.Layer.OSM.TransportMap( |
|
90 |
"OSM (Transport Map)", |
|
91 |
{ |
|
92 |
identifier: "osm_transportmap", |
|
93 |
numZoomLevels: 22 |
|
94 |
} |
|
95 |
); |
|
96 |
|
|
97 |
var osm_mapnik = new OpenLayers.Layer.OSM.Mapnik( |
|
98 |
"OpenStreetMap (Mapnik)", |
|
99 |
{ |
|
100 |
identifier: "osm_mapnik", |
|
101 |
numZoomLevels: 22 |
|
102 |
} |
|
103 |
); |
|
104 |
|
|
105 |
var osm_cyclemap = new OpenLayers.Layer.OSM.CycleMap( |
|
106 |
"OpenStreetMap (Cyclemap)", |
|
107 |
{ |
|
108 |
identifier: "osm_cyclemap", |
|
109 |
numZoomLevels: 22 |
|
110 |
} |
|
111 |
); |
|
112 |
|
|
113 |
/* var gmap = new OpenLayers.Layer.Google( |
|
114 |
"Google Streets", // the default |
|
115 |
{sphericalMercator: true, |
|
116 |
identifier: "gmap", |
|
117 |
numZoomLevels: 22} |
|
118 |
); |
|
119 |
var gphys = new OpenLayers.Layer.Google( |
|
120 |
"Google Physical", |
|
121 |
{type: G_PHYSICAL_MAP, |
|
122 |
sphericalMercator: true, |
|
123 |
identifier: "gphys", |
|
124 |
numZoomLevels: 22} |
|
125 |
); |
|
126 |
var ghyb = new OpenLayers.Layer.Google( |
|
127 |
"Google Hybrid", |
|
128 |
{type: G_HYBRID_MAP, |
|
129 |
sphericalMercator: true, |
|
130 |
identifier: "ghyb", |
|
131 |
numZoomLevels: 22} |
|
132 |
); |
|
133 |
var gsat = new OpenLayers.Layer.Google( |
|
134 |
"Google Satellite", |
|
135 |
{type: G_SATELLITE_MAP, |
|
136 |
sphericalMercator: true, |
|
137 |
identifier: "gsat", |
|
138 |
numZoomLevels: 22} |
|
139 |
); |
|
140 |
var y_road = new OpenLayers.Layer.Yahoo( |
|
141 |
"Yahoo Street", |
|
142 |
{ type: YAHOO_MAP_REG, |
|
143 |
sphericalMercator: true, |
|
144 |
identifier: "y_road", |
|
145 |
numZoomLevels: 22} |
|
146 |
); |
|
147 |
var y_hybrid = new OpenLayers.Layer.Yahoo( |
|
148 |
"Yahoo Hybrid", |
|
149 |
{ type: YAHOO_MAP_HYB, |
|
150 |
sphericalMercator: true, |
|
151 |
identifier: "y_hybrid", |
|
152 |
numZoomLevels: 22} |
|
153 |
); |
|
154 |
var y_sat = new OpenLayers.Layer.Yahoo( |
|
155 |
"Yahoo Satellite", |
|
156 |
{ type: YAHOO_MAP_SAT, |
|
157 |
sphericalMercator: true, |
|
158 |
identifier: "y_sat", |
|
159 |
numZoomLevels: 22 |
|
160 |
} |
|
161 |
); |
|
162 |
|
|
163 |
var b_road = new OpenLayers.Layer.VirtualEarth( |
|
164 |
"Bing Streets", |
|
165 |
{ type: VEMapStyle.Road, |
|
166 |
sphericalMercator: true, |
|
167 |
identifier: "b_road", |
|
168 |
numZoomLevels: 22 } |
|
169 |
); |
|
170 |
|
|
171 |
var b_hybrid = new OpenLayers.Layer.VirtualEarth( |
|
172 |
"Bing Hybrid", |
|
173 |
{ type: VEMapStyle.Hybrid, |
|
174 |
sphericalMercator: true, |
|
175 |
identifier: "b_hybrid", |
|
176 |
numZoomLevels: 22 } |
|
177 |
); |
|
178 |
|
|
179 |
var b_sat = new OpenLayers.Layer.VirtualEarth( |
|
180 |
"Bing Satellite", |
|
181 |
{ type: VEMapStyle.Aerial, |
|
182 |
sphericalMercator: true, |
|
183 |
identifier: "b_sat", |
|
184 |
numZoomLevels: 22} |
|
185 |
);*/ |
|
186 |
|
|
187 |
var osm_transportmap_ol = new OpenLayers.Layer.OSM.TransportMap( |
|
188 |
"OSM (Transport Map)", |
|
189 |
{ |
|
190 |
identifier: "osm_transportmap_ol", |
|
191 |
numZoomLevels: 22, |
|
192 |
opacity: 0.5, |
|
193 |
visibility: false, |
|
194 |
isBaseLayer: false |
|
195 |
} |
|
196 |
); |
|
197 |
|
|
198 |
var osm_mapnik_ol = new OpenLayers.Layer.OSM.Mapnik( |
|
199 |
"OpenStreetMap (Mapnik)", |
|
200 |
{ |
|
201 |
identifier: "osm_mapnik_ol", |
|
202 |
numZoomLevels: 22, |
|
203 |
opacity: 0.5, |
|
204 |
visibility: false, |
|
205 |
isBaseLayer: false |
|
206 |
} |
|
207 |
); |
|
208 |
|
|
209 |
var osm_cyclemap_ol = new OpenLayers.Layer.OSM.CycleMap( |
|
210 |
"OpenStreetMap (Cyclemap)", |
|
211 |
{ |
|
212 |
identifier: "osm_cyclemap_ol", |
|
213 |
numZoomLevels: 22, |
|
214 |
opacity: 0.5, |
|
215 |
visibility: false, |
|
216 |
isBaseLayer: false |
|
217 |
} |
|
218 |
); |
|
219 |
|
|
220 |
// karte.addLayers([osm_osmarender, osm_mapnik, osm_cyclemap, gmap, gphys, ghyb, gsat, y_road, y_hybrid, y_sat, b_road, b_hybrid, b_sat, osm_osmarender_ol, osm_mapnik_ol, osm_cyclemap_ol]); |
|
221 |
//karte.addLayers([osm_mapnik, osm_cyclemap, osm_transportmap, gmap, gphys, ghyb, gsat, y_road, y_hybrid, y_sat, b_road, b_hybrid, b_sat, osm_mapnik_ol, osm_cyclemap_ol, osm_transportmap_ol]); |
|
222 |
karte.addLayers([osm_mapnik, osm_cyclemap, osm_transportmap,osm_mapnik_ol, osm_cyclemap_ol, osm_transportmap_ol]); |
|
223 |
|
|
224 |
karte.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true})); |
|
225 |
karte.addControl(new OpenLayers.Control.Navigation( |
|
226 |
{dragPanOptions: {interval: 100, enableKinetic: true}} |
|
227 |
)); |
|
228 |
|
|
229 |
var styleTrack = {strokeColor: "green", strokeWidth: 2, fillColor: "#FF0000", pointRadius: 5, opacity: 0.5}; |
|
230 |
var lTrackGpx = new OpenLayers.Layer.Vector("gpx track Chachadi",{ |
|
231 |
protocol: new OpenLayers.Protocol.HTTP |
|
232 |
({ |
|
233 |
url: "http://mitan.in/followsheep/socionity/bgmnov2012/tracks/2012-11-05_08-25-22chachidi_day1/2012-11-05_08-25-22.gpx", |
|
234 |
format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true}) |
|
235 |
}), |
|
236 |
strategies: [new OpenLayers.Strategy.Fixed()], |
|
237 |
style: styleTrack, |
|
238 |
projection: new OpenLayers.Projection("EPSG:4326") |
|
239 |
}); |
|
240 |
var pointLayer = new OpenLayers.Layer.Vector("Point Layer"); |
|
241 |
var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); |
|
242 |
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); |
|
243 |
var boxLayer = new OpenLayers.Layer.Vector("Box layer"); |
|
244 |
karte.addLayers([lTrackGpx,pointLayer,lineLayer,boxLayer]); |
|
245 |
// var vectors = new OpenLayers.Layer.Vector("Vector Layer"); |
|
246 |
lTrackGpx.setVisibility(true); |
|
247 |
boxLayer.setVisibility(false); |
|
248 |
val = new OpenLayers.Bounds.fromArray([ 8288807.4628527, 1794671.6913983, 8330389.206234, 1782136.0187613 ]).toGeometry(); |
|
249 |
boxLayer.addFeatures(new OpenLayers.Feature.Vector(val)); |
|
250 |
|
|
251 |
selectControl = new OpenLayers.Control.SelectFeature(pointLayer, |
|
252 |
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); |
|
253 |
/*selectControl = new OpenLayers.Control.SelectFeature(lineLayer, |
|
254 |
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});*/ |
|
255 |
|
|
256 |
karte.addControl(new OpenLayers.Control.MousePosition()); |
|
257 |
// karte.addControl(new OpenLayers.Control.EditingToolbar(vectors)); |
|
258 |
|
|
259 |
/* var options = { |
|
260 |
hover: true, |
|
261 |
//onSelect: serialize |
|
262 |
}; |
|
263 |
var select = new OpenLayers.Control.SelectFeature(vectors, options); |
|
264 |
karte.addControl(select); |
|
265 |
select.activate();*/ |
|
266 |
|
|
267 |
drawControls = { |
|
268 |
point: new OpenLayers.Control.DrawFeature(pointLayer, |
|
269 |
OpenLayers.Handler.Point), |
|
270 |
line: new OpenLayers.Control.DrawFeature(lineLayer, |
|
271 |
OpenLayers.Handler.Path), |
|
272 |
polygon: new OpenLayers.Control.DrawFeature(polygonLayer, |
|
273 |
OpenLayers.Handler.Polygon), |
|
274 |
box: new OpenLayers.Control.DrawFeature(boxLayer, |
|
275 |
OpenLayers.Handler.RegularPolygon, { |
|
276 |
handlerOptions: { |
|
277 |
sides: 4, |
|
278 |
irregular: true |
|
279 |
} |
|
280 |
} |
|
281 |
), |
|
282 |
select: selectControl |
|
283 |
}; |
|
284 |
|
|
285 |
for(var key in drawControls) { |
|
286 |
karte.addControl(drawControls[key]); |
|
287 |
} |
|
288 |
karte.setCenter((new OpenLayers.LonLat(74.8410559, 15.9069373)).transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913')), 11); |
|
289 |
|
|
290 |
|
|
291 |
|
|
292 |
document.getElementById('noneToggle').checked = true; |
|
293 |
|
|
294 |
function toggleControl(element) { |
|
295 |
for(key in drawControls) { |
|
296 |
var control = drawControls[key]; |
|
297 |
if(element.value == key && element.checked) { |
|
298 |
control.activate(); |
|
299 |
} else { |
|
300 |
control.deactivate(); |
|
301 |
} |
|
302 |
} |
|
303 |
} |
|
304 |
|
|
305 |
function allowPan(element) { |
|
306 |
var stop = !element.checked; |
|
307 |
for(var key in drawControls) { |
|
308 |
drawControls[key].handler.stopDown = stop; |
|
309 |
drawControls[key].handler.stopUp = stop; |
|
310 |
} |
|
311 |
} |
|
312 |
|
|
313 |
/* to display popups on lineLayer*/ |
|
314 |
function onPopupClose(evt) { |
|
315 |
selectControl.unselect(selectedFeature); |
|
316 |
} |
|
317 |
function onFeatureSelect(feature) { |
|
318 |
//selectedFeature = feature; |
|
319 |
//feature = boxLayer; |
|
320 |
boxLayer.setVisibility(true); |
|
321 |
|
|
322 |
popup = new OpenLayers.Popup.FramedCloud("chicken", |
|
323 |
feature.geometry.getBounds().getCenterLonLat(), |
|
324 |
null, |
|
325 |
"Collective information of sheep and shepherd routes. Follow the sheep here <a href='http://mitan.in/followsheep'>followsheep</a>", |
|
326 |
null, true, onPopupClose); |
|
327 |
|
|
328 |
feature.popup = popup; |
|
329 |
karte.addPopup(popup); |
|
330 |
} |
|
331 |
function onFeatureUnselect(feature) { |
|
332 |
karte.removePopup(feature.popup); |
|
333 |
feature.popup.destroy(); |
|
334 |
feature.popup = null; |
|
335 |
} |
|
336 |
|
|
337 |
</script> |
|
338 |
</div> |
|
339 |
|
|
340 |
|
|
341 |
</body> |
|
342 |
</html> |
|
343 |
|
|
344 |
|
|
345 |
|
