firsttrip.html - sheep in Follow the Sheep

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://schema.org/article">
<head>
<title>Sheep Narratives</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
       <!--
      @import "http://www.rudzick.de/css/or.css";
      @import "http://www.rudzick.de/css/or-fonts.css";
      -->
            <!--
      @import "http://www.rudzick.de/css/gm.css";
      -->
  
</style>
<!--<script src="http://www.rudzick.de/OpenLayers-2.11/OpenLayers.js" type="text/javascript"></script>-->
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<!-- Google Maps API -->
<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAoUtqUOAJeUiuzNdwCtbALhQlRCzQCC2MTCX3YYV_EP0_DDMWgRTodwHqRMJDo8Nyi18PmqB7enB4KQ" type="text/javascript"></script>-->
<!-- Yahoo Maps API -->
<!--<script src="http://api.maps.yahoo.com/ajaxymap?v=3.8&amp;appid=GFY7TNTV34EuESDqQDRERNHgy4ms4i2MIS6Kgm6Fh1zqS3LPpjqRSSBxrzPV5A" type="text/javascript"></script>-->
<!-- Bing Maps -->
<!--<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&amp;mkt=en-us" type="text/javascript"></script>-->
<!-- OSM OpenLayers Bibliotheken einbinden -->
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
</head>
<body>
 <div id="main"> 
<div id="karte" style="width:100%; height:600px; border:3px solid #546e76;">
</div>
<!--<a href="external-content.htm" rel="#overlay" style="text-decoration:none"></a>
<div class="apple_overlay" id="overlay">
  <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>
</div>-->
<ul id="controlToggle">
           <li>
                <input type="radio" name="type" value="none" id="noneToggle"
                       onclick="toggleControl(this);" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
                <label for="pointToggle">draw point</label>
            </li>
            <li>
                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
                <label for="lineToggle">draw line</label>
            </li>
            <li>
                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                <label for="polygonToggle">draw polygon</label>
            </li>
            <li>
                <input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" />
                <label for="boxToggle">draw box</label>
            </li>
            <li>
                <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" />
                <label for="allowPanCheckbox">allow pan while drawing</label>
            </li>
            <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select line on click</label>
        </li>
            <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select box on click</label>
        </li>
        </ul>
<script defer="defer" type="text/javascript">
   var karte,drawControls, selectControl, selectedFeature;

   var options = {
       projection: new OpenLayers.Projection("EPSG:900913"),
       displayProjection: new OpenLayers.Projection("EPSG:4326"),
       units: "m",
       maxResolution: 156543.0339,
       maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
       };
     karte = new OpenLayers.Map( 'karte', options);

     // Vermeiden von rosa Tiles
     OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
     OpenLayers.Util.onImageLoadErrorColor = "transparent"; 


  var osm_transportmap = new OpenLayers.Layer.OSM.TransportMap(
						       "OSM (Transport Map)",
						       {
						       identifier: "osm_transportmap",
							   numZoomLevels: 22
							   }
						       );

     var osm_mapnik = new OpenLayers.Layer.OSM.Mapnik(
              "OpenStreetMap (Mapnik)",
               {
                identifier: "osm_mapnik",
                numZoomLevels: 22
               }
            );

      var osm_cyclemap = new OpenLayers.Layer.OSM.CycleMap(
              "OpenStreetMap (Cyclemap)",
               {
                identifier: "osm_cyclemap",
                numZoomLevels: 22
               }
            );

     /* var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {sphericalMercator: true,
                 identifier: "gmap",
                 numZoomLevels: 22}
            );
        var gphys = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP,
                 sphericalMercator: true,
                 identifier: "gphys",
                 numZoomLevels: 22}
            );
        var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP,
                 sphericalMercator: true,
                 identifier: "ghyb",
                 numZoomLevels: 22}
            );
        var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP,
                 sphericalMercator: true,
                 identifier: "gsat",
                 numZoomLevels: 22}
            );
        var y_road = new OpenLayers.Layer.Yahoo(
                "Yahoo Street",
               { type: YAHOO_MAP_REG,
                sphericalMercator: true,
                identifier: "y_road",
                 numZoomLevels: 22}
             );
        var y_hybrid = new OpenLayers.Layer.Yahoo(
               "Yahoo Hybrid",
              { type: YAHOO_MAP_HYB,
                sphericalMercator: true,
                identifier: "y_hybrid",
                 numZoomLevels: 22}
             );
         var y_sat = new OpenLayers.Layer.Yahoo(
               "Yahoo Satellite",
              { type: YAHOO_MAP_SAT,
                sphericalMercator: true,
                identifier: "y_sat",
                 numZoomLevels: 22
               }
              );

          var b_road = new OpenLayers.Layer.VirtualEarth(
              "Bing Streets", 
             { type: VEMapStyle.Road,
               sphericalMercator: true,
               identifier: "b_road",
                 numZoomLevels: 22 }
               );
    
           var b_hybrid = new OpenLayers.Layer.VirtualEarth(
                "Bing Hybrid", 
               { type: VEMapStyle.Hybrid,
                 sphericalMercator: true,
                  identifier: "b_hybrid",
                 numZoomLevels: 22 }
               );

           var b_sat = new OpenLayers.Layer.VirtualEarth(
               "Bing Satellite",
              { type: VEMapStyle.Aerial,
                sphericalMercator: true,
                identifier: "b_sat",
                 numZoomLevels: 22}
               );*/
 
 var osm_transportmap_ol = new OpenLayers.Layer.OSM.TransportMap(
						       "OSM (Transport Map)",
						       {
						       identifier: "osm_transportmap_ol",
							   numZoomLevels: 22,
							         opacity: 0.5,
							      visibility: false,
							      isBaseLayer: false
							   }
						       );

         var osm_mapnik_ol = new OpenLayers.Layer.OSM.Mapnik(
              "OpenStreetMap (Mapnik)",
               {
                identifier: "osm_mapnik_ol",
                numZoomLevels: 22,
                opacity: 0.5,
                visibility: false,
                isBaseLayer: false
               }
            );

      var osm_cyclemap_ol = new OpenLayers.Layer.OSM.CycleMap(
              "OpenStreetMap (Cyclemap)",
               {
                identifier: "osm_cyclemap_ol",
                numZoomLevels: 22,
                opacity: 0.5,
                visibility: false,
                isBaseLayer: false
               }
            );

