Thank you to anyone who has already donated - your generous donations helped make three months of treatment possible.

My brother Nate continues to fight stage IV Hodgkin's lymphoma. He's just 31, with a wife and baby girl. They have no active income (since he's been unable to return to work), no insurance, and cannot afford the treatment he needs. Nate and his family need your help. Please consider a donation, every dollar helps. Thanks.

Read Nate's story Support Nate by buying an official Pastie t-shirt Hide this message

Document@2x
|
Chain_link@2x
|
Arrow_down@2x
|
Spiral_paper@2x
A A A

Javascript       Report abuse 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

<html>
<head>
<h1> Select Blackout Area </h1>
	<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="javascripts/jquery.timers-1.2.js"></script>
	

	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<script src="/javascripts/OpenStreetMap.js"></script>

	<script type="text/javascript">
	
	
	
	
	
	
	       // making this a global variable so that it is accessible for
        // debugging/inspecting in Firebug
        var map, polygonControl, layerMapnik, polygonLayer;
        var poly_mode = false;
        var points, vertices;
        var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);

        function init(){

  var navControl = new OpenLayers.Control.Navigation();
           			map = new OpenLayers.Map ("map", {
				controls:[
					navControl,
					//new OpenLayers.Control.PanZoomBar(),
					//new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				numZoomLevels: 10,
				//restrictedExtent: bounds.clone().transform(EPSG4326, EPSG900913),

restrictedExtent: bounds.clone().transform(
        new OpenLayers.Projection("EPSG:4326"),
        new OpenLayers.Projection("EPSG:900913")),

maxExtent: bounds.clone().transform(
        new OpenLayers.Projection("EPSG:4326"),
        new OpenLayers.Projection("EPSG:900913")),
				maxResolution: "auto",
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

           //actually draws the map 
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
			displayOutsideMaxExtent: false,
			wrapDateLine: true
			//numZoomLevels: 4
			});
		    polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
			map.addLayer(layerMapnik);
			map.addLayer(polygonLayer);
			<% if @blackout %>
			drawExisting();
			<% end %>
			
			map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var polyOptions = {sides: 4};
            polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
                                            OpenLayers.Handler.RegularPolygon,
                                            {handlerOptions: polyOptions});
           map.setCenter(new OpenLayers.LonLat(0, 0), 3);
           //polygonControl.activate();

            map.addControl(polygonControl);
            map.zoomToMaxExtent();

            var feature;

            polygonLayer.events.register("beforefeatureadded", feature, function(evt){
            //only one circle at a time

            points = evt.feature.geometry.getVertices();
            console.log(points);
            clearPoly();
            });//end attempt at events registration

        }//end init

        function deleteBlackout(){
        <% if @blackout %>
        console.log("Deleting current blackout from rails");
        var url = "/blackout/delete?id=" + <%=@blackout.id%> +"&program_id=" + <%=@program.id%>;
        window.location = url;        
        <% end %>
        }//end deleteBlackout

        function saveBlackout(){
        //call the rails route to save the polygon to the database
        console.log("Saving current blackout");
        console.log(points);
        console.log(pointToPixel(points[0]));
        console.log(map.getLonLatFromPixel(pointToPixel(points[0])).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()));
        console.log(map.getLonLatFromPixel(pointToPixel(points[0])));
        var url = "/blackout/create?point1x=";
        url += points[0].x+"&point1y="+points[0].y;
        url += "&point2x=" + points[1].x+"&point2y="+points[1].y;
        url += "&point3x=" + points[2].x+"&point3y="+points[2].y;
        url += "&point4x=" + points[3].x+"&point4y="+points[3].y;
        url += "&id=" + <%=@program.id%>;
      //  window.location = url;
        }// end saveBlackout

        //converts a point to a pixel for lat/long conversions
        function pointToPixel(point){
        var pixel = new OpenLayers.Pixel(point.x, point.y);
        return pixel;
        }//end point to pixel

        //draws the existing blackout
        function drawExisting(){
        <% if @blackout%>
        vertices = new Array();
        vertices[0] = new OpenLayers.Geometry.Point(<%=@blackout.point1x %>, <%=@blackout.point1y%>);
        vertices[1] = new OpenLayers.Geometry.Point(<%=@blackout.point2x %>, <%=@blackout.point2y%>);
        vertices[2] = new OpenLayers.Geometry.Point(<%=@blackout.point3x %>, <%=@blackout.point3y%>);
        vertices[3] = new OpenLayers.Geometry.Point(<%=@blackout.point4x %>, <%=@blackout.point4y%>);
        var ring = new OpenLayers.Geometry.LinearRing(vertices);
        var square = new OpenLayers.Geometry.Polygon(ring);
        var vector = new OpenLayers.Feature.Vector(square);
        var features = new Array();
        features[0] = vector;
        console.log(square);
        polygonLayer.addFeatures(features);
        console.log(polygonLayer.features[0].geometry.getVertices());
        <% end %>

        }//end drawExisting

        //for debugging
        function redrawVL(){
        polygonLayer.redraw();
        console.log("pL layer redrawn");
       // layerMapnik.redraw();

        }//end redrawVL
        function activatePolygon(){
        polygonControl.activate()
        poly_mode = true;
        }//end activate

        function deactivatePolygon(){
        poly_mode = false;
        polygonControl.deactivate()
        }//end deactivate

        function clearPoly(){
        console.log("Clearing existing polygons");
        console.log(polygonLayer.features.length);
        polygonLayer.destroyFeatures();
        polygonLayer.redraw();
        }//end clearPoly

	
	
	
	</script>
	
	</head>
	
	<body onload="init()">
	<ul id="controls"><b>Map Controls</b>
            <% if !@blackout %>
                <input type="radio" name="type"
                       value="none" id="noneToggle"
                       onclick="polygonControl.deactivate()"
                       checked="checked" />
                <label for="noneToggle">navigate</label>


                <input type="radio" name="type"
                       value="polygon" id="polygonToggle"
                       onclick="polygonControl.activate()" />
                <label for="polygonToggle">draw polygon</label>
                <% end %>
            <input type=BUTTON value="Clear Polygons" name="mySubmit" onClick="clearPoly()">
            <input type=BUTTON value="Redraw Vector Layer" name="mySubmit" onClick="redrawVL()">
            <input type=BUTTON value="Save Blackout" name="Save Blackout" onClick="saveBlackout()">
            <input type=BUTTON value="Delete Blackout" name="Delete Blackout" onClick="deleteBlackout()">
        </ul>


	  <div id="map" class="small_map"></div>
	
	
	</body>
	
	</html>