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

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

Contains cloning and JSON transformation features

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