//          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]);
          //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]);
          karte.addLayers([osm_mapnik, osm_cyclemap, osm_transportmap,osm_mapnik_ol, osm_cyclemap_ol, osm_transportmap_ol]);

      karte.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));
      karte.addControl(new OpenLayers.Control.Navigation(
            {dragPanOptions: {interval: 100, enableKinetic: true}}
        ));

      var styleTrack = {strokeColor: "green", strokeWidth: 2, fillColor: "#FF0000", pointRadius: 5, opacity: 0.5};
      var lTrackGpx = new OpenLayers.Layer.Vector("gpx track Chachadi",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "http://mitan.in/followsheep/socionity/bgmnov2012/tracks/2012-11-05_08-25-22chachidi_day1/2012-11-05_08-25-22.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleTrack,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
         var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
         var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
         var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
         var boxLayer = new OpenLayers.Layer.Vector("Box layer");
	karte.addLayers([lTrackGpx,pointLayer,lineLayer,boxLayer]);
        // var vectors = new OpenLayers.Layer.Vector("Vector Layer");
	lTrackGpx.setVisibility(true);
        boxLayer.setVisibility(false);
val = new OpenLayers.Bounds.fromArray([ 8288807.4628527, 1794671.6913983, 8330389.206234, 1782136.0187613 ]).toGeometry();
boxLayer.addFeatures(new OpenLayers.Feature.Vector(val));

     selectControl = new OpenLayers.Control.SelectFeature(pointLayer,
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
     /*selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});*/

     karte.addControl(new OpenLayers.Control.MousePosition());
           // karte.addControl(new OpenLayers.Control.EditingToolbar(vectors));

   /* var options = {
                hover: true,
                //onSelect: serialize
            };
            var select = new OpenLayers.Control.SelectFeature(vectors, options);
            karte.addControl(select);
            select.activate();*/

    drawControls = {
                    point: new OpenLayers.Control.DrawFeature(pointLayer,
                        OpenLayers.Handler.Point),
                    line: new OpenLayers.Control.DrawFeature(lineLayer,
                        OpenLayers.Handler.Path),
                    polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                        OpenLayers.Handler.Polygon),
                    box: new OpenLayers.Control.DrawFeature(boxLayer,
                        OpenLayers.Handler.RegularPolygon, {
                            handlerOptions: {
                                sides: 4,
                                irregular: true
                            }
                        }
                    ),
                   select: selectControl
                };

                for(var key in drawControls) {
                    karte.addControl(drawControls[key]);
                }
     karte.setCenter((new OpenLayers.LonLat(74.8410559, 15.9069373)).transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913')), 11);



                document.getElementById('noneToggle').checked = true;

            function toggleControl(element) {
                for(key in drawControls) {
                    var control = drawControls[key];
                    if(element.value == key && element.checked) {
                        control.activate();
                    } else {
                        control.deactivate();
                    }
                }
            }

            function allowPan(element) {
                var stop = !element.checked;
                for(var key in drawControls) {
                    drawControls[key].handler.stopDown = stop;
                    drawControls[key].handler.stopUp = stop;
                }
            }
         
     /* to display popups on lineLayer*/
           function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            //selectedFeature = feature;
        //feature = boxLayer;
        boxLayer.setVisibility(true);
            
           popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "Collective information of sheep and shepherd routes. Follow the sheep here <a href='http://mitan.in/followsheep'>followsheep</a>",
                                     null, true, onPopupClose);

            feature.popup = popup;
            karte.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            karte.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }    

</script>
</div>


</body>
</html>

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>

Gitorious