source: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js@ 32838

Last change on this file since 32838 was 32832, checked in by ak19, 5 years ago

Zeddy map work. 1. Now supports saving when map editor is selected and key s is pressed.. The saved shapes are now reloaded on page (re)load. 2. If you make a change and didn't save it and try to leave the page, there's now a default warning (can't yet control the warning message, but it's helpful enough at this stage). 3. Some more fixes. 4. Some cleaning up of unused code. 5. Still some debugging statements left in, check for console.log() for instance. 6. Gone back to using javascript instead of jQuery for keyboard shortcuts so it will work for PDF docs too, but kept some additional changes made earlier so that things still work on Firefox besides Chrome.

File size: 12.0 KB
Line 
1
2
3function ShapesUtil() {
4}
5
6ShapesUtil.mvcClonePath = function (path) {
7 var clone_path = new google.maps.MVCArray();
8
9 for (var i = 0; i < path.length; i++) {
10 var lat_lng = path.getAt(i);
11 var lat = lat_lng.lat();
12 var lng = lat_lng.lng();
13 var clone_lat_lng = new google.maps.LatLng(lat,lng);
14
15 clone_path.push(clone_lat_lng);
16 }
17
18 return clone_path;
19}
20
21ShapesUtil.arrayPathToMVCArrayPath = function (array_path) {
22
23 var mvc_array_path = new google.maps.MVCArray();
24
25 for (var i=0; i<array_path.length; i++) {
26 var array_lat_lng = array_path[i];
27 var array_lat = array_lat_lng.lat;
28 var array_lng = array_lat_lng.lng;
29 var lat_lng = new google.maps.LatLng(array_lat,array_lng);
30
31 mvc_array_path.push(lat_lng);
32 }
33
34 return mvc_array_path;
35}
36
37ShapesUtil.mvcArrayPathToArrayPath = function (mvc_array_path) {
38
39 var array_path = [];
40
41 for (var i=0; i<mvc_array_path.length; i++) {
42 var lat_lng = mvc_array_path.getAt(i);
43 var lat = lat_lng.lat();
44 var lng = lat_lng.lng();
45
46 var rec_lat_lng = { lat: lat, lng: lng };
47 array_path.push(rec_lat_lng);
48 }
49
50 return array_path;
51}
52
53ShapesUtil._createPoly = function (type,poly,path) {
54 var geodesic = poly.geodesic;
55 var strokeColor = poly.strokeColor;
56 var strokeOpacity = poly.strokeOpacity;
57 var strokeWeight = poly.strokeWeight;
58
59 clone_path = ShapesUtil.mvcClonePath(path);
60
61 var clone_poly = null;
62
63 if (type == google.maps.drawing.OverlayType.POLYLINE) {
64
65 clone_poly = new google.maps.Polyline({
66 geodesic: geodesic,
67 strokeColor: strokeColor,
68 strokeOpacity: strokeOpacity,
69 strokeWeight: strokeWeight,
70 path: clone_path,
71 draggable: true,
72 editable: false,
73 type: type
74 });
75 }
76 else {
77 // Polygon
78 var fillColor = poly.fillColor;
79 var fillOpacity = poly.fillOpacity;
80
81 clone_poly = new google.maps.Polygon({
82 geodesic: geodesic,
83 strokeColor: strokeColor,
84 strokeOpacity: strokeOpacity,
85 strokeWeight: strokeWeight,
86 fillColor: fillColor,
87 fillOpacity: fillOpacity,
88 path: clone_path,
89 draggable: true,
90 editable: false,
91 type: type
92 });
93 }
94
95 return clone_poly;
96}
97
98
99ShapesUtil._polyToJSON = function (type,poly) {
100
101 var geodesic = poly.geodesic;
102 var strokeColor = poly.strokeColor;
103 var strokeOpacity = poly.strokeOpacity;
104 var strokeWeight = poly.strokeWeight;
105
106 var type = poly.type;
107
108 var mvc_path = poly.getPath();
109 var array_path = ShapesUtil.mvcArrayPathToArrayPath(mvc_path);
110
111 var json_poly =
112 {
113 geodesic: geodesic,
114 strokeColor: strokeColor,
115 strokeOpacity: strokeOpacity,
116 strokeWeight: strokeWeight,
117 path: array_path,
118 type: type
119 };
120
121 if (type == google.maps.drawing.OverlayType.POLYGON) {
122 var fillColor = poly.fillColor;
123 var fillOpacity = poly.fillOpacity;
124
125 json_poly.fillColor = fillColor;
126 json_poly.fillOpacity = fillOpacity;
127 }
128
129 return json_poly;
130}
131
132
133ShapesUtil.clonePolyline = function (polyline) {
134
135 var path = polyline.getPath();
136 var clone_polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE,polyline,path);
137 return clone_polyline;
138}
139
140ShapesUtil.JSONToPolyline = function (json_polyline) {
141
142 var json_path = json_polyline.path;
143 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(json_path);
144
145 var polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE,json_polyline,mvc_path);
146 return polyline;
147}
148
149ShapesUtil.PolylineToJSON = function (polyline) {
150
151 var json_polyline_str = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYLINE, polyline);
152 return json_polyline_str;
153
154}
155
156
157ShapesUtil.clonePolygon = function (polygon) {
158 var mvc_path = polygon.getPath();
159 var clone_polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,polygon,mvc_path);
160 return clone_polygon;
161}
162
163ShapesUtil.JSONToPolygon = function (json_polygon) {
164
165 var array_path = json_polygon.path;
166 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(array_path);
167
168 var polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,json_polygon,mvc_path);
169 return polygon;
170}
171
172ShapesUtil.PolygonToJSON = function (polygon) {
173
174 var json_polygon = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYGON, polygon);
175 return json_polygon;
176}
177
178
179ShapesUtil._createRectangle = function (rect,bounds) {
180 var strokeColor = rect.strokeColor;
181 var strokeOpacity = rect.strokeOpacity;
182 var strokeWeight = rect.strokeWeight;
183 var fillColor = rect.fillColor;
184 var fillOpacity = rect.fillOpacity;
185 var type = rect.type;
186
187 var clone_rect = new google.maps.Rectangle({
188 strokeColor: strokeColor,
189 strokeOpacity: strokeOpacity,
190 strokeWeight: strokeWeight,
191 fillColor: fillColor,
192 fillOpacity: fillOpacity,
193 bounds: bounds,
194 draggable: true,
195 editable: false,
196 type: type
197 });
198 return clone_rect;
199}
200
201ShapesUtil.cloneRectangle = function (rect) {
202
203 var bounds = rect.getBounds();
204 var clone_rect = ShapesUtil._createRectangle(rect,bounds);
205 return clone_rect;
206}
207
208ShapesUtil.JSONToRectangle = function (json_rect) {
209
210 var bounds = json_rect.bounds;
211 var north = bounds.north;
212 var south = bounds.south;
213 var east = bounds.east;
214 var west = bounds.west;
215
216 var NE = new google.maps.LatLng(north, east);
217 var SW = new google.maps.LatLng(south, west);
218 bounds = new google.maps.LatLngBounds(SW, NE);
219
220 var rect = ShapesUtil._createRectangle(json_rect,bounds);
221 return rect;
222}
223
224ShapesUtil.RectangleToJSON = function (rect) {
225
226 var strokeColor = rect.strokeColor;
227 var strokeOpacity = rect.strokeOpacity;
228 var strokeWeight = rect.strokeWeight;
229 var fillColor = rect.fillColor;
230 var fillOpacity = rect.fillOpacity;
231 var type = rect.type;
232
233 var bounds = rect.getBounds();
234 var north_east = bounds.getNorthEast();
235 var south_west = bounds.getSouthWest();
236
237 var north = north_east.lat();
238 var east = north_east.lng();
239 var south = south_west.lat();
240 var west = south_west.lng();
241
242 var json_rect =
243 {
244 strokeColor: strokeColor,
245 strokeOpacity: strokeOpacity,
246 strokeWeight: strokeWeight,
247 fillColor: fillColor,
248 fillOpacity: fillOpacity,
249 bounds: { north: north, south: south, east: east, west: west },
250 type: type
251 }
252
253 return json_rect;
254}
255
256
257
258ShapesUtil._createCircle = function (circ) {
259 var strokeColor = circ.strokeColor;
260 var strokeOpacity = circ.strokeOpacity;
261 var strokeWeight = circ.strokeWeight;
262 var fillColor = circ.fillColor;
263 var fillOpacity = circ.fillOpacity;
264 var center = circ.center;
265 var radius = circ.radius;
266 var type = circ.type;
267
268 var clone_circ = new google.maps.Circle({
269 strokeColor: strokeColor,
270 strokeOpacity: strokeOpacity,
271 strokeWeight: strokeWeight,
272 fillColor: fillColor,
273 fillOpacity: fillOpacity,
274 center: center,
275 radius: radius,
276 draggable: true,
277 editable: false,
278 type: type
279 });
280 return clone_circ;
281}
282
283ShapesUtil.cloneCircle = function (circ) {
284 return ShapesUtil._createCircle(circ);
285}
286
287ShapesUtil.JSONToCircle = function (json_circ) {
288
289 var circ = ShapesUtil._createCircle(json_circ);
290 return circ;
291}
292
293ShapesUtil.CircleToJSON = function (circ) {
294 var strokeColor = circ.strokeColor;
295 var strokeOpacity = circ.strokeOpacity;
296 var strokeWeight = circ.strokeWeight;
297 var fillColor = circ.fillColor;
298 var fillOpacity = circ.fillOpacity;
299 var center = circ.center;
300 var radius = circ.radius;
301 var type = circ.type;
302
303
304 var json_circ =
305 {
306 strokeColor: strokeColor,
307 strokeOpacity: strokeOpacity,
308 strokeWeight: strokeWeight,
309 fillColor: fillColor,
310 fillOpacity: fillOpacity,
311 center: center,
312 radius: radius,
313 type: type
314 };
315
316 return json_circ;
317}
318
319ShapesUtil._createMarker = function (position) {
320
321 var clone_marker = new google.maps.Marker({
322 position: position,
323 clickable: true,
324 draggable: true,
325 editable: true,
326 type: google.maps.drawing.OverlayType.MARKER
327 })
328 return clone_marker;
329}
330
331ShapesUtil.cloneMarker = function (marker) {
332
333 var position = marker.getPosition();
334 var clone_marker = ShapesUtil._createMarker(position);
335 return clone_marker;
336}
337
338
339ShapesUtil.JSONToMarker = function (json_marker) {
340
341 var json_position = json_marker.position;
342 var lat = json_position.lat;
343 var lng = json_position.lng;
344 var position = new google.maps.LatLng(lat, lng);
345
346 var marker = ShapesUtil._createMarker(position);
347 return marker;
348}
349
350ShapesUtil.MarkerToJSON = function (marker) {
351
352 var position = marker.getPosition();
353 var lat = position.lat();
354 var lng = position.lng();
355
356 var json_marker =
357 {
358 position: { lat: lat, lng: lng },
359 type: google.maps.drawing.OverlayType.MARKER
360 };
361
362 return json_marker;
363}
364
365
366ShapesUtil.cloneShape = function (shape) {
367 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
368 var clone_polyline = ShapesUtil.clonePolyline(shape);
369 return clone_polyline;
370 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
371 var clone_polygon = ShapesUtil.clonePolygon(shape);
372 return clone_polygon;
373 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
374 var clone_rect = ShapesUtil.cloneRectangle(shape);
375 return clone_rect;
376
377 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
378 var clone_circ = ShapesUtil.cloneCircle(shape);
379 return clone_circ;
380
381 } else {
382 var clone_marker = ShapesUtil.cloneMarker(shape);
383 return clone_marker;
384 }
385}
386
387ShapesUtil.overlayItemIsShape = function (overlay_item) {
388 var type = overlay_item.type;
389
390 is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
391 || (type === google.maps.drawing.OverlayType.POLYGON)
392 || (type === google.maps.drawing.OverlayType.RECTANGLE)
393 || (type === google.maps.drawing.OverlayType.CIRCLE);
394
395 return is_shape;
396}
397
398
399ShapesUtil.shapeToJSON = function(shape) {
400
401 var json_shape = null;
402
403 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
404 json_shape = ShapesUtil.PolylineToJSON(shape);
405 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
406 json_shape = ShapesUtil.PolygonToJSON(shape);
407 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
408 json_shape = ShapesUtil.RectangleToJSON(shape);
409 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
410 json_shape = ShapesUtil.CircleToJSON(shape);
411 } else if (shape.type === google.maps.drawing.OverlayType.MARKER){
412 json_shape = ShapesUtil.MarkerToJSON(shape);
413 }
414 else {
415 console.error("*** shapeToJSON() Unrecognized shape type: " + shape.type);
416 }
417
418 return json_shape;
419}
420
421ShapesUtil.overlayToJSON = function (overlays) {
422
423 var json_overlays = [];
424
425 for (var i=0; i<overlays.length; i++) {
426
427 var shape = overlays[i];
428 var json_shape = ShapesUtil.shapeToJSON(shape);
429
430 json_overlays.push(json_shape);
431 }
432
433 return json_overlays;
434
435}
436
437ShapesUtil.JSONToShape = function(json_shape) {
438
439 var shape = null;
440
441 if (json_shape.type === google.maps.drawing.OverlayType.POLYLINE) {
442 shape = ShapesUtil.JSONToPolyline(json_shape);
443 } else if (json_shape.type === google.maps.drawing.OverlayType.POLYGON) {
444 shape = ShapesUtil.JSONToPolygon(json_shape);
445 } else if (json_shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
446 shape = ShapesUtil.JSONToRectangle(json_shape);
447 } else if (json_shape.type === google.maps.drawing.OverlayType.CIRCLE) {
448 shape = ShapesUtil.JSONToCircle(json_shape);
449 } else if (json_shape.type === google.maps.drawing.OverlayType.MARKER){
450 shape = ShapesUtil.JSONToMarker(json_shape);
451 }
452 else {
453 console.error("*** JSONToShape() Unrecognized shape type: " +json_shape.type);
454 }
455
456 return shape;
457}
458
459ShapesUtil.JSONToOverlays = function (json_shapes_str) {
460 var json_shapes = JSON.parse(json_shapes_str);
461
462 var overlays = [];
463
464 for (var i=0; i<json_shapes.length; i++) {
465 var json_shape = json_shapes[i];
466 var shape = ShapesUtil.JSONToShape(json_shape);
467
468 overlays.push(shape);
469 }
470
471 return overlays;
472
473}
474
475
Note: See TracBrowser for help on using the repository browser.