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

Last change on this file since 33186 was 33186, checked in by wy59, 5 years ago

Lower opacity for other documents that are nearby. Discovered broken code: Locations classifier in ImagesGPS no longer displays a map.
File size: 16.6 KB
Line 
1
2// https://stackoverflow.com/questions/3284808/getting-the-bounds-of-a-polyline-in-google-maps-api-v3
3
4google.maps.Polyline.prototype.getBounds = function() {
5 var bounds = new google.maps.LatLngBounds();
6 this.getPath().forEach(function(item, index) {
7 bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));
8 });
9 return bounds;
10};
11
12google.maps.Polygon.prototype.getBounds = function() {
13 var bounds = new google.maps.LatLngBounds();
14 this.getPath().forEach(function(item, index) {
15 bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));
16 });
17 return bounds;
18};
19
20
21function ShapesUtil() {
22}
23
24ShapesUtil.mvcClonePath = function (path) {
25 var clone_path = new google.maps.MVCArray();
26
27 for (var i = 0; i < path.length; i++) {
28 var lat_lng = path.getAt(i);
29 var lat = lat_lng.lat();
30 var lng = lat_lng.lng();
31 var clone_lat_lng = new google.maps.LatLng(lat,lng);
32
33 clone_path.push(clone_lat_lng);
34 }
35
36 return clone_path;
37}
38
39ShapesUtil.arrayPathToMVCArrayPath = function (array_path) {
40
41 var mvc_array_path = new google.maps.MVCArray();
42
43 for (var i=0; i<array_path.length; i++) {
44 var array_lat_lng = array_path[i];
45 var array_lat = array_lat_lng.lat;
46 var array_lng = array_lat_lng.lng;
47 var lat_lng = new google.maps.LatLng(array_lat,array_lng);
48
49 mvc_array_path.push(lat_lng);
50 }
51
52 return mvc_array_path;
53}
54
55ShapesUtil.mvcArrayPathToArrayPath = function (mvc_array_path) {
56
57 var array_path = [];
58
59 for (var i=0; i<mvc_array_path.length; i++) {
60 var lat_lng = mvc_array_path.getAt(i);
61 var lat = lat_lng.lat();
62 var lng = lat_lng.lng();
63
64 var rec_lat_lng = { lat: lat, lng: lng };
65 array_path.push(rec_lat_lng);
66 }
67
68 return array_path;
69}
70
71ShapesUtil._createPoly = function (type,poly,path) {
72 var geodesic = poly.geodesic;
73 var strokeColor = poly.strokeColor;
74 var strokeOpacity = poly.strokeOpacity;
75 var strokeWeight = poly.strokeWeight;
76
77 clone_path = ShapesUtil.mvcClonePath(path);
78
79 var clone_poly = null;
80
81 if (type == google.maps.drawing.OverlayType.POLYLINE) {
82
83 clone_poly = new google.maps.Polyline({
84 suppressUndo: true,
85 geodesic: geodesic,
86 strokeColor: strokeColor,
87 strokeOpacity: strokeOpacity,
88 strokeWeight: strokeWeight,
89 path: clone_path,
90 draggable: true,
91 editable: false,
92 type: type
93 });
94 }
95 else {
96 // Polygon
97 var fillColor = poly.fillColor;
98 var fillOpacity = poly.fillOpacity;
99
100 clone_poly = new google.maps.Polygon({
101 suppressUndo: true,
102 geodesic: geodesic,
103 strokeColor: strokeColor,
104 strokeOpacity: strokeOpacity,
105 strokeWeight: strokeWeight,
106 fillColor: fillColor,
107 fillOpacity: fillOpacity,
108 path: clone_path,
109 draggable: true,
110 editable: false,
111 type: type
112 });
113 }
114
115 return clone_poly;
116}
117
118
119ShapesUtil._polyToJSON = function (type,poly) {
120
121 var geodesic = poly.geodesic;
122 var strokeColor = poly.strokeColor;
123 var strokeOpacity = poly.strokeOpacity;
124 var strokeWeight = poly.strokeWeight;
125
126 var type = poly.type;
127
128 var mvc_path = poly.getPath();
129 var array_path = ShapesUtil.mvcArrayPathToArrayPath(mvc_path);
130
131 var json_poly =
132 {
133 geodesic: geodesic,
134 strokeColor: strokeColor,
135 strokeOpacity: strokeOpacity,
136 strokeWeight: strokeWeight,
137 path: array_path,
138 type: type
139 };
140
141 if (type == google.maps.drawing.OverlayType.POLYGON) {
142 var fillColor = poly.fillColor;
143 var fillOpacity = poly.fillOpacity;
144
145 json_poly.fillColor = fillColor;
146 json_poly.fillOpacity = fillOpacity;
147 }
148
149 return json_poly;
150}
151
152
153ShapesUtil.clonePolyline = function (polyline) {
154
155 var path = polyline.getPath();
156 var clone_polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE,polyline,path);
157 return clone_polyline;
158}
159
160ShapesUtil.JSONToPolyline = function (json_polyline) {
161
162 var json_path = json_polyline.path;
163 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(json_path);
164
165 var polyline = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYLINE, json_polyline, mvc_path);
166 return polyline;
167}
168
169ShapesUtil.PolylineToJSON = function (polyline) {
170
171 var json_polyline_str = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYLINE, polyline);
172 return json_polyline_str;
173
174}
175
176
177ShapesUtil.clonePolygon = function (polygon) {
178 var mvc_path = polygon.getPath();
179 var clone_polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,polygon,mvc_path);
180 return clone_polygon;
181}
182
183ShapesUtil.JSONToPolygon = function (json_polygon) {
184
185 var array_path = json_polygon.path;
186 var mvc_path = ShapesUtil.arrayPathToMVCArrayPath(array_path);
187
188 var polygon = ShapesUtil._createPoly(google.maps.drawing.OverlayType.POLYGON,json_polygon,mvc_path);
189 return polygon;
190}
191
192ShapesUtil.PolygonToJSON = function (polygon) {
193
194 var json_polygon = ShapesUtil._polyToJSON(google.maps.drawing.OverlayType.POLYGON, polygon);
195 return json_polygon;
196}
197
198
199ShapesUtil._createRectangle = function (rect,bounds) {
200 var strokeColor = rect.strokeColor;
201 var strokeOpacity = rect.strokeOpacity;
202 var strokeWeight = rect.strokeWeight;
203 var fillColor = rect.fillColor;
204 var fillOpacity = rect.fillOpacity;
205 var type = rect.type;
206
207 var clone_rect = new google.maps.Rectangle({
208 suppressUndo: true,
209 strokeColor: strokeColor,
210 strokeOpacity: strokeOpacity,
211 strokeWeight: strokeWeight,
212 fillColor: fillColor,
213 fillOpacity: fillOpacity,
214 bounds: bounds,
215 draggable: true,
216 editable: false,
217 type: type
218 });
219 return clone_rect;
220}
221
222ShapesUtil.cloneRectangle = function (rect) {
223
224 var bounds = rect.getBounds();
225 var clone_rect = ShapesUtil._createRectangle(rect,bounds);
226 return clone_rect;
227}
228
229ShapesUtil.JSONToRectangle = function (json_rect) {
230
231 var bounds = json_rect.bounds;
232 var north = bounds.north;
233 var south = bounds.south;
234 var east = bounds.east;
235 var west = bounds.west;
236
237 var NE = new google.maps.LatLng(north, east);
238 var SW = new google.maps.LatLng(south, west);
239 bounds = new google.maps.LatLngBounds(SW, NE); // THIS IS NOT IN GOOGLE MAPS' RECTANGLE FORMAT!
240
241 var rect = ShapesUtil._createRectangle(json_rect,bounds);
242 return rect;
243}
244
245ShapesUtil.RectangleToJSON = function (rect) {
246
247 var strokeColor = rect.strokeColor;
248 var strokeOpacity = rect.strokeOpacity;
249 var strokeWeight = rect.strokeWeight;
250 var fillColor = rect.fillColor;
251 var fillOpacity = rect.fillOpacity;
252 var type = rect.type;
253
254 var bounds = rect.getBounds();
255 var north_east = bounds.getNorthEast();
256 var south_west = bounds.getSouthWest();
257
258 var north = north_east.lat();
259 var east = north_east.lng();
260 var south = south_west.lat();
261 var west = south_west.lng();
262
263 var json_rect =
264 {
265 strokeColor: strokeColor,
266 strokeOpacity: strokeOpacity,
267 strokeWeight: strokeWeight,
268 fillColor: fillColor,
269 fillOpacity: fillOpacity,
270 bounds: { north: north, south: south, east: east, west: west },
271 type: type
272 }
273
274 return json_rect;
275}
276
277
278
279ShapesUtil._createCircle = function (circ) {
280 var strokeColor = circ.strokeColor;
281 var strokeOpacity = circ.strokeOpacity;
282 var strokeWeight = circ.strokeWeight;
283 var fillColor = circ.fillColor;
284 var fillOpacity = circ.fillOpacity;
285 var center = circ.center;
286 var radius = circ.radius;
287 var type = circ.type;
288
289 var clone_circ = new google.maps.Circle({
290 suppressUndo: true,
291 strokeColor: strokeColor,
292 strokeOpacity: strokeOpacity,
293 strokeWeight: strokeWeight,
294 fillColor: fillColor,
295 fillOpacity: fillOpacity,
296 center: center,
297 radius: radius,
298 draggable: true,
299 editable: false,
300 type: type
301 });
302 return clone_circ;
303}
304
305ShapesUtil.cloneCircle = function (circ) {
306 return ShapesUtil._createCircle(circ);
307}
308
309ShapesUtil.JSONToCircle = function (json_circ) {
310
311 var circ = ShapesUtil._createCircle(json_circ);
312 return circ;
313}
314
315ShapesUtil.CircleToJSON = function (circ) {
316 var strokeColor = circ.strokeColor;
317 var strokeOpacity = circ.strokeOpacity;
318 var strokeWeight = circ.strokeWeight;
319 var fillColor = circ.fillColor;
320 var fillOpacity = circ.fillOpacity;
321 var center = circ.center;
322 var radius = circ.radius;
323 var type = circ.type;
324
325
326 var json_circ =
327 {
328 strokeColor: strokeColor,
329 strokeOpacity: strokeOpacity,
330 strokeWeight: strokeWeight,
331 fillColor: fillColor,
332 fillOpacity: fillOpacity,
333 center: center,
334 radius: radius,
335 type: type
336 };
337
338 return json_circ;
339}
340
341ShapesUtil._createMarker = function (position) {
342
343 var clone_marker = new google.maps.Marker({
344 suppressUndo: true,
345 position: position,
346 clickable: true,
347 draggable: true,
348 editable: true,
349 type: google.maps.drawing.OverlayType.MARKER
350 })
351 return clone_marker;
352}
353
354ShapesUtil.cloneMarker = function (marker) {
355
356 var position = marker.getPosition();
357 var clone_marker = ShapesUtil._createMarker(position);
358 return clone_marker;
359}
360
361
362ShapesUtil.JSONToMarker = function (json_marker) {
363
364 var json_position = json_marker.position;
365 var lat = json_position.lat;
366 var lng = json_position.lng;
367 var position = new google.maps.LatLng(lat, lng);
368
369 var marker = ShapesUtil._createMarker(position);
370 return marker;
371}
372
373ShapesUtil.MarkerToJSON = function (marker) {
374
375 var position = marker.getPosition();
376 var lat = position.lat();
377 var lng = position.lng();
378
379 var json_marker =
380 {
381 position: { lat: lat, lng: lng },
382 type: google.maps.drawing.OverlayType.MARKER
383 };
384
385 return json_marker;
386}
387
388
389ShapesUtil.cloneShape = function (shape) {
390 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
391 var clone_polyline = ShapesUtil.clonePolyline(shape);
392 clone_polyline.description = shape.description;
393 return clone_polyline;
394 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
395 var clone_polygon = ShapesUtil.clonePolygon(shape);
396 clone_polygon.description = shape.description;
397 return clone_polygon;
398 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
399 var clone_rect = ShapesUtil.cloneRectangle(shape);
400 clone_rect.description = shape.description;
401 return clone_rect;
402 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
403 var clone_circ = ShapesUtil.cloneCircle(shape);
404 clone_circ.description = shape.description;
405 return clone_circ;
406
407 } else {
408 var clone_marker = ShapesUtil.cloneMarker(shape);
409 clone_marker.description = shape.description;
410 return clone_marker;
411 }
412}
413
414ShapesUtil.overlayItemIsShape = function (overlay_item) {
415 var type = overlay_item.type;
416
417 is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
418 || (type === google.maps.drawing.OverlayType.POLYGON)
419 || (type === google.maps.drawing.OverlayType.RECTANGLE)
420 || (type === google.maps.drawing.OverlayType.CIRCLE);
421
422 return is_shape;
423}
424
425
426ShapesUtil.shapeToJSON = function(shape) {
427
428 var json_shape = null;
429
430 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
431 json_shape = ShapesUtil.PolylineToJSON(shape);
432 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
433 json_shape = ShapesUtil.PolygonToJSON(shape);
434 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
435 json_shape = ShapesUtil.RectangleToJSON(shape);
436 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
437 json_shape = ShapesUtil.CircleToJSON(shape);
438 } else if (shape.type === google.maps.drawing.OverlayType.MARKER){
439 json_shape = ShapesUtil.MarkerToJSON(shape);
440 }
441 else {
442 console.error("*** shapeToJSON() Unrecognized shape type: " + shape.type);
443 }
444
445 json_shape.description = shape.description;
446 return json_shape;
447}
448
449ShapesUtil.overlayToJSON = function (overlays) {
450
451 var json_overlays = [];
452
453 for (var i=0; i<overlays.length; i++) {
454
455 var shape = overlays[i];
456 var json_shape = ShapesUtil.shapeToJSON(shape);
457
458 json_overlays.push(json_shape);
459 }
460
461 return json_overlays;
462
463}
464
465ShapesUtil.JSONToShape = function(json_shape) {
466
467 var shape = null;
468
469 if (json_shape.type === google.maps.drawing.OverlayType.POLYLINE) {
470 shape = ShapesUtil.JSONToPolyline(json_shape);
471 } else if (json_shape.type === google.maps.drawing.OverlayType.POLYGON) {
472 shape = ShapesUtil.JSONToPolygon(json_shape);
473 } else if (json_shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
474 shape = ShapesUtil.JSONToRectangle(json_shape);
475 } else if (json_shape.type === google.maps.drawing.OverlayType.CIRCLE) {
476 shape = ShapesUtil.JSONToCircle(json_shape);
477 } else if (json_shape.type === google.maps.drawing.OverlayType.MARKER){
478 shape = ShapesUtil.JSONToMarker(json_shape);
479 }
480 else {
481 console.error("*** JSONToShape() Unrecognized shape type: " +json_shape.type);
482 }
483
484 shape.description = json_shape.description;
485 return shape;
486}
487
488ShapesUtil.JSONToOverlays = function (json_shapes_str) {
489 var json_shapes = JSON.parse(json_shapes_str);
490
491 var overlays = [];
492
493 for (var i=0; i<json_shapes.length; i++) {
494 var json_shape = json_shapes[i];
495 var shape = ShapesUtil.JSONToShape(json_shape);
496
497 overlays.push(shape);
498 }
499
500 return overlays;
501
502}
503
504
505// function returns an object (representing a Coordinate) of the form {lat: 34.052, lng: -118.243}
506// For each shape's properties: https://developers.google.com/maps/documentation/javascript/shapes
507ShapesUtil.getLabelCoordinate = function(shape) {
508
509 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
510 var path = shape.getPath(); // assuming a minimum of one path array for each polygon
511 return path.getAt(0); // return the first coord of polyline for now
512 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
513 var path = shape.getPath(); // assuming a minimum of one path array for each polygon
514 return path.getAt(0); // return the first coord for now
515 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
516 // Doesn't work:
517 //var latitude = (shape.bounds.north + shape.bounds.south) / 2;
518 //var longitude = (shape.bounds.east + shape.bounds.west) / 2;
519 //console.log("Rect: " + shape.bounds.toString());
520 //return {lat: shape.bounds.north, lng: shape.bounds.east};
521 // A Google Maps Rectangle's bounds property has 4 attributes/properties: north, south, east, west
522 // But this ShapesUtil.Rectangle class's bounds property has 2 coord properties: SW and NE.
523 // However, it is handy in this case, since we can just call getCenter()
524 return shape.bounds.getCenter();
525 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
526 return shape.center; // circles have a centre
527 } else if (shape.type === google.maps.drawing.OverlayType.MARKER){
528 return shape.position;
529 }
530 else {
531 console.error("*** ShapesUtil::getLabelCoordinate() Unrecognized shape type: " +shape.type);
532 return null;
533 }
534}
535
536
537ShapesUtil.numberOfCoordinatesInBounds = function (shape) {
538 if (shape.type === google.maps.drawing.OverlayType.MARKER){
539 return 1;
540 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
541 return 4;
542 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
543 return 4; // circles have a rectangular/square bounding box, so 4 coordinates to a circle's bounding box
544 } else if (shape.type === google.maps.drawing.OverlayType.POLYLINE || shape.type === google.maps.drawing.OverlayType.POLYGON) {
545 var path = shape.getPath();
546 return path.length;
547 }
548
549 console.log("Unrecognised shape, can't calculate the number of coordinates in its bounds");
550 return -1;
551}
552
553ShapesUtil.overlayBounds = function (overlays) {
554
555
556 var extended_bounds = new google.maps.LatLngBounds();
557
558 for (var i=0; i<overlays.length; i++) {
559
560 var overlay_item = overlays[i];
561
562 if (ShapesUtil.overlayItemIsShape(overlay_item)) {
563 var shape = overlay_item;
564
565 var bounds = shape.getBounds();
566 var ne = bounds.getNorthEast();
567 var sw = bounds.getSouthWest();
568 extended_bounds.extend(ne);
569 extended_bounds.extend(sw);
570 }
571 else {
572 var marker = overlay_item;
573 var latlng = marker.getPosition();
574 extended_bounds.extend(latlng);
575 }
576 }
577
578 return extended_bounds;
579
580}
581
582
583ShapesUtil.setOpacity = function (shape, opacity) {
584 if (shape.type === google.maps.drawing.OverlayType.RECTANGLE
585 || shape.type === google.maps.drawing.OverlayType.POLYGON
586 || shape.type === google.maps.drawing.OverlayType.CIRCLE)
587 {
588 shape.fillOpacity = opacity;
589 } else if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
590 shape.strokeOpacity = opacity;
591 }
592 else {
593 console.log("Can't set opacity on unrecognised shape: " + shape.type);
594 }
595}
Note: See TracBrowser for help on using the repository browser